11

日付を手動で入力できるようにする必要があるページにjQuerydatepickerがありますが、日付が1日以内であることを検証する必要もあります。ピッカーコントロールはmaxDateを介して制限されていますが、手動で日付を入力すると、1日以上先の日付を入力できます。どうやってそれを止めますか？これが私がこれまでに持っているものです：

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

5 に答える 5

13

コントロールの値が直接入力して変更された場合、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);
    }
});

デモはこちら

于 2012-06-27T15:20:05.263 に答える
8

上記の回答は正しいですが、フォームを検証しません。ユーザーは引き続きフォームを送信できます。

私はいくつかの調査を行いましたが、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!"
            );
        });
于 2014-02-20T04:27:29.470 に答える