jQuery UI Datepicker maxDate选项的手动日期条目验证

Question

我在页面上有jQuery datepicker,需要允许手动输入日期,但还需要验证日期不超过一天.选择器控件已通过maxDate限制,但当手动输入日期时,他们可以提前一天输入日期.一个人(我)如何阻止它？这是我到目前为止:

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

Answer 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);
    }
});

在这里演示

Answer 2

我有完全相同的要求,这里的解决方案对我有用,就像一个魅力:

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

这里修改过的小提琴是从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!"
            );
        });

Answer 4

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