материализовать Datepicker предотвратить конечную дату до даты запуска

Question

Для материализации DatePicker, я нашел минимальные и максимальные варианты материализовать DatePicker, но не знает, как установить два datepickers, используемых в сочетании друг с другом следующим образом:

1. Пользователь выбирает дату начала.
2. Теперь пользователь должен выбрать дату окончания, но не должен выбирать дату до даты начала.
3. Если пользователь сначала выбирает дату окончания, он/она не может выбрать дату начала после этой даты.

Я не программист на javascript, поэтому не уверен, как начать это. Из моих догадок мне нужно будет поместить некоторый код в событие onSet для каждого датпикера.

Я также пытаюсь сделать то же самое для timepicker: http://weareoutman.github.io/clockpicker/jquery.html.

Может кто-нибудь помочь с этим кодом или другим решением?

Answer 1

Устанавливается для проверки на стороне сервера. Кажется, что нет способа сделать это на стороне клиента с помощью материализованного плагина.

Answer 2

Данный код делает это на стороне клиента.

$('.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); 

      } 

     } 

     }); 

Answer 3

Date Picker материализовать использует 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) 
    } 
}) 

Вы можете добавить это к странице, где используется datepickers - только не забудьте обновить два иды в примере (#input_from и #input_to), чтобы соответствовать идентификационным номерам вашего запуска. & end datepickers.