0

私は卒業生のラベルが付いた日付ピッカーを持っています。現在の日付を超えて日付ピッカーを制限するにはどうすればよいですか。または。ユーザーが将来の日付を選択しないように制限するにはどうすればよいですか。選択された日付「dateTo」が「dateFrom」よりも大きいという検証もありますか

ここに私のHTMLコードがあります

<label>Year Graduated from</label>
   <input id="dateFrom" type="date">
<label>Year Graduated to</label>
       <input id="dateTo" type="date">

これが私のjqueryコードです

$( "#date_assigned" ).datepicker({
     showOtherMonths: true,
     selectOtherMonths: true,
     dateFormat: "mm/dd/yy"
     });
     });

 $(function() {
      $( "#date_returned" ).datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        dateFormat: "mm/dd/yy"
         });
 });
4

2 に答える 2

2

日付範囲の選択については、jquery ui ページの優れた例を参照してください。

http://jqueryui.com/datepicker/#date-range

minDateおよびmaxDateオプションを使用してonClose、各日付ピッカーの使用可能な日付とイベントを制限し、他の日付ピッカーの最小/最大日付を更新して、有効な範囲選択を実現できます。

さまざまな値の範囲を受け入れることにminDate注意してください。maxDate値が数値の場合、今日からのオフセットとして理解されます。つまり、ゼロは今日、-1 は昨日などになります。

于 2013-09-26T01:51:08.653 に答える
1

デモ

$(function () {
    var dateFormat = 'dd.mm.yy';

    $("#from").datepicker({
        maxDate: '0',
        dateFormat: dateFormat,
        onSelect: function (selectedDate) {
            var date = $.datepicker.parseDate(dateFormat, selectedDate)
            var tod = date.setDate(date.getDate());
            $to.prop('disabled', false).datepicker( "option", "minDate", new Date(tod ));
        }
    });
    var $to = $("#to").datepicker({
        dateFormat: dateFormat
    }).prop('disabled', true);
});

説明

id date-pickermaxDate:'0'で将来の日付が選択されないように設定するfrom

メソッドをto使用して選択した日付を日付ピッカーに渡し、それを日付ピッカーのオプションとして設定して、 日付が常に日付より大きくなるようにします。onSelectminDatetotofrom

参考文献

http://api.jqueryui.com/datepicker/#option-maxDate

http://api.jqueryui.com/datepicker/#option-minDate

http://api.jqueryui.com/datepicker/#option-onSelect

于 2013-09-26T01:55:03.333 に答える