jQuery UI Datepicker 没有正确选择选项

Question

$(document).ready(function() {
 $("form").submit(function(e) {
 e.preventDefault();
  for (var i=1;i<=($("input[name=number]").val());i++) {
  
    $("<label/>").attr({ class: 'label',id: 'lb'+i}).text(' Payment Date').appendTo("#pays");
                $("<input/>").attr({ type: 'text', id: 'paymentNo-'+(i), class: 'date input', name: 'payD[]', required: 'true' }).appendTo("#pays");
                
  }
  $(".date").each(function() {
    $(this).datepicker({
      onSelect: function(date) {
        $(this).parent().find(".date").datepicker({
          defaultDate: date,
          changeMonth: true,
          changeYear: true
        });
      }
    });
  });
 
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>

<form>
  <div id="pays">
    <label> How many? </label>
    <input type="text" name="number" id="pnumber">
    <button type="submit">Submit</button>
  </div>
</form>

我正在根据用户输入动态生成输入字段并在它们上初始化日期选择器。此外，我试图在动态生成的字段中将默认日期设置为先前选择的日期。问题是，如果我使用代码中指定的选项初始化 datepicker，默认日期不会转到先前选择的日期，但当前日期也更改月份和年份不起作用。但是如果我在初始化后给出选项，比如

$(this).parent().find(".date").datepicker('option', 'defaultDate', date);

一切都按预期进行。

请有人告诉我为什么 datepicker 会这样工作。

Answer 1

...让我知道为什么 datepicker 会这样工作。

所以你的问题是为什么在传递一个包含我们想要设置的所有选项的对象时，它的工作方式会有所不同（代码块＃1） 或 传递 3 个参数，逗号分隔 （代码块 #2）。

代码块 #1：

$(element).datepicker({
  onSelect: function(date) { // some function here },
  defaultDate: date,
  changeMonth: true,
  changeYear: true
});

代码块 #2：

$(element).datepicker('option', 'defaultDate', date);

区别：#1是实例的初始化，#2是对现有实例的特定属性的修改。

现在，我认为 «什么是实例» 是一个完全超出 SO 范围的问题...但我发现了一个有趣的 YouTube 视频，您可以观看 here。 p>

API documentation for DatePicker 列出了您可以初始化、获取和设置的所有选项。您可以在实例上应用的方法也列在那里。