Question

我的datepicker有以下脚本：

<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中设置一些额外的属性？

Answer 1

似乎所有代码都运行良好。检查此代码并与您的代码进行比较，可能是您为该名称字段多次调用了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>

datepicker未根据选项集进行修改

1 个答案: