Javascript 获取范围内每个工作日的 MM/DD 值？

Question

以下 javascript 代码创建了一个周历，其中包含开始日期和结束日期:Weekly Calendar Widget

• 我如何调整它以同时为我提供范围内每个工作日的 MM/DD 值？

• 例如，我需要将以下变量输出到我的表单中:

  • 变种开始日期； (例如 2013 年 11 月 10 日)

  • var 结束日期； (例如 2013 年 11 月 16 日)

  • 变种太阳日期； (需要.. 11/10)

  • var monDate; (需要.. 11/11)
  • var tueDate; (需要.. 11/12)
  • 变种结婚日期； (需要.. 11/13)
  • var 周四日期； (需要.. 11/14)
  • 变种周五; (需要.. 11/15)
  • 变种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

Answer 1

来自手册: http://api.jqueryui.com/datepicker/#option-dateFormat

$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });

在您的代码中:

$('.week-picker').datepicker( {
    showOtherMonths: true,
    selectOtherMonths: true,
    dateFormat: "dd/mm",

您的代码看起来不错，但只有在 firstDay 为 1 时才有效，更新了代码以使用您提供的 html

$(function() {
  //removed all variables
  var selectCurrentWeek = function() {
    window.setTimeout(function () {
      $('.week-picker').find('.ui-datepicker-current-day a')
        .addClass('ui-state-active')
    }, 1);
  }

  //changed this function
  $('.week-picker').datepicker( {
    showOtherMonths: true,
    selectOtherMonths: true,
    dateFormat: "mm/dd",
    firstDay: 1, // Start with Monday
    onSelect: function(dateText, inst) { 
      var date = $(this).datepicker('getDate'),
      start = inst.settings.firstDay || $.datepicker._defaults.firstDay,
      year = date.getFullYear(),month = date.getMonth(),
      day = (date.getDate()-date.getDay()),
      elIds=["#monDate","#tueDate","#wedDate","#thuDate","#friDate","#satDate",
        "#sunDate","#startDate","#endDate"],
      i=-1,start,dates=[],
      dateFormat = inst.settings.dateFormat || 
        $.datepicker._defaults.dateFormat,
      day=(date.getDay()<start)?(day+start)-7:day+start;
      while(++i<7){
        dates.push(new Date(year,month,day+i));
        $(elIds[i]).val($.datepicker.formatDate( dateFormat, dates[i]
          , inst.settings ));
      }
      i=-1;
      $(elIds[7]).val($.datepicker.formatDate( dateFormat, dates[0],
        inst.settings ));
      $(elIds[8]).val($.datepicker.formatDate( dateFormat, dates[6],
        inst.settings ));
      selectCurrentWeek();
    },
  });
  $('.week-picker .ui-datepicker-calendar tr').on('mousemove', function() {
    $(this).find('td a').addClass('ui-state-hover'); 
  });
  $('.week-picker .ui-datepicker-calendar tr').on('mouseleave', function() {
    $(this).find('td a').removeClass('ui-state-hover');
  });
});