jquery datepicker插件的minDate（）和maxDate（）属性不起作用答案

【问题标题】：minDate() and maxDate() property of jquery datepicker plugin not workingjquery datepicker插件的minDate（）和maxDate（）属性不起作用
【发布时间】：2017-10-11 12:48:55
【问题描述】：

我已经尝试了很多方法，我已经看到了如何使用 jquery datepicker 插件的 minDate() 和 maxDate() 属性来限制用户选择一系列日期值，但都没有奏效。即使是在 jQuery UI 插件官方页面上运行的示例代码，我也尝试过，但没有成功。如果在它工作之前有另一个插件要链接，或者......

$(document).ready(function () {
    $("#enrolldateprim").datepicker({
        minDate: new Date(2009, 10 - 1, 25),
        maxDate: "now",
        buttonText: "Select date",
        dateFormat: 'yy-mm-dd'
    });
})

我将不胜感激。非常感谢。智慧

【问题讨论】：

整理你的代码
请提供一个小提琴或可运行的代码，以便我们解决问题.. :-)
您的代码中缺少右括号。
还添加一个链接到你正在使用的日期选择器页面，有数百个jquery datepicker plugins
jQuery DatePicker Min Max dates的可能重复

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

查看以下示例：

$(document).ready(function () {
    $("#enrolldateprim").datepicker({
        minDate: new Date(2017, 5-1 , 5), // months count starts from 0
        maxDate: "now",
        buttonText: "Select date",
        dateFormat: 'yy-mm-dd',
        showOn: "both"
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
<input id="enrolldateprim">

您可以在代码 sn-p 中找到库源。

【讨论】：

【解决方案2】：

您可以从以下位置下载依赖项：http://jqueryui.com/download/ 而 JQuery 本身来自：https://jquery.com/download/

只需转到第一个链接并向下滚动，直到看到下载按钮。选择您喜欢的主题，然后按下载。解压缩 zip 文件并查看（在我的代码中）链接 (href) 和脚本 (src) 以了解要包含哪些内容才能使其正常工作。

当然，您不需要包含样式 (CSS)，但如果您想使用它，它会附带 zip 文件。

守则：

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.css"> 
    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.structure.css">
    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.theme.css">
    <script src="jquery-3.1.1.js"></script>
    <script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
    <script>
      $( function() {
        $("#datepicker").datepicker(
            {
                minDate: new Date(2009, 10 - 1, 25),
                maxDate: "now",
                buttonText: "Select date",
                dateFormat: 'yy-mm-dd',
                showOn: "both"
            });
      } );
    </script>
</head>
<body>
    <h3>My DateTimePicker</h3>
    <p>Pick date:
        <input type="text" id="datepicker">
    </p>
</body>
</html>

PS：

$(function() {
  // Handler for .ready() called. (This is shorter)
});

与以下内容相同：

$( document ).ready(function() {   
  // Handler for .ready() called. (This is longer)
});

【讨论】：

【解决方案3】：

如果您使用的是jquery-ui datepicker widget，请查看下面的代码。

顺便说一句，buttonText 应该与设置为“button”或“both”的showOn 选项一起使用，所以我添加了@ 987654325@ 选项。

$(function(){
    $( "#datepicker" ).datepicker({
          minDate: new Date(2016, 10 - 1, 25), 
          maxDate: "now",
          buttonText: "Select date",
          dateFormat : 'yy-mm-dd',
          showOn: "both"
    });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>
 
<p>Date: <input type="text" id="datepicker"></p>

</body>

【讨论】：