对于jQuery UI的日期选择器的maxDate选项手册日期输入验证(Manual date en

2019-06-25 20:03发布

我有一个需要允许的日期手工录入页面上的jQuery日期选择器,还需要验证该日期不超过提前一天。 拾取器控制已经通过的maxDate被限制,但是当一个手动输入的日期,他们可以提前一天多输入日期。 一个人如何(我)停止? 这是我到目前为止有:

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

Answer 1:

好了,上面的答案是正确的,但它不验证表单,用户仍然可以提交表单,

我做了一些研究,但找不到NY,最后我写了这个功能的正常工作和验证表单,并且不允许提交表单中输入正确的日期,直到,希望它可以帮助!

你需要做的唯一的事情是添加此代码,然后这将适用于所有以“日期选择器”类中的字段。

 $(".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 2:

我不知道如果控制的价值是通过直接键入改变日期选择器触发一个事件。 您可以将功能绑定到.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 3:

我有完全一样的要求,这里是为我工作就像一个魅力的解决方案:

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

修改小提琴这里从萨尔曼A的参考答案



Answer 4:

一种选择是,除去通过使输入字段手动输入的日期的能力readonly 。 这将从手动输入任何疯狂限制用户,并强制使用日期选择器的。



文章来源: Manual date entry validation for jQuery UI Datepicker maxDate option