javascript - 将另一个日期选择器的最短日期设置为比我的第一个日期选择器提前 1 天

Question

我正在使用 Materializecss。现在我正在创建一个酒店预订系统。我想要的是，当我在 DateIn Datepicker 上选择日期时，DateOut Datepicker 最短日期应比所选日期早 1 天。第一次选择它是有效的。但是，当我尝试选择比所选日期更高的入住日期时，日期选择器的最短日期不会更改。

  $('#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(min):2017年9月28日(后面的日期已禁用)dp_co:2017 年 9 月 28 日(选定)

第二次选择:(我将再次选择 dp_ci)dp_ci:2017 年 9 月 29 日(节选)dp_co(min):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)
  }
})

在这里获取代码:CodePen

Answer 1

您需要在开始选择器和结束选择器上保存picker对象，并且当startpicker更改时 - 您只需要设置 end 选择器的 min 值:

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>