jQuery UI 日期选择器没有正确选择

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>

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

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

一切正常。

请有人告诉我为什么日期选择器会这样工作。

Answer 1

... let me know why datepicker works this way.

所以你的问题是为什么传递一个包含我们想要设置的所有选项的对象时它的工作方式不同（代码块#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.

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

jQuery UI 日期选择器没有正确选择

jQuery UI Datepicker doesn't take options properly

jquery

jquery-ui

jquery-ui-datepicker