web-dev-qa-db-ja.com

別の日付ピッカーまたはテキストボックスに基づいてjquery datepickerの日付を制限する

日付ピッカーが接続された2つのテキストボックスがあります。テキストボックスは、開始日と終了日用です。最初の日付ピッカーは、ユーザーが今日より前の日付を選択できないようにセットアップされますが、将来の日付は選択できます。

最初の日付ピッカーで選択した日付より前の日付を選択できないように、2番目の日付ピッカーを設定するにはどうすればよいですか？たとえば、今日が12/11/10で、最初の日付ピッカーで12/15/10を選択した場合、2番目の日付ピッカーは12/15/10以前は何も選択できません。

ここに私が持っているものがあります：

$("#txtStartDate").datepicker({ minDate: 0 });
$("#txtEndDate").datepicker({});
jquery-uijquery-ui-datepicker
31
The Muffin Man

たとえば、このサンプルコードでは、startDatePickerが2010-12-12として選択されており、startDatePickerの変更イベントは、endDatePicker 2010-12-13のminDateを設定します。この日付の前にセルをロックします。これは、@ Victorが言及したもののサンプルです。

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    minDate: new Date(),
    maxDate: '+2y',
    onSelect: function(date){

        var selectedDate = new Date(date);
        var msecsInADay = 86400000;
        var endDate = new Date(selectedDate.getTime() + msecsInADay);

       //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
        $("#endDatePicker").datepicker( "option", "minDate", endDate );
        $("#endDatePicker").datepicker( "option", "maxDate", '+2y' );

    }
});

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true
});
35
user403295

更新：

上記のアプローチは、作成時にのみminDateを設定します。 onSelectイベントを使用して、2番目の日付ピッカーのminDateオプションを次のように変更しました。

$("#txtStartDate").datepicker({
  showOn: "both",       
  onSelect: function(dateText, inst){
     $("#txtEndDate").datepicker("option","minDate",
     $("#txtStartDate").datepicker("getDate"));
  }
});
34
Nguyen Van Long

tin Manのソリューションは、下部に$（ "＃txtEndDate"）。datepicker（）を追加した後に機能しました

$("#txtStartDate").datepicker({
  showOn: "both",       
  onSelect: function(dateText, inst){
     $("#txtEndDate").datepicker("option","minDate",
     $("#txtStartDate").datepicker("getDate"));
  }
});

$("#txtEndDate").datepicker(); //it is not working with out this line
7
aby

この男を試してください：

$("#dateTo").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    minDate:  new Date()
    }).datepicker("setDate", new Date());
$("#dateFrom").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    onSelect: function(){
        $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
    }
    }).datepicker("setDate", new Date());
4
Orlando Alfonso

純粋なUIの観点からは、そうすべきではありません。ユーザーが両方の日付ピッカーで間違った月を選択し、正しい月を選択しようとすると、UIによって50％の変更が妨げられます。理想的には、誤った選択を許可し、終了日を終了日より後にする必要があるという有用なエラーメッセージを表示します。

アイデアを実装する場合は、各日付ピッカーに"change"他の日付ピッカーのオプションを適切に変更するイベント。

4
Victor Nicollet

最初の日付ピッカーUIの「getDate」メソッドを使用して、2番目の日付ピッカーのminDateオプションに渡します。

$("#txtEndDate").datepicker({
    showOn: "both",
    minDate: $("#txtStartDate").datepicker("getDate")
});
3
Nguyen Van Long

このコードを使用：

<script type="text/javascript">
    $(function () {
        $("#txtStartDate").datepicker({
            dateFormat: 'dd/mm/yy',
            inline: true,
            minDate: 'dateToday'
        });
        $("#txtEndDate").datepicker({
            dateFormat: 'dd/mm/yy',
            inline: true,
             minDate: $("#txtStartDate").datepicker("getDate") });
        });
</script>
1
Anjyr
  $('#start_date').datepicker({
       endDate: new Date(),
       autoclose: true,
  }).on("changeDate", function (e) {
       $('#end_date').datepicker('setStartDate', e.date);
  });

  $('#end_date').datepicker({
      autoclose: true,
  });
1
beatusfk
 $startDateCtrl.change(function () {
            setMinEndDateValue($startDateCtrl, $endDateCtrl);
        });

 $endDateCtrl.datepicker();

2つの日付ピッカーの開始と終了があります。開始日からの選択に基づいて設定する終了日の最小日と最大日。終了日ピッカーの最小開始日は、開始ピッカー選択からの開始日です。終了日ピッカーの最大終了日は、開始日ピッカーから選択された開始日+ 7日です。

function setMinEndDateValue($startDateCtrl, $endDateCtrl) {
            var $maxSchedulingDate = new Date(@MaxDate.Year, @MaxDate.Month -1, @MaxDate.Day );
            var $startDate = $startDateCtrl.val();
            var $selectedStartDate = new Date($startDate);
            $selectedStartDate.setDate($selectedStartDate.getDate() + 7); // increasing the start date by 7 days (End Date max)
            var $maxEndDate = new Date();
            if ($selectedStartDate > $maxSchedulingDate) {
                $maxEndDate = $maxSchedulingDate;
            }
            else {
                $maxEndDate = $selectedStartDate;
            }
            $endDateCtrl.datepicker("option", "minDate", $startDate);
            $endDateCtrl.datepicker("option", "maxDate", $maxEndDate);
        }
0
Jaydeep Shil

このスレッドの以前の回答に基づいて、デフォルトで機能し、最小日付と最大日付の両方を再適用するソリューションが役立つと感じました：

// Defaults
var defaultFromDate = new Date();
var defaultToDate = new Date();
defaultToDate.setMonth(defaultToDate.getMonth() + 1);

// To
$("#datepickerTo").datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true,
});
$("#datepickerTo").datepicker("setDate", defaultToDate);

function limitToDateSpan(currentFromDate) {
  $("#datepickerTo").datepicker("option", "minDate", currentFromDate);

  var maxDate = new Date(currentFromDate.getTime());
  maxDate.setFullYear(maxDate.getFullYear() + 1);

  $("#datepickerTo").datepicker("option", "maxDate", maxDate);
}

limitToDateSpan(defaultFromDate);

// From
$("#datepickerFrom").datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true,
  minDate: "2013-01-01",
  maxDate: "+1Y",
  onSelect: function (dateText) {
    limitToDateSpan(new Date(dateText));
  }
});
$("#datepickerFrom").datepicker("setDate", defaultFromDate);
0
Rasmus Björling