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

Question

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

用户 select 是开始日期。
用户现在必须 select 结束日期，但不能 select 开始日期之前的日期。
如果用户 select 结束日期在前，he/she 不应 select 结束日期之后的开始日期。

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

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

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

Answer 1

已解决服务器端验证问题。似乎无法使用 materialize 插件在客户端执行此操作。

Answer 2

下面的代码在客户端完成。

$('.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);  

            }

        }

      });

Answer 3

Materialise 日期选择器使用 pickadate.js, which offers the following solution: 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 & 结束日期选择器。

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

Materialize Datepicker prevent end date before start date

jquery

datepicker

timepicker

materialize