web-dev-qa-db-ja.com

jquery datetime picker set minDate dynamic

私はtrentrichardson.comのdatetimepickerを使用しています。

fromとtoの2つの入力フィールドがあるフォームがあり、「to」フィールドにminDateを動的に設定して、「 from」フィールド。

私はbeforShowオプションを使用する必要があることを知っていますが、関数を実装する方法がわかりません。

$('.from,.to').datetimepicker({

    beforeShow: customRange

});

編集済み/解決策

function customRange(input) {   
if (input.id == 'to') {     
var x=$('#from').datepicker("getDate");
$( ".to" ).datepicker( "option", "minDate",x ); 
} 
else if (input.id == 'from') {     
var x=$('#to').datepicker("getDate");
$( ".from" ).datepicker( "option", "maxDate",x ); 
} }
jquerydatetimepickermindate
24
luca

setDateとgetterでminDateを動的に設定および取得できます。

//getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
//setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );

ここで説明

27
felixsigl

対応するID fromおよびtoを持つ2つのテキストボックスがあり、minDateのtoをfromの選択された日付にしたい場合その後、次を実行します。

$("#from").datepicker({
    minDate: 0, // to disable past dates (skip if not needed)
    onClose: function(selectedDate) {
        // Set the minDate of 'to' as the selectedDate of 'from'
        $("#to").datepicker("option", "minDate", selectedDate);
    }
});

$("#to").datepicker();
16
Tanvir

日付ピッカーの範囲を制限する を使用できます。

ただし、「from」の日付ピッカーの作成時にこの範囲を設定する必要があります。 Iデモを作成しましたこれは質問を理解する限り問題なく動作するようです。

3
andyb

luca：あなたの答えへの小さな追加...

Datetimepickerが最初に表示されるときに、時間コンポーネントが無視されることを示唆した関数を使用します。 datetimepickerを閉じて再度開くと、時刻コンポーネントが不思議なことに再表示されます。何がこれを引き起こしているのかはよくわかりませんが、ちょっとしたハックで修正できます。

function setMinMaxDate ( element )
{
    // Store current date - setting max/min date seems to destroy time component
    var val = $(element).val();

    if (element.id == 'endDate') 
    {     
        var x=$('#startDate').datetimepicker("getDate");
        $( element ).datetimepicker( "option", "minDate",x ); 
    } 
    else if (element.id == 'startDate') 
    {     
        var x=$('#endDate').datetimepicker("getDate");
        $( element ).datetimepicker( "option", "maxDate",x ); 
    }

    // Restore date
    $(element).val(val);
}
2
Matt McDonald

Trentrichardson.comには 例 があります。彼らは「onSelect」を使用しています。私にとってはうまく機能していません。 minDateまたはMaxDateを設定すると、時刻コンポーネントは0に設定され、日付のみが残ります。そして、いくつかのローカライズの問題を解決する必要がありました。

0
uli78

上記の答えはどれも私をまったく助けませんでした。動作しなかったか、何らかのエラーが発生しました。

だから私はそれらをすべてマージして、自分のものを作りました。前述のように、moment.jsを使用しました。ダウンロードしてページに含めるだけです。

$("#start_date").datetimepicker({
    format: 'Y-m-d H:00:00',
    onChangeDateTime: function(dp, $input){
        var dt2 = $('#end_date');
        var minDate = $('#start_date').val();
        var currentDate = new Date();
        var targetDate = moment(minDate).toDate();
        var dateDifference = currentDate - targetDate;
        var minLimitDate = moment(dateDifference).format('YYYY/MM/DD');
        var endDate = moment(dt2.val()).toDate();
        if((currentDate - endDate) >= (currentDate - targetDate))
            dt2.datetimepicker({
                'value': minDate
            });
        dt2.datetimepicker({
            'minDate': '-'+minLimitDate
        });
    }
});
$("#end_date").datetimepicker({
    format: 'Y-m-d H:00:00'
});

これを行うためのより良い方法があると確信していますが、見つけることができませんでした。ですから、これが将来誰かに役立つことを願っています。

0
Chris

JQuery UI datepickerには、minDateまたはmaxDateのようにonSelectまたはonCloseを動的に設定するのに役立つ多くの関数があります。

onCloseのデモは、@ Tanvirの回答ですでに提供されています。ここを参照してください。 datepicker onCloseの例

したがって、onSelectの例を示します。

その前に、onSelectとoncloseの違いを説明します。Nameが示唆するように、ユーザーが日付を選択した直後にonSelectが起動し、datepickerが閉じた後にonCloseが起動します日付の選択、それだけです。

ここでは、2つのdatepicker pickupdate1とpickupdate2があり、選択されたpickupdate1の日付をpickupdate2のminDateに設定します- 動的でなければなりませんので、コードは次のとおりです。

$("#pickupdate1").datepicker({
    dateFormat: "dd-mm-yy",
    onSelect: function (selectedDate) {                                           
         $('#pickupdate2').datepicker('option', 'minDate', selectedDate);
    }
});
$("#pickupdate2").datepicker({
   dateFormat: "dd-mm-yy",
});
0
Haritsinh Gohil

これは私のために働いた

<input type="date" name="cname" value=""  min="<?php echo date("Y-m-d") ?>"/>
0
Raghuram db