Question

我想限制单个文本框的datepicker值。开始和结束日期来自其他文本框。我在网上找到了方法。但它无法限制价值。任何帮助？

$(function() {
    var pickerOpts={
            minDate:$("#from").val(),
            maxDate:$("#to").val()
    };

    $( "#plan_date" ).datepicker(pickerOpts);  
    });

Answer 1

如果您确定$("#from").val()和$("#to").val()中的值符合dateFormat（正如Frederic在评论中所说的那样），请尝试一下（为我工作了一对几个月前）

$(function() { $("#plan_date").datepicker("option", "minDate", $("#from").val()); $("#plan_date").datepicker("option", "minDate", $("#to").val()); });

Answer 2

根据jquery日期选择器minDate属性，您可以为字段设置minDate和max date

Documentation

从测试框中获取值并将其放入受尊重的操作中。但是你需要做一些背景工作来将日期设置为函数，格式如下

$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
$( ".selector" ).datepicker( "option", "maxDate", "+1m +1w" );

Answer 3

如果您在其他输入字段中使用datepicker窗口小部件，则应使用其onClose属性来管理 plan_date的minDate和maxDate datepicker。

$.datepicker({
    onClose: function(selectedDate) {
        // do something with the selectedDate
    }
});

以下是我的意思的完整示例......它并不漂亮（没有用样式表打扰），但它完成了我相信你正在尝试做的事情，以更直观的方式，然后抓取其他输入字段的值。

<DOCTYPE html>
<html>  
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script>
            $(function () {
                $("#start").datepicker({
                    onClose: function(date) {
                        $("#end").datepicker("option", "minDate", date);
                        $("#range").datepicker("option", "minDate", date);
                    }
                });
                $("#end").datepicker({
                    onClose: function(date) {
                        $("#start").datepicker("option", "maxDate", date);
                        $("#range").datepicker("option", "maxDate", date);
                    }
                });
                $("#range").datepicker();
            });
        </script>
    </head>
    <body>
            <p>Start Date: <input type="text" id="start"></p>
            <p>End Date: <input type="text" id="end"></p>
            <p>Date Range: <input type="text" id="range"></p>
    </body>
</html>

如何限制单个文本框的日期选取器

3 个答案: