Материализовать Datepicker предотвратить дату окончания раньше даты начала

Для Materialise datepicker я нашел минимальные и максимальные параметры для Materialize datepicker, но не знаю, как установить два datepicker, используемые вместе друг с другом, следующим образом:

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

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

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

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


datepicker jquery timepicker materialize
person Kobus Myburgh    schedule 11.04.2016    source источник
comment
На данный момент я выполнил проверку на стороне сервера при отправке формы. Работает, но не совсем то, что я имел в виду.   -  person Kobus Myburgh    schedule 13.04.2016

Ответы (3)


arrow_upward
2
arrow_downward

Средство выбора даты материализации использует 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)
  }
})

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

person Pandy    schedule 19.10.2016
comment
Не уверен, почему пользователь принял свой ответ, ведь он предлагал совсем другое. Ваш ответ был идеальным и позволил мне сделать гораздо больше. - person DNorthrup; 07.08.2017

arrow_upward
1
arrow_downward

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

person Kobus Myburgh    schedule 29.05.2016

arrow_upward
0
arrow_downward

Приведенный ниже код делает это на стороне клиента.

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

            }

        }

      });
person Wings2fly    schedule 26.07.2016
comment
Спасибо! Я вижу ваше решение, но на самом деле я вообще искал, что не могу выбрать дату :-) - person Kobus Myburgh; 27.07.2016