1. ホーム
  2. jquery

[解決済み] jQuery Date Picker - 過去の日付を無効にする

2023-02-17 01:45:49

質問

UIの日付ピッカーを使って、日付範囲を選択させようとしています。

From/toフィールドで、現在より前の日付を表示したり選択したりできないようにする必要があります。

これは私のコードです。

$(function() {
    var dates = $( "#from, #to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            var option = this.id == "from" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        }
    });
});

現在の日付より前の日付を無効にする方法を教えてください。

どのように解決するのですか?

新しい日付オブジェクトを作成し、そのオブジェクトを minDate を初期化する必要があります。

<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    minDate: dateToday,
    onSelect: function(selectedDate) {
        var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
});

編集 - あなたのコメントから、期待通りに動作するようになりました。 http://jsfiddle.net/nicolapeluchetti/dAyzq/1/