Jquery的日期選擇器基於在第一日期字段選擇的日期和明智的限制在第二日期字段日期反之亦然

Jquery的日期選擇器限制的日期在第二日期字段基於在第一日期字段和明智反之亦然（限制在第一日期字段的日期選擇的日期基於第二個日期字段中的選定日期）Jquery的日期選擇器基於在第一日期字段選擇的日期和明智的限制在第二日期字段日期反之亦然

我有2個文本框FromDate和Todate 它取決於用戶哪個字段他將首先選擇，他有2個選項fromdate和todate。

如果用戶第一次選擇沒有fromdate前（2017年6月15日），然後在TODATE領域都在沒有fromdate選擇以前的日期將被阻塞，TODATE場將只提供選擇將來的日期

如果用戶第一個選擇TODATE前（2017年6月15日），然後在沒有fromdate領域的所有將來的日期將被阻塞，如果沒有fromdate是（2017年6月15日）選定爲FROM日期字段將只提供給選擇過去的日期

另一個例子然後TODATE將無法選擇日期小於2017年6月15日，TODATE將只提供選擇，然後15日期grteate六月2017

如果TODATE時（2017年6月15日）選爲則沒有fromdate將無法選擇日期大於6月15日2017年，沒有fromdate將只能選擇日期少於6月15日2017年

下面是我的代碼

<div class="input-group date" id="datetimepicker1"> 
             @Html.TextBoxFor(model => model.FromDate, "{0:d}", new { tabindex = "2", @class = "form-control" }) 
             <span class="input-group-addon" style="cursor: pointer;"> 
              <span class="fa fa-calendar"></span> 
             </span> 

            </div> 
<div class="input-group date" id="datetimepicker2"> 
             @Html.TextBoxFor(model => model.ToDate, "{0:d}", new { tabindex = "3", @class = "form-control" }) 
             <span class="input-group-addon" style="cursor: pointer;"> 
              <span class="fa fa-calendar"></span> 
             </span> 

            </div> 
<script> 
    $(document).ready(function() { 
    var date_input = $('#datetimepicker1'); //our date input has the name "date" 
    var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body"; 
    var options = { 
     format: 'mm/dd/yyyy', 
     container: container, 
     todayHighlight: true, 
     autoclose: true, 
    }; 
    date_input.datepicker(options); 
}) 

$(document).ready(function() { 
    var date_input = $('#datetimepicker2'); //our date input has the name "date" 
    var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body"; 
    var options = { 
     format: 'mm/dd/yyyy', 
     container: container, 
     todayHighlight: true, 
     autoclose: true, 
    }; 
    date_input.datepicker(options); 
}) 
</script>

來源

2017-10-17 Kalpesh Koli

是的，這是可能的，你是怎麼試試？ –

http://jsfiddle.net/SirDerpington/PPSh3/3/這個小提琴是一些什麼相似，但不完全是我的回答 –

下面的代碼會爲你工作：

$("#FromDate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '-30:+1', 
     onSelect: function (dateText) { 
      //self.validateDate();    
     }, 
     onClose: function (selectedDate, instance) { 
      if (selectedDate !== '') {    
       var orginalDate = new Date(selectedDate); 
       var date = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() + 3)); 
       $("#ToDate").datepicker("option", "minDate", selectedDate); 
       $("#ToDate").datepicker("option", "maxDate", date); 


      } 
     } 
    }); 
    $("#ToDate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '-30:+1',  

     onSelect: function (dateText) { 
      //self.validateDate(); 
     }, 
     onClose: function (selectedDate) { 
      var orginalDate = new Date(selectedDate); 
      var date = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() -3)); 
      $("#FromDate").datepicker("option", "minDate", date); 
      $("#FromDate").datepicker("option", "maxDate", selectedDate); 
     }   
    });

來源

2017-10-17 14:45:17 Paul

我曾試圖與上面的代碼工作因此未（或者可能是我會錯過了什麼）。可你請看我編輯的問題... –

我得到了解決問題是在我的日期選擇器的jQuery BEL流是代碼我使用和它的工作非常出色

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">

<script> 

$(document).ready(function() { 
$('#from').datepicker(
    { 

     beforeShow: function() { 
      $(this).datepicker('option', 'maxDate', $('#to').val()); 
     } 
    }); 
$('#to').datepicker(
     { 
      defaultDate: "+1w", 
      beforeShow: function() { 
       $(this).datepicker('option', 'minDate', $('#from').val()); 
       if ($('#from').val() === '') $(this).datepicker('option'); 
      } 
     }); 
})

<div> 

    <label for="from">From</label> <input type="text" id="from" name="from" class="form-control datepicker" /> <label for="to">to</label> <input type="text" id="to" class="form-control datepicker" name="to" /> 
</div>

來源

2017-10-18 11:28:44

Jquery的日期選擇器基於在第一日期字段選擇的日期和明智的限制在第二日期字段日期反之亦然

回答

相關問題