jQueryUIのdatepickerがあり、その日が選択された特定の週を選択するコードを取得しようとしています。日曜日を除いて毎日動作します。 日曜日を選択すると、翌週が表示されますが、現在の週が表示されます。たとえば、5月9日を選択した場合、範囲は 5月9日から2015年12月15日までです。ですが、15番目を選択すると、5月16日から2016年5月22日までと表示されます私はjQuery datePicker週の選択
<input style="display: none" name="date" type="input" id="datePick"/>
<span>Week Of: </span>
<span style="font-weight: bold" id="weekRange">
</span>
<br/>
M : <span id="mondayNum"></span>
<br/>
TU : <span id="tuesdayNum"></span>
<br/>
W : <span id="wednesdayNum"></span>
<br/>
TH : <span id="thursdayNum"></span>
<br/>
F : <span id="fridayNum"></span>
<br/>
SA : <span id="saturdayNum"></span>
<br/>
SU : <span id="sundayNum"></span>
javascriptの
$(document).ready(function()
{
//alert(t1);
$("#datePick").datepicker(
{
showWeek:true,
showOtherMonths: true,
selectOtherMonths: true,
firstDay: 1,
showOn: "button",
buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
buttonImageOnly:true,
onSelect: function(dateText, inst)
{
var dayOne,dayTwo,dayThree,dayFour,dayFive,daySix,daySeven;
var date = $(this).datepicker('getDate');
//console.log($.datepicker.iso8601Week(new Date(dateText)));
tempDay = $.datepicker.formatDate('D', date);
if(tempDay == 'Sun')
{
console.log("Sunday");
console.log(date);
console.log(tempDay);
dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
//
dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
$('#weekRange').text($.datepicker.formatDate('M d', dayOne) + " to " + $.datepicker.formatDate('M d, yy', daySeven));
$('#mondayNum').text($.datepicker.formatDate('d', dayOne));
$('#tuesdayNum').text($.datepicker.formatDate('d', dayTwo));
$('#wednesdayNum').text($.datepicker.formatDate('d', dayThree));
$('#thursdayNum').text($.datepicker.formatDate('d', dayFour));
$('#fridayNum').text($.datepicker.formatDate('d', dayFive));
$('#saturdayNum').text($.datepicker.formatDate('d', daySix));
$('#sundayNum').text($.datepicker.formatDate('d', daySeven));
$("#datePick").datepicker("setDate", dayOne);
}
else
{
console.log("Not Sunday");
console.log(tempDay);
previousWeek = ($.datepicker.iso8601Week(date) - 1);
console.log("Picked day previous Week: " + previousWeek);
console.log("Current week: " + $.datepicker.iso8601Week(date));
var nextWeek = ($.datepicker.iso8601Week(date) + 1);
console.log("Picked day following Week: " + nextWeek);
console.log(dateText);
dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
}
console.log("2nd: " + dayTwo);
console.log("3rd: " + dayThree);
console.log("4th: " + dayFour);
console.log("5th: " + dayFive);
console.log("6th: " + daySix);
console.log("7th: " + daySeven);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
//console.log($.datepicker.formatDate('M d', monday, inst.settings) + " to " + $.datepicker.formatDate('M d, yy', sunday, inst.settings));
$('#weekRange').text($.datepicker.formatDate('M d', dayOne, inst.settings) + " to " + $.datepicker.formatDate('M d, yy', daySeven, inst.settings));
$('#mondayNum').text($.datepicker.formatDate('d', dayOne));
$('#tuesdayNum').text($.datepicker.formatDate('d', dayTwo));
$('#wednesdayNum').text($.datepicker.formatDate('d', dayThree));
$('#thursdayNum').text($.datepicker.formatDate('d', dayFour));
$('#fridayNum').text($.datepicker.formatDate('d', dayFive));
$('#saturdayNum').text($.datepicker.formatDate('d', daySix));
$('#sundayNum').text($.datepicker.formatDate('d', daySeven));
$("#datePick").datepicker("setDate", dayOne);
//alert($.datepicker.formatDate('d', dayOne, inst.settings));
}
});
//console.log("1st: " + dayOne);
$("#datePick").datepicker("setDate", new Date());
var date = $("#datePick").datepicker('getDate');
//console.log(test);
dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
$('#weekRange').text($.datepicker.formatDate('M d', dayOne) + " to " + $.datepicker.formatDate('M d, yy', daySeven));
//console.log("1st: "+ bob);
});
jsfiddle第九
HTMLを選択した場合 https://jsfiddle.net/gauldivic/vexuu26j/
私は質問を更新しました。 –