实现日期选择器范围验证

Question

我在我的应用程序中使用 materialize datepicker selecting 开始和结束日期。在那，我需要允许用户 select 只有季度的开始和结束日期（示例：开始日期 - 2016 年 3 月 31 日和结束日期 - 六月30, 2016)，否则应显示错误消息。 selection年无限制。

示例：如果用户 select 的开始日期：2015 年 6 月 2 日和结束日期：2015 年 8 月 4 日。在这种情况下，我必须显示一条错误消息。

我已经按照 JSFiddle link 开始尝试这个，但我无法实现。

[JSFiddle][1]
[1]: http://jsfiddle.net/7ujbv2yz/12/

Answer 1

您可以使用 moment startOf and endOf to get the start and the end of the quarter. Using toDate() 您可以将 moment 对象转换为 JavaScript 日期并将其传递给 min 和 max.

要在用户选择日期后执行操作，请使用 onSet 属性。

这是一个活生生的例子：

$('#date1').pickadate({
  selectMonths: true,
  selectYears: 15,
  onSet: function(obj){
    var picker2 = $('#date2').pickadate('picker');
    if( obj.select ){
      var val = moment(obj.select);
      picker2.set('min', val.startOf('quarter').toDate());
      picker2.set('max', val.endOf('quarter').toDate());
    }
    
    if( obj.clear ){
      picker2.set('min', false);
      picker2.set('max', false);
    }
  }
});

$('#date2').pickadate({
  selectMonths: true,
  selectYears: 15,
  onSet: function(obj){
    var picker1 = $('#date1').pickadate('picker');
    if( obj.select ){
      var val = moment(obj.select);
      picker1.set('min', val.startOf('quarter').toDate());
      picker1.set('max', val.endOf('quarter').toDate());
    }
    
    if( obj.clear ){
      picker1.set('min', false);
      picker1.set('max', false);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet"/>

<div class="col m6">
  <span style="font-size:18px;font-weight:500;">From Date:</span>
  <input type="date" id="date1" name="date1" class="datepicker" style="display:inline-block;width:40%;">
</div>
<div class="col m6">
  <span style="font-size:18px;font-weight:500;">To Date:</span>
  <input type="date" id="date2" name="date2" class="datepicker" style="display:inline-block;width:40%;">
</div>

实现日期选择器范围验证

Materialize datepicker range validation

jquery

datepicker

momentjs

materialize

pickadate