Materialize Datepicker防止结束日期早于开始日期

Question

对于Materialize日期选择器，我已经找到了Materialize日期选取器的最小和最大选项，但不知道如何设置两个相互结合使用的日期选取器，如下所示：

1. 用户选择开始日期
2. 用户现在必须选择结束日期，但不能在开始日期之前选择日期
3. 如果用户首先选择结束日期，他/她就不能选择结束日期之后的开始日期

我不是一个javascript程序员，所以我甚至不知道如何启动它。根据我的猜测，我需要在每个日期选择器的onSet事件中放入一些代码。

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

是否有人可以帮助提供此代码或其他解决方案？

Answer 1

Materialize Date Picker使用pickdate.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），以匹配您的开始&结束日期选择器。

Answer 2

已为服务器端验证结算。使用实体化插件在客户端似乎没有办法做到这一点。

Answer 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);  
            }
        }
      });