0

I am using materialize datepicker for selecting start and end date in my application. In that, I am in need of allowing user to select only the start and end date of a quarter (Example: start date - March 31, 2016 and end date - June 30, 2016), otherwise an error message should be displayed. There is no restriction in the year selection.

Example: if user selects start date: June 2, 2015 and end date: Aug 4, 2015. In this case, I have to display an error message.

I have started trying this in following JSFiddle link, but I am unable to achieve this.

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

1 回答 1

1

您可以使用 momentstartOf和endOf来获取季度的开始和结束。使用toDate()您可以将 moment 对象转换为 JavaScript Date 并将其传递给minand 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>

于 2017-02-06T09:22:48.657 回答