Materialize datepicker range validation

Question

Я использую материализацию datepicker для выбора даты начала и окончания в моей заявке. В этом случае мне необходимо разрешить пользователю выбирать только дату начала и окончания квартала (пример: дата начала - 31 марта 2016 года и дата окончания - 30 июня 2016 года), в противном случае должно отображаться сообщение об ошибке , В выборе года нет ограничений.

Пример: если пользователь выбирает дату начала: 2 июня 2015 года и дату окончания: 4 августа 2015 года. В этом случае мне нужно отобразить сообщение об ошибке.

Я начал пробовать это в следующей ссылке JSFiddle, но я не могу этого добиться.

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

Answer 1

Вы можете использовать момент startOf и endOf, чтобы начало и конец квартала. Используя toDate(), вы можете преобразовать объект момента в JavaScript Date и передать его 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>