Question

目前，我可以选择一个日期，并在输入字段的另一个系列中填充我的输入字段，其中包含7天的日期和相应的星期几（在下面的示例中仅为3天）。这很好用，虽然我确信有一种更有效的方法来编写与数组相同的东西，我只是不知道。

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

我在想一个在datepicker输入有一个有效值或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，您希望运行上面的脚本，就像使用datepicker选择它一样，对吗？

所以假设这样的事情，在PHP方面，填写StartDate字段：
<input type="text" id="startDate" value="<?php echo $date; ?>"></input>

我会从datepicker 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() );
});

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

1 个答案: