日期选择器未根据选项集修改

datepicker not modified according to options set

我的日期选择器有以下脚本:

<script>
    $(document).ready(function(){
        var date_input=$('input[name="Date"]'); //date input has the name "Date"

        date_input.datepicker({
            format: 'yyyy-mm-dd',
            todayHighlight: true,
            autoclose: true,
        });
    });
</script>

工作正常。

但是,当我尝试设置一些额外的选项时,这些更改并没有出现在日历中。

比如在autoclose: true后面加上下面一行就不会显示两个月

numberOfMonths: 2

或者添加下面两行不限制可以选择的日期:

minDate: new Date(2016, 12 - 1, 16),
maxDate: new Date(2017, 1 - 1, 7)

这意味着,以下脚本的行为与问题开头的脚本完全相同:

<script>
    $(document).ready(function(){
        var date_input=$('input[name="Date"]'); //date input has the name "Date"

        date_input.datepicker({
            format: 'yyyy-mm-dd',
            todayHighlight: true,
            autoclose: true,
            numberOfMonths: 2,
            minDate: new Date(2016, 12 - 1, 16),
            maxDate: new Date(2017, 1 - 1, 7)
        });
    });
</script>

我想也许我在其他地方复制了相同的脚本,但情况似乎并非如此,因为如果我将格式从 format: 'yyyy-mm-dd' 更改为 format: 'yyyy/mm/dd',则此更改是实际上可见。

为什么我不能在我的日期选择器中设置一些额外的属性?

似乎所有的代码都工作正常。检查此代码并与您的代码进行比较,您可能为该名称字段多次调用了 datepicker() 函数。检查您的 js 和 html 文件。如果您多次调用,它将无法正确显示结果。但是基本日期选择器适用于第一次调用,这就是其余功能不起作用的原因。

Click here to see the pen from codepen

$( function() {
    var date_input=$('input[name="Date"]'); //date input has the name "Date"

        date_input.datepicker({
            dateFormat: "yy-mm-dd",
            todayHighlight: true,
            autoclose: true,
            numberOfMonths: 2,
            minDate: new Date(2016, 12 - 1, 16),
            maxDate: new Date(2017, 1 - 1, 7)
        });
  } );
<html lang="en">
<head>
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker" name="Date"></p>
 
 
</body>
</html>