jQuery UI Datepicker maxDate选项的手动日期条目验证 [英] Manual date entry validation for jQuery UI Datepicker maxDate option

问题描述

我有一个页面上需要允许手动输入日期的jQuery datepicker，但也需要验证日期不超过一天。选择器控件已经通过maxDate进行了限制，但是当一个人手动输入日期时，它们可以输入超过一天的日期。一个（我）怎么停止呢？这是我迄今为止所做的：

I have jQuery datepicker on a page that needs to allow manual entry of the date, but also needs to validate that the date is no more than one day ahead. The picker control has been limited via the maxDate, but when one manually enters the date, they can enter a date more than one day ahead. How does one (me) stop that? Here is what I have so far:

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

推荐答案

嗯，上面的答案是正确的，不验证表单，用户仍然可以提交表单，

Well, the above answer is correct, but it does not validate the form, the user still will be able to submit the form,

我已经做了一些研究，但找不到ny，最后写了这个功能，这个工作罚款并验证表单，并且在输入正确的日期之前不提交表单，希望它有帮助！

I have done some researches, but could not find ny, finally I wrote this function which works fine and validate the form, and does not let submit the form until the correct date is entered, Hope it helps!

您唯一需要做的是添加此代码，然后这将应用于所有带有'datePicker'类的字段。

The only thing you need to do is add this code, and then this will be applied to all the fields with 'datePicker' class.

 $(".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!"
            );
        });

这篇关于jQuery UI Datepicker maxDate选项的手动日期条目验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！