web-dev-qa-db-ja.com

過去の日付を防ぐjQuery datepicker

JQuery Datepickerで過去の日付を無効にするにはどうすればよいですか？オプションを探しましたが、過去の日付を無効にする機能を示すものを見つけられないようです。

更新：迅速な対応に感謝します。私は運なしでそれを試しました。期待したとおりに日がグレー表示されず、選択した過去の日付を受け入れます。

私はこれを試しました：

$('#datepicker').datepicker({ minDate: '0' });

動作しません。

私はこれを試しました：

$('#datepicker').datepicker({ minDate: new Date() });

それでも動作しません。

カレンダーウィジェットが正常に表示されます。過去の日付の入力を妨げたり、グレーアウトしたりしません。過去にminDateとmaxDateを試してみましたが、運が悪かったので、そうではないと考えました。

javascriptjqueryjquery-uidatedatepicker
75
netrox

これを試して：

$("#datepicker").datepicker({ minDate: 0 });

0から引用符を削除します。

137
Khawar

最小日付を指定する必要があります-0に設定すると、最小日付は今日から今日まで0日になることを意味します。代わりに文字列'0d'を渡すことができます（デフォルトの単位は日です）。

$(function () {
    $('#date').datepicker({ minDate: 0 });
});
34
Russ Cam

以前にバインドされた日付ピッカーを扱っている場合は、設定

$("#datepicker").datepicker({ minDate: 0 });

動作しないでしょう。この構文は、ウィジェットを作成するときにのみ適用できます。

バインドされた日付ピッカーの最小日付を設定するには、次を使用します。

$("#datePicker").datepicker("option", "minDate", 0);
24
Noel Abrahams

0を囲む引用符を削除すると、機能します。

作業コードスニペット：

// set minDate to 0 for today's date
$('#datepicker').datepicker({ minDate: 0 });
body {
    font-size: 12px; /* just so that it doesn't default to 16px (which is kinda huge) */
}
<!-- load jQuery and jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!-- load jQuery UI CSS theme -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- the datepicker input -->
<input type='text' id='datepicker' placeholder='Select date' />
23
Rahul Desai

MinDateオプションを使用して、可能な最小日付を設定します。 http://jqueryui.com/demos/datepicker/#option-minDate

14
Bill

気にする必要はありません。過去の日付は無効になります。

$( "#datepicker" ).datepicker({ minDate: 0});

実例

詳細はこちら

10
Sonu Sindhu

これは動作します：

$("#datepicker").datepicker({ minDate: +0 });
9
Anwasha Dhar

//将来の日付を無効にします

$('#datetimepicker1').datetimepicker({
            format: 'DD-MM-YYYY',
            maxDate: new Date
        });

//過去の日付を無効にします

 $('#datetimepicker2').datetimepicker({
        format: 'DD-MM-YYYY',
        minDate: new Date
    });
7
Anto

$("#datePicker").datePicker({startDate: new Date() });。これは私のために働く

5
Akhil Yadav

私は次のコードを使用して日付をフォーマットし、カレンダーに2ヶ月を表示しています...

<script>
$(function() {

    var dates = $( "#from, #to" ).datepicker({

        showOn: "button",
        buttonImage: "imgs/calendar-month.png",
        buttonImageOnly: true,                           
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,

        onSelect: function( selectedDate ) {




            $( ".selector" ).datepicker({ defaultDate: +7 });
            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", "dateFormat", 'yy-mm-dd' );


        }
    });
});

</script>

問題は、以前の日付選択を制限する方法がわからないことです。

2
HeySingapore

同じ行に複数のプロパティを配置してください（コードを1行だけ表示したため、同じ問題が発生した可能性があります）。

私はデフォルトの日付を設定しますが、古い日付をグレーアウトしませんでした。これは機能しません：

$('#date_end').datepicker({ defaultDate: +31 })
$('#date_end').datepicker({ minDate: 1 })

これは両方を行います：

$('#date_end').datepicker({ defaultDate: +31, minDate: 1 })

1と+1は同じように機能します（または、0と+0の場合）。

私：Windows 7 x64、Rails 3.2.3、Ruby 1.9.3

1
Ed Birm
var givenStartDate = $('#startDate').val();
        alert('START DATE'+givenStartDate);
        var givenEndDate = $('#endDate').val();
        alert('END DATE'+givenEndDate);
        var date = new Date();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var currentDate = date.getFullYear() + '-' +
            (month<10 ? '0' : '') + month + '-' +
            (day<10 ? '0' : '') + day;
        if(givenStartDate < currentDate || givenEndDate < currentDate)
         { 
        $("#updateButton").attr("disabled","disabled"); 
         }
         if(givenStartDate < currentDate && givenEndDate > currentDate)
            {
            $("#updateButton").attr("enabled","enabled");
            }
         if(givenStartDate > currentDate || givenEndDate > currentDate) { 
        $("#updateButton").attr("enabled","enabled"); 
         }

これを試して。誤りがある場合は、私を修正してください:)ありがとうございます。

1
MeowRude

startDateを現在の日付に設定してみてください。例えば：

$('.date-pick').datePicker({startDate:'01/01/1996'});
0
user217467

Min属性を使用しました：min="' + (new Date()).toISOString().substring(0,10) + '"

これが私のコードであり、動作しました。

<input type="date" min="' + (new Date()).toISOString().substring(0,10) + '" id="' + invdateId + '" value="' + d.Invoice.Invoice_Date__c + '"/>

enter image description here

0
Louis HM