1

次の 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

4

2 に答える 2