实现 Datepicker 防止结束日期早于开始日期答案

【问题标题】：Materialize Datepicker prevent end date before start date实现 Datepicker 防止结束日期早于开始日期
【发布时间】：2016-04-11 18:36:08
【问题描述】：

对于Materialize datepicker，我找到了Materialize datepicker的min和max选项，但是不知道如何设置两个datepicker相互配合使用如下：

用户选择开始日期。
用户现在必须选择结束日期，但不能选择开始日期之前的日期。
如果用户先选择结束日期，他/她应该无法选择该结束日期之后的开始日期。

我不是 javascript 程序员，所以不知道如何开始。根据我的猜测，我需要在每个日期选择器的 onSet 事件中添加一些代码。

我也在尝试为时间选择器做同样的事情：http://weareoutman.github.io/clockpicker/jquery.html。

有人可以帮忙解决此代码或其他解决方案吗？

【问题讨论】：

目前，我已经在表单提交时完成了服务器端验证。工作，但不是我的想法。

标签： jquery datepicker timepicker materialize

【解决方案1】：

Materialize Date Picker 使用pickadate.js，它提供了以下解决方案：http://codepen.io/amsul/pen/nGckA

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

var to_$input = $('#input_to').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)
  }
})

您可以将其添加到使用日期选择器的页面 - 只需确保更新示例中的两个 ID（#input_from 和 #input_to）以匹配您的开始和结束日期选择器的 ID。

【讨论】：

不确定用户为什么接受他自己的答案，因为他提供的是完全不同的东西。你的回答很完美，让我有更多的习惯。

【解决方案2】：

解决了服务器端验证。似乎没有办法在客户端使用具体化插件来执行此操作。

【讨论】：

【解决方案3】：

以下代码在客户端执行此操作。

$('.datepicker').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        closeOnSelect: true,
        closeOnClear: true,
        format: 'yyyy-mm-dd',
        onSet: function (ele) {
           if(ele.select){
                  this.close();
           }

            var d1 = $('#startdate').val();
            var d2 = $('#enddate').val();

            var date1 = new Date(d1);
            var date2 = new Date(d2);

           var date1_ms = date1.getTime();
           var date2_ms = date2.getTime();

            if((date2_ms -date1_ms ) <0 )
            {
              alert('End date cannot be a previous date!');
              $('#startdate').val(d2);  

            }

        }

      });

【讨论】：

谢谢！我看到了你的解决方案，但我实际上是在寻找无法选择日期的问题:-)