javascript - 如果 datepicker 已经有值运行 onselect 无论如何

Question

目前，我可以选择一个日期，它会在我的输入字段中填充 7 天的日期以及输入字段上另一个系列中对应的一周中的某一天(在下面的示例中仅为 3 天)。这工作得很好，虽然我确信有一种更有效的方法可以用数组编写相同的东西，但我只是不知道。

但是，如果我在页面加载时从数据库获取开始日期，而不是使用日期选择器选择它，则它显然不会触发 onselect 事件，并且字段不会填充。我怎样才能让它填充这两种情况下的字段？

我正在考虑一个在日期选择器输入具有有效值或 onselect 时运行的函数，但在这个我无法理解的小项目之前从未真正接触过 JS。

$(function() {
$("#StartDate").datepicker({
  dateFormat: 'dd/mm/yy',
  onSelect: function(dateStr, inst) {
      var weekday=new Array(7);
        weekday[0]="Monday";
        weekday[1]="Tuesday";
        weekday[2]="Wednesday";
        weekday[3]="Thursday";
        weekday[4]="Friday";
        weekday[5]="Saturday";
        weekday[6]="Sunday";
      var Date1 = $.datepicker.parseDate('dd/mm/yy', dateStr);
      Date1.setDate(Date1.getDate('dd/mm/yy'));
      $('#Date1').val(Date1.toLocaleDateString());
      $('#Day1').val(weekday[Date1.getUTCDay()]);
      var Date2 = $.datepicker.parseDate('dd/mm/yy', dateStr);
      Date2.setDate(Date2.getDate('dd/mm/yy') + 1);
      $('#Date2').val(Date2.toLocaleDateString());
      $('#Day2').val(weekday[Date2.getUTCDay()]);
      var Date3 = $.datepicker.parseDate('dd/mm/yy', dateStr);
      Date3.setDate(Date3.getDate('dd/mm/yy') + 2);
      $('#Date3').val(Date3.toLocaleDateString());
      $('#Day3').val(weekday[Date3.getUTCDay()]);
      }
  });
});

Answer 1

像这样的循环怎么样？

$(function() {
$("#StartDate").datepicker({
  dateFormat: 'dd/mm/yy',
  onSelect: function(dateStr, inst) {
      var weekday=new Array(7);
        weekday[0]="Monday";
        weekday[1]="Tuesday";
        weekday[2]="Wednesday";
        weekday[3]="Thursday";
        weekday[4]="Friday";
        weekday[5]="Saturday";
        weekday[6]="Sunday";

      for(i=0;i<weekday.length;i++){
        var Date = $.datepicker.parseDate('dd/mm/yy', dateStr);
        Date.setDate(Date.getDate('dd/mm/yy') + i);             // "i" is the array index 
        $('#Date').val(Date.toLocaleDateString());
        $('#Day').val(weekday[Date.getUTCDay()]);
      }
  });
});

<小时/> 编辑 --- 我误解了这个问题。

所以这是另一次尝试，因为我仍然不确定是否能得到它......但越来越接近了。

如果#startDate已经填充了 onload，您希望运行上面的脚本，就好像它是使用日期选择器选择的一样，对吗？

因此，假设在 PHP 方面类似这样的内容来填充 StartDate字段:
<input type="text" id="startDate" value="<?php echo $date; ?>"></input>

我会从日期选择器 init 中获取此功能能够从其他地方运行它。
我已经做了CodePen来测试一下。

// This is the function you had on select
var DayFill = function(dateStr, inst) {

  var weekday=new Array(7);
  weekday[0]="Monday";
  weekday[1]="Tuesday";
  weekday[2]="Wednesday";
  weekday[3]="Thursday";
  weekday[4]="Friday";
  weekday[5]="Saturday";
  weekday[6]="Sunday";

  for(i=0;i<weekday.length;i++){
    var Date = $.datepicker.parseDate('dd/mm/yy', dateStr);
    Date.setDate(Date.getDate('dd/mm/yy') + i);             // "i" is the array index 
    $('#Date'+i).val(Date.toLocaleDateString());

    // Fix day number to fit the array index
    var daynum = Date.getUTCDay()-1;
    if(daynum==-1){
      daynum=6;
    }

    $('#Day'+i).val(weekday[daynum]);
  }
}

// This is your datepicker init
$("#StartDate").datepicker({
  dateFormat: 'dd/mm/yy',
  onSelect: DayFill         // Call the FillDay function, now out of this init.
});

// Onload, run the DayFill function using the input value
$(document).ready(function(){
  DayFill( $("#StartDate").val() );
});