Question

我正在使用materialize datepicker在我的应用程序中选择开始日期和结束日期。在此，我需要允许用户仅选择季度的开始和结束日期（例如：开始日期 - 2016年3月31日和结束日期 - 2016年6月30日），否则应显示错误消息。年度选择没有限制。

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

我已经开始尝试跟随JSFiddle链接，但我无法实现这一点。

input_id

Answer 1

您可以使用片刻startOf和endOf来获取季度的开始和结束时间。使用toDate()，您可以将时刻对象转换为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>

实现datepicker范围验证

1 个答案: