jQuery UI Datepicker 没有正确选择选项

Posted 2023-05-08

【中文标题】jQuery UI Datepicker 没有正确选择选项

【英文标题】：jQuery UI Datepicker doesn't take options properly

【发布时间】：2019-08-03 08:07:41

【问题描述】：

$(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 会这样工作。

【参考方案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 列出了您可以初始化、获取和设置的所有选项。您可以在实例上应用的方法也列在那里。

【讨论】：

好吧，我不想为了维持秩序而禁用以前的日期。我只是为了方便而尝试这样做，这样我就没有单击下一步转到以前选择的日期。另外，您的回答没有解决我的问题，为什么 datepicker 没有在我的代码中采用上面给出的选项。

对不起，如果我第一次看错了你的问题...我编辑了。