jQuery UI Datepicker maxDate 选项的手动日期输入验证答案

【问题标题】：Manual date entry validation for jQuery UI Datepicker maxDate optionjQuery UI Datepicker maxDate 选项的手动日期输入验证
【发布时间】：2012-06-27 14:37:18
【问题描述】：

我在需要允许手动输入日期的页面上有 jQuery datepicker，但还需要验证日期不超过一天。选择器控件已通过 maxDate 进行限制，但是当手动输入日期时，他们可以输入超过一天的日期。一个（我）如何阻止它？这是我目前所拥有的：

$(".datepicker").attr("placeholder", "mm-dd-yyyy").datepicker({
    showOn: "button",
    maxDate: "+1",
    showOtherMonths: true
});

【问题讨论】：

标签： jquery jquery-ui date jquery-validate jquery-ui-datepicker

【解决方案1】：

如果通过直接输入更改控件的值，我不确定 datepicker 是否会触发事件。您可以将函数绑定到.change() 事件：

$(".datepicker").attr("placeholder", "mm-dd-yyyy").datepicker({
    dateFormat: "mm-dd-yy",                 // since you have defined a mask
    maxDate: "+1",
    showOn: "button",
    showOtherMonths: true

}).on("change", function(e) {
    var curDate = $(this).datepicker("getDate");
    var maxDate = new Date();
    maxDate.setDate(maxDate.getDate() + 1); // add one day
    maxDate.setHours(0, 0, 0, 0);           // clear time portion for correct results
    if (curDate > maxDate) {
        alert("Invalid date");
        $(this).datepicker("setDate", maxDate);
    }
});

Demo here

【讨论】：

【解决方案2】：

我有完全相同的要求，这里是对我有用的解决方案：

  $(".datepicker").attr("placeholder", "mm-dd-yyyy").change(function(){
    $(this).datepicker('setDate', $(this).datepicker('getDate'));
  }).datepicker({
      showOn: "button",
      maxDate: "+1",
      showOtherMonths: true
  });

修改后的小提琴 here 引用自 Salman A 的 answer

【讨论】：

工作得很好，但如果已经提供了输入（超出范围），则根本不会失效。在初始化时触发更改将修复日期，但我宁愿采用另一种方法：强制用户修复此问题（因此使用一些错误视觉等）

【解决方案3】：

嗯，上面的答案是正确的，但它并没有验证表单，用户仍然可以提交表单，

我做了一些研究，但找不到ny，最后我写了这个工作正常并验证表单的函数，并且在输入正确的日期之前不允许提交表单，希望对你有帮助！

您唯一需要做的就是添加此代码，然后它将应用于所有具有“datePicker”类的字段。

 $(".datePicker").datepicker({
            dateFormat: 'd/mm/yy',
            changeMonth: true,
            changeYear: true,
            firstDay: 1,
            minDate: Date.parse("1900-01-01"),
            maxDate: Date.parse("2100-01-01"),
            yearRange: "c-90:c+150"
        });

        // validation in case user types the date out of valid range from keyboard : To fix the bug with out of range date time while saving in sql 
        $(function () {
            $.validator.addMethod(
                "date",
                function (value, element) {

                    var minDate = Date.parse("1900-01-01");
                    var maxDate = Date.parse("2100-01-01");
                    var valueEntered = Date.parse(value);

                    if (valueEntered < minDate || valueEntered > maxDate) {
                        return false;
                    }
                    return !/Invalid|NaN/.test(new Date(minDate));
                },
                "Please enter a valid date!"
            );
        });

【讨论】：

【解决方案4】：

一种选择是通过将输入字段设置为readonly 来删除手动输入日期的功能。这将限制用户手动输入任何疯狂的内容，并强制使用日期选择器。

【讨论】：

【解决方案5】：

我的解决方案是使用输入的日期重新设置日期以触发 datepicker 的内部检查。通过比较旧值和新值，您可以检查日期是否更改：

$(".datepicker").datepicker({
  showOn: "button",
  maxDate: "+1",
  showOtherMonths: true}).on('change', function(e) {
        var oldDate = $(this).datepicker('getDate');
        $(this).datepicker('setDate', $(this).datepicker('getDate'));
        var newDate = $(this).datepicker('getDate');
        if (oldDate.getTime() !== newDate.getTime()){
            $(this).val('');
        }
    });

【讨论】：