datetimepicker restrain minHour и maxHour в зависимости от выбранного дня - PullRequest
Новая
       7

datetimepicker restrain minHour и maxHour в зависимости от выбранного дня

1 голос
/ 01 февраля 2020

Попытка ограничить указатели времени minHour и maxHour в зависимости от дня недели выбранной даты. Например: выбор Вт. следует ограничить диапазон опций с 9 утра до 5 вечера, но Ср следует ограничить его часами с 11 утра до 7 вечера. Застрял на том, как передать minH и maxH обратно в таймер На самом деле код ниже закрывается при выборе даты, поэтому пользователь не может выбрать время. Я использую bootstrap 4.3.1, jquery 3.4.1, jquery -ui 1.12.1, jquery -ui-timepicker-addon 1.6.3, 

$(document).ready(function() {

jQuery('#basic_example_1').datetimepicker({
    minDate: 7,
    stepMinute: 15,
    onSelect: function(selectedDateTime) {
        let findDayOfWeek = new Date(selectedDateTime);
        let foundDayOfWeek = findDayOfWeek.getDay();
        let minH;
        let maxH;
        //console.log(foundDayOfWeek);
        if (foundDayOfWeek = 2) {
            minH = '09:00';
            maxH = '17:00'
        }
        if (foundDayOfWeek = 3) {
            minH = '11:00';
            maxH = '19:00'
        }
        if (foundDayOfWeek = 4) {
            minH = '11:00';
            maxH = '17:00'
        }
        if (foundDayOfWeek = 5) {
            minH = '11:00';
            maxH = '17:00'
        }
        if (foundDayOfWeek = 6) {
            minH = '10:00';
            maxH = '15:00'
        }
        $('#basic_example_1').datetimepicker('option', 'minHour', minH);
        $('#basic_example_1').datetimepicker('option', 'maxHour', maxH);
    }
});

});

1 Ответ

0 голосов
/ 01 февраля 2020

Находят основу для исправного решения в этом посте: Обновите аддон jquery timepicker из средства выбора даты И мой обновленный код приведен ниже. Надеюсь, это кому-нибудь поможет. Пара замечаний: Когда я включил Формат даты, DatePicker будет выбирать предыдущую дату (например, нажмите на Вт, и он вернул пн.), Поэтому я пропустил формат даты, и средство выбора работает. Мне также потребовалось два отдельных поля - одно для DatePicker и одно для TimePicker - я не смог выполнить sh это с помощью одного datetimepicker (как в примерах с использованием поля alt). 

 $(function(){

  $("#datepicker").datepicker({
    beforeShowDay: closedDay,
    minDate: 7,
    stepMinute: 15,
    addSliderAccess: true,
    sliderAccessArgs: { touchonly: false },
    onSelect: function (dateText, instance) {
        let testDate = new Date(dateText);
        testDate = testDate.getDay();
        if(testDate) {
          if(testDate==2) {
            $("#timepicker").removeClass("hasDatepicker");
            $("#timepicker").timepicker({
                hourMin: 9,
                hourMax: 16,
                timeFormat: 'hh:mm TT',
                stepMinute: 15,
                timeOnly: true
            });
          } else if(testDate==3){
            $("#timepicker").removeClass("hasDatepicker");
            $("#timepicker").timepicker({
                hourMin: 11,
                hourMax: 18,
                timeFormat: 'hh:mm TT',
                stepMinute: 15,
                timeOnly: true
            });
          } else if(testDate==4 || testDate==5){
            $("#timepicker").removeClass("hasDatepicker");
            $("#timepicker").timepicker({
                hourMin: 11,
                hourMax: 16,
                timeFormat: 'hh:mm TT',
                stepMinute: 15,
                timeOnly: true
            });
          } else {
            $("#timepicker").removeClass("hasDatepicker");
            $("#timepicker").timepicker({
                hourMin: 10,
                hourMax: 14,
                timeFormat: 'hh:mm TT',
                stepMinute: 15,
                timeOnly: true
            });
          }
        }

    }
  });

  function closedDay(date) {
    let day = date.getDay();
    if(day == 0 || day == 1) {
      return [false];
    } else {
      return [true];
    }
  }

 });
...