28

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

fromとtoの2つの入力フィールドを持つフォームがあり、minDateを「from」フィールドの値と等しい「to」フィールドに動的に設定できるようにしたいと考えています。

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 ); 
} }
4

9 に答える 9

34

setterとgetterを使用してminDateを動的に設定および取得できます。

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

ここで説明

于 2011-03-21T08:45:46.547 に答える
19

対応するIDを持つ2つのテキストボックスがfromあり、のを選択した日付にしtoたい場合は、次の手順を実行します。minDatetofrom

$("#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();
于 2013-11-15T20:53:25.377 に答える
3

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

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

于 2011-03-21T09:05:53.733 に答える
2

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

提案した関数を使用して、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);
}
于 2012-02-17T05:14:22.840 に答える
2

最新バージョンのbootstrap.min.jsを使用してください

$("#from").datepicker( {
        format: "dd-mm-yyyy",
        endDate: '+0d',
        autoclose: true,
    }).on('changeDate', function(e) {
    
        var oldDate = $('.datepicker-current').val();
    
        $('#to').data('datepicker').setEndDate(oldDate);
    
    });
于 2020-09-02T11:07:09.903 に答える
1

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

それで、私はそれらをすべて一緒にマージして、私自身のものを作りました。上記のように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'
});

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

于 2015-09-30T12:40:25.333 に答える
1

jQuery UIには、、のように設定または動的にdatepicker役立つ多くの関数があります。minDatemaxDateonSelectonClose

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

だから私はあなたに例をあげましょうonSelect。

onSelectその前に、との違いを説明しますonclose。NameonSelectは、ユーザーが日付を選択した直後に起動し、onClose日付の選択後にdatepickerが閉じたときに起動することを示しています。これですべてです。

ここでは、2つのdatepickerpickupdate1とがあり、選択した日付をminDate ofにpickupdate2設定し、動的にする必要があるため、コードは次のとおりです。pickupdate1pickupdate2

$("#pickupdate1").datepicker({
    dateFormat: "dd-mm-yy",
    onSelect: function (selectedDate) {                                           
         $('#pickupdate2').datepicker('option', 'minDate', selectedDate);
    }
});
$("#pickupdate2").datepicker({
   dateFormat: "dd-mm-yy",
});
于 2019-03-18T12:28:06.290 に答える
0

trentrichardson.comに例があります。彼らは「onSelect」を使用しています。私にとって、それは機能していません。minDateまたはMaxDateを設定すると、時間コンポーネントが0に設定され、日付のみが残ります。そして、私はいくつかのローカリゼーションの問題を解決しなければなりませんでした。

于 2012-01-23T10:10:35.483 に答える
0

これは私のために働いた

<input type="date" name="cname" value=""  min="<?php echo date("Y-m-d") ?>"/>
于 2018-06-28T05:05:45.233 に答える