設置其他日期選擇器的最短日期提前1天我的第一個日期選擇器

Question

我正在使用Materializecss。現在我正在創建一個酒店預訂系統。我想要的是，當我在DateIn Datepicker上選擇一個日期時，DateOut Datepicker分鐘日期應該比選定日期提前1天。首先選擇它正在工作。但是，當我嘗試選擇高於所選日期的檢查日期時，dateout選取器的最短日期將不會更改。

$('#dp_ci').pickadate(
     { 
      selectMonths: true, // Creates a dropdown to control month 
      min : new Date(), 
      clear: 'Clear', 
      close: 'Ok', 
      closeOnSelect: false // Close upon selecting a date,  
     }); 

     $('#dp_ci').change(function(){ 
     selected_ci_date =""; 
     selected_ci_date = $('#dp_ci').val(); 
     if (selected_ci_date != null) 
     { 
      var cidate = new Date(selected_ci_date); 
      alert(cidate); 
      $("#dp_co").val(""); 
      $("#dp_co").removeAttr("disabled"); 
      min_codate = ""; 
      min_codate = new Date(); 
      min_codate.setDate(cidate.getDate()+1); 

      $('#dp_co').pickadate(
      { 
      min : min_codate, 
      selectMonths: true, // Creates a dropdown to control month 
      clear: 'Clear', 
      close: 'Ok', 
      closeOnSelect: false // Close upon selecting a date, 
     }); 

      $('#dp_co').change(function(){ 
      if ($('#dp_co').val() != null) 
      { 
       var ci = new Date($('#dp_ci').val()); 
       var co = new Date($('#dp_co').val()); 
       var noOfdays = co.getDate() - ci.getDate() ; 
       alert(noOfdays); 
      } 
      }); 

     } 
     }) 

編輯： 示例： 第一選擇： dp_ci：2017年9月27日（選擇的） dp_co（分鐘）：2017年9月28日（日期後面被禁用） dp_co：2017年9月28日（選擇）

第二選擇：（我將在dp_ci再次選擇） dp_ci：2017年9月29日（選擇） dp_co（分鐘）：2017年9月28日（還是這本來應該是9月29日）

更新：我找到了能夠解決我的問題的答案。唯一的一件事是dp_co的最短日期不應該與dp_ci允許同一日期：任何解決方案？

$('#dp_ci').pickadate(
    { 
    selectMonths: true, // Creates a dropdown to control month 
    today: 'Today', 
    clear: 'Clear', 
    close: 'Ok', 
    min: new Date() 
    }); 


var from_$input = $('#dp_ci').pickadate(), 
    from_picker = from_$input.pickadate('picker') 

var to_$input = $('#dp_co').pickadate(), 
    to_picker = to_$input.pickadate('picker') 


// Check if there’s a 「from」 or 「to」 date to start with. 
if (from_picker.get('value')) 
{ 
    to_picker.set('min', from_picker.get('select')) 

} 
if (to_picker.get('value')) 
{ 
    from_picker.set('max', to_picker.get('select')) 


} 
// When something is selected, update the 「from」 and 「to」 limits. 
from_picker.on('set', function(event) 
{ 

    if (event.select) 
    { 
    to_picker.set('min', from_picker.get('select'))  
    } 

    else if ('clear' in event) 
    { 
    to_picker.set('min', false) 
    } 

}) 

to_picker.on('set', function(event) 
{ 
    if (event.select) 
    { 
    from_picker.set('max', to_picker.get('select')) 
    } 
    else if ('clear' in event) 
    { 
    from_picker.set('max', false) 
    } 
}) 

來到這裏的代碼：

Answer 1

您需要保存的啓動選擇器和最終選擇器都和picker對象時startpicker變化 - 你只需要set的min值在end選擇器：

var startdate = $('#dp_ci').pickadate('picker'); 
var enddate = $('#dp_co').pickadate('picker'); 

$('#dp_ci').change(function() { 
    if (selected_ci_date != null) { 
    enddate.set('min', min_codate); 
    } 
}) 

下面是完整的例子：

$('#dp_ci').pickadate({ 
 
    selectMonths: true, // Creates a dropdown to control month 
 
    min : new Date(), 
 
    clear: 'Clear', 
 
    close: 'Ok', 
 
    closeOnSelect: false // Close upon selecting a date,  
 
}) 
 
var startdate = $('#dp_ci').pickadate('picker'); 
 
$('#dp_co').pickadate({ 
 
    min : new Date(), 
 
    selectMonths: true, // Creates a dropdown to control month 
 
    clear: 'Clear', 
 
    close: 'Ok', 
 
    closeOnSelect: false // Close upon selecting a date, 
 
}) 
 
var enddate = $('#dp_co').pickadate('picker'); 
 

 
$('#dp_ci').change(function() { 
 
    selected_ci_date =""; 
 
    selected_ci_date = $('#dp_ci').val(); 
 
    if (selected_ci_date != null) { 
 
    var cidate = new Date(selected_ci_date); 
 
    alert(cidate); 
 
    $("#dp_co").val(""); 
 
    $("#dp_co").removeAttr("disabled"); 
 
    min_codate = ""; 
 
    min_codate = new Date(); 
 
    min_codate.setDate(cidate.getDate()+1); 
 
    enddate.set('min', min_codate); 
 
    } 
 
})

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
 

 
<div class = "row"> 
 
    <div class ="col s6"> 
 
    <label>Date of Check-in </label> 
 
    <input type="text" class="datepicker" id="dp_ci"> 
 
    </div> 
 

 
    <div class ="col s6"> 
 
    <label>Date of Check-out </label> 
 
    <input disabled="true" type="text" class=" datepicker" id="dp_co"> 
 
    </div> 
 
</div>

Answer 2

$('#txt_performanceDayFlex1').daterangepicker({ 
    "locale": { 
     "format": "MM/DD/YY" 
    }, 
    singleDatePicker: true, 
    minDate: new Date() 
}, function (start, end, label) { 
    $scope.PerformanceStartDate = start.format('MM/DD/YY');   
    $scope.minimumDate = minimumFormatRequestDate($scope.PerformanceStartDate); 
    LodaDate(); //You need to reload the End Date then it Behave Properly and you can add one day head in $scope.minimumDate this in same format 
    ResetDateAndtime(1); 
    $scope.$apply(); 
}); 

function LodaDate() { 
    $('#txt_performanceDayFlex2').daterangepicker({ 
     "locale": { 
      "format": "MM/DD/YY" 
     }, 
     singleDatePicker: true, 
     minDate: $scope.minimumDate, 
     endDate: new Date() 
    }, function (start, end, label) { 

     $scope.PerformanceEndDate = start.format('MM/DD/YY');   
     $scope.$apply(); 
    }); 
    function minimumFormatRequestDate(date) { 
     if (date != undefined && date != null) { 
      var newDate = date.split('.').reverse().join('/') 
      var d = new Date(newDate), 
       month = '' + (d.getMonth() + 1), 
       day = '' + d.getDate(), 
       year = d.getFullYear(); 

      if (month.length < 2) month = '0' + month; 
      if (day.length < 2) day = '0' + day; 
      return [day, month, year].join('-'); 
     } else { 
      return 'NA'; 
     } 
    }