如何验证 jquery datePicker 日期？答案

【问题标题】：How to validate jquery datePicker dates?如何验证 jquery datePicker 日期？
【发布时间】：2025-12-19 22:40:06
【问题描述】：

我有两个输入框，startDate 和 tilldate。我正在使用 jQuery 日期选择器。问题是当用户选择startDate 时，在tillDate 中只应启用两天进行选择。例如01/04/2015 然后tilldate 可以是同一日期或下一个日期，02/04/2015。

<td><input type="text" id="startDate" name="startDate"  ></td>
<td><input type="text" id="tillDate" name="tillDate"></td>

$(function () {
    var setDate;
    $("#startDate")
    .datepicker({
        showOn: "button",
        buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
        buttonImageOnly: true,
        buttonText: "Select Date",
        changeMonth: true,
        changeYear: true,
        maxDate: '0',
        onSelect: function (selected) {
            $("#tillDate").datepicker("option", "minDate", selected)
            setDate = $("#startDate").val();
            alert(setDate);
        }
    });    

    $("#tillDate").datepicker({
        showOn: "button",
        buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
        buttonImageOnly: true,
        buttonText: "Select Date",
        changeMonth: true,
        changeYear: true,
        maxDate: setDate + "2D",
        onSelect: function (selected) {
            $("#startDate").datepicker("option", "maxDate", selected)
        }
    });

    $(".ui-datepicker-trigger").mouseover(function () {
        $(this).css('cursor', 'pointer');
    });
});

【问题讨论】：

您的代码有什么问题？
在startDate 选择器的onSelect 函数中，您没有为tillDate 选择器指定maxDate 属性。您只指定了最小值。

标签： jquery html jquery-ui jquery-ui-datepicker

【解决方案1】：

据我了解，到目前为止，您只需要两天时间。请检查下面的代码

 <script type="text/javascript">
       $(function () {
     var setDate;

    $("#startDate")
    .datepicker(
         {
        showOn: "button",
        buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
        buttonImageOnly: true,
        buttonText: "Select Date",
        changeMonth: true,
        changeYear: true,
        maxDate:'0' ,
       onSelect: function (selected) {
             setDate = $("#startDate").val();
             var maxDatevale=new Date(setDate);
             maxDatevale.setDate(maxDatevale.getDate()+1);
             alert(maxDatevale);
            $("#tillDate").datepicker("option", "minDate", setDate)
             $("#tillDate").datepicker("option", "maxDate", maxDatevale)


        }
    });    

    $("#tillDate").datepicker({
        showOn: "button",
        buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
        buttonImageOnly: true,
        buttonText: "Select Date",
        changeMonth: true,
        changeYear: true,
        maxDate: setDate + "2D",
        onSelect: function (selected) {
            $("#startDate").datepicker("option", "maxDate", selected)
        }
    });

    $(".ui-datepicker-trigger").mouseover(function () {
        $(this).css('cursor', 'pointer');
    });
});
    </script>

【讨论】：

请接受这个答案，以便将来它可以帮助其他人@RajuYadav

【解决方案2】：

好吧，如果我没记错的话，您只是不想让用户选择在开始日期值之前的日期吗？

如果是这样，您为什么不将开始日期值放在一个全局变量中，然后在您的tilldate 函数中检索它。获得值后，您可以检查直到日期值是否不是开始日期之前的日期，如果是，则清除输入。

但您可能还必须验证开始日期。

【讨论】：