次の JavaScript コードは、startDate と endDate を提供する週間カレンダーを作成します: Weekly Calendar Widget
- 範囲内の各曜日の MM/DD 値も取得するにはどうすればよいですか?
たとえば、次の変数をフォームに出力する必要があります。
- var startDate; (例: 2013 年 11 月 10 日)
var endDate; (例: 2013 年 11 月 16 日)
var sunDate; (必要.. 11/10)
- var monDate; (必要.. 11/11)
- var tueDate; (必要.. 11/12)
- var wedDate; (必要.. 11/13)
- var thuDate; (必要.. 11/14)
- var friDate; (必要.. 11/15)
- var satDate; (必要.. 11/16)
のようなものでしょうか..?
var sunDate = endDate - 6 (フォーマットされた mm/dd)
JavaScript のカレンダー コードは次のとおりです。
see link: Weekly Calendar Widget
これが私の更新されたコードで、最終的にはうまくいきました:
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var monDate;
var tueDate;
var wedDate;
var thuDate;
var friDate;
var satDate;
var sunDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: "mm/dd",
firstDay: 1, // Start with Monday
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
monDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
tueDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
wedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
thuDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
friDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
satDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
sunDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').val($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').val($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
$('#monDate').val($.datepicker.formatDate( dateFormat, monDate, inst.settings ));
$('#tueDate').val($.datepicker.formatDate( dateFormat, tueDate, inst.settings ));
$('#wedDate').val($.datepicker.formatDate( dateFormat, wedDate, inst.settings ));
$('#thuDate').val($.datepicker.formatDate( dateFormat, thuDate, inst.settings ));
$('#friDate').val($.datepicker.formatDate( dateFormat, friDate, inst.settings ));
$('#satDate').val($.datepicker.formatDate( dateFormat, satDate, inst.settings ));
$('#sunDate').val($.datepicker.formatDate( dateFormat, sunDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
次に、HTMLで次を使用しました:
<thead>
<tr>
<th>Type</th>
<th>Mon<br>
<input disabled id="monDate" size="5" data-mini="true"></th>
<th>Tue<br>
<input disabled id="tueDate" size="5" data-mini="true"></th>
<th>Wed<br>
<input disabled id="wedDate" size="5" data-mini="true"></th>
<th>Thu<br>
<input disabled id="thuDate" size="5" data-mini="true"></th>
<th>Fri<br>
<input disabled id="friDate" size="5" data-mini="true"></th>
<th>Sat<br>
<input disabled id="satDate" size="5" data-mini="true"></th>
<th>Sun<br>
<input disabled id="sunDate" size="5" data-mini="true"></th>
<th>Totals</th>
<th>Description</th>
</tr>
ここに私の完全な HTML ページがあります: https://dl.dropboxusercontent.com/u/58096637/Timesheet.txt