Jquery的日期選擇器限制基於在第一日期字段選定的日期在第二日期字段日期

我使用Jquery的日期選擇器和我有以下代碼，其中當用戶選擇了日期，下面的字段被填入日期+1Jquery的日期選擇器限制基於在第一日期字段選定的日期在第二日期字段日期

$('#dt2').datepicker({ 
     dateFormat: "dd-M-yy" 
    }); 

$("#dt1").datepicker(
    {dateFormat: "dd-M-yy", 
    minDate: 0, 
onSelect: function(date){ 
var date2 = $('#dt1').datepicker('getDate'); 
      date2.setDate(date2.getDate()+1); 
      $('#dt2').datepicker('setDate', date2);

我想限制dt2字段中的日期，該字段不應低於dt1字段中的日期。例如。如果dt1選定的日期是01-May-2013，則允許用戶選擇日期01-May-2013後，不超過02-May-2013

我怎樣才能限制日期日期字段2採摘少？

來源

2013-05-04 user75ponic

我創建了一個的jsfiddle你。我不是100％確定它是否「萬無一失」，但爲了防止用戶手動輸入日期，您可以將輸入設置爲readonly

<input type="text" id="dt1" readonly="readonly">

此刻我檢查dt2 onClose，如果它的日期低於dt1s日期我糾正它。另外，如果在dt1中選擇了日期，dt2的minDate將設置爲dt1日期+1。

$(document).ready(function() { 

    $("#dt1").datepicker({ 
     dateFormat: "dd-M-yy", 
     minDate: 0, 
     onSelect: function (date) { 
      var date2 = $('#dt1').datepicker('getDate'); 
      date2.setDate(date2.getDate() + 1); 
      $('#dt2').datepicker('setDate', date2); 
      //sets minDate to dt1 date + 1 
      $('#dt2').datepicker('option', 'minDate', date2); 
     } 
    }); 
    $('#dt2').datepicker({ 
     dateFormat: "dd-M-yy", 
     onClose: function() { 
      var dt1 = $('#dt1').datepicker('getDate'); 
      var dt2 = $('#dt2').datepicker('getDate'); 
      //check to prevent a user from entering a date below date of dt1 
      if (dt2 <= dt1) { 
       var minDate = $('#dt2').datepicker('option', 'minDate'); 
       $('#dt2').datepicker('setDate', minDate); 
      } 
     } 
    }); 
});

看到jsfiddle

來源

2013-05-04 12:20:58 SirDerpington

謝謝，它像一個魅力。 – user75ponic 2013-05-05 06:19:34

酷！總是樂於提供幫助。 – SirDerpington 2013-05-05 09:41:46

+1，這正是我所需要的。而不是'＃dt2'中的最後一個if，我將readonly屬性添加到我的輸入元素。 – entiendoNull 2015-03-20 21:54:55

這裏是我如何做到這一點 -

DEMO

，代碼如下所示

$('#dt2').datepicker({ 
    dateFormat: "dd-M-yy" 
}); 

$("#dt1").datepicker({ 
    dateFormat: "dd-M-yy", 
    minDate: 0, 
    onSelect: function(date){    
     var date1 = $('#dt1').datepicker('getDate');   
     var date = new Date(Date.parse(date1)); 
     date.setDate(date.getDate() + 1);   
     var newDate = date.toDateString(); 
     newDate = new Date(Date.parse(newDate));      
     $('#dt2').datepicker("option","minDate",newDate);    
    } 
});

來源

2013-05-04 12:19:39 SachinGutte

究竟是幹什麼的我需要，謝謝！ – stco 2013-08-17 21:10:32

我只是改變你的代碼，使分鐘日期date2的自動設置&如果比date2的DATE1越大，其設置於date2 = DATE1

$("#dt1").datepicker({ 
      dateFormat: "dd/mm/yy", 
      onSelect: function (date) { 
       var dt1 = $('#dt1').datepicker('getDate'); 
       var dt2 = $('#dt2').datepicker('getDate'); 
       if (dt1 > dt2) { 
        $('#dt2').datepicker('setDate', dt1); 
       } 
       $('#dt2').datepicker('option', 'minDate', dt1); 
      } 
     }); 
     $('#dt2').datepicker({ 
      dateFormat: "dd/mm/yy", 
      minDate: $('#dt1').datepicker('getDate'), 
      onClose: function() { 
       var dt1 = $('#dt1').datepicker('getDate'); 
       var dt2 = $('#dt2').datepicker('getDate'); 
       //check to prevent a user from entering a date below date of dt1 
       if (dt2 <= dt1) { 
        var minDate = $('#dt2').datepicker('option', 'minDate'); 
        $('#dt2').datepicker('setDate', minDate); 
       } 
      } 
     });

來源

2014-01-24 15:39:30 kannan

更好 - 這似乎是正確的方式來做到這一點，而沒有煩人的用戶。 – Simon27 2014-09-02 16:08:48

Jquery的日期選擇器限制基於在第一日期字段選定的日期在第二日期字段日期

回答

相關問題