Question

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

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

我不是一个javascript程序员，所以不知道如何开始这个。根据我的猜测，我需要在每个datepicker的onSet事件中放入一些代码。

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

有人可以帮助您使用此代码或其他解决方案吗？

Answer 1

为服务器端验证而定居。似乎没有办法在客户端使用materialize插件执行此操作。

Answer 2

物化日期选择器使用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。结束日期采摘。

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

            }

        }

      });

Materialize Datepicker阻止开始日期之前的结束日期

3 个答案: