web-dev-qa-db-ja.com

jQuery UI DatepickermaxDateオプションの手動日付入力検証

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

$(".datepicker").attr("placeholder", "mm-dd-yyyy").datepicker({
    showOn: "button",
    maxDate: "+1",
    showOtherMonths: true
});
jqueryjquery-uidatejquery-validatejquery-ui-datepicker
9
Sam Carleton

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

いくつかの調査を行いましたが、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!"
            );
        });
7
InkHeart

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

デモはこちら

12
Salman A

私にはまったく同じ要件があり、これが魅力のように私のために働いた解決策です：

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

修正されたフィドル ここ サルマンAから参照 回答

9
Main Pal

1つのオプションは、入力フィールドをreadonlyにして、手動で日付を入力する機能を削除することです。これにより、ユーザーが手動でクレイジーなものを入力することが制限され、日付ピッカーの使用が強制されます。

4
Esten