Изменить время в день выбора даты в зависимости от местоположения / дня - PullRequest
2 голосов
/ 19 сентября 2019

Я использую селектор даты amsul и селектор времени , я хочу изменить минимальное / максимальное количество часов селектора времени в зависимости от того, какие дни и флажки установлены.Вот мой код:

    var today = new Date();
    var tomorrow = new Date();
    tomorrow.setDate(today.getDate()+1);
    var nextyear=new Date();
    nextyear.setFullYear(nextyear.getFullYear()+1);
    pickupdatemin=new Date(document.getElementById('car-rental-pickup-date').value);

const timepicker = $('#car-rental-pickup-time').pickatime({
    clear: '',
    min: [9,00],
    max: [16,30],
    onSet: function(context) {
      getpricing();
    }
});
    const pickupdatepicker = $('#car-rental-pickup-date').pickadate({
        format: 'mm/dd/yyyy',
        min: tomorrow,
        max: nextyear,
        today: '',
        close: '',
        clear: '',
        disable: [1],

        onSet:function(context){
            var pickup_loc_sel = document.getElementsByName('car-rental-pickup-location');
            var pickup_loc;
            for(var i = 0; i < pickup_loc_sel.length; i++){
            if(pickup_loc_sel[i].checked){
            pickup_loc = pickup_loc_sel[i].value;
        }
    }
          var d = new Date(context.select);
          var isSat = d.getDay() == 6 && pickup_loc == "sf";
          var max = isSat ? [11,30] : [16,30];
          var time = timepicker.pickatime('picker');
          time.clear().set({max});


          var ddate = dropdatepicker.pickadate('picker');
          ddate.clear();
          ddate.set('min', d);



          getpricing();
        }
    });

Так что сейчас этот код работает довольно хорошо, и я хочу изменить это в дополнение ко всему, что у меня есть (все остальное я смог сделать с помощьюпредыдущего постера здесь), если pickup_loc = "oc" я хочу, чтобы доступными днями были понедельник, вторник, четверг, пятница, и я хочу, чтобы доступное время было с 11:00 до 14:00.Как мне поступить так?

Редактировать: Вот рабочий jsfiddle

Ответы [ 2 ]

1 голос
/ 19 сентября 2019

Вот так:

var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate()+1);
var nextyear=new Date();
nextyear.setFullYear(nextyear.getFullYear()+1);
pickupdatemin=new Date(document.getElementById('car-rental-pickup-date').value);

var timepicker = $('#car-rental-pickup-time').pickatime({
    clear: '',
    min: [9,0],
    max: [16,30]
});

var pickupdatepicker = $('#car-rental-pickup-date').pickadate({
    format: 'mm/dd/yyyy',
    min: tomorrow,
    max: nextyear,
    today: '',
    close: '',
    clear: '',
    disable: [1],
    onSet:function(context){
        updateTimePicker();
    }        

});

$("input[type=radio]").change(function() {
    updateDatePicker();
});

function updateDatePicker(){

    var radioValue = $("input[type=radio]:checked").val();
    var dPicker = pickupdatepicker.pickadate('picker');

    switch (radioValue){

        case "oc":

            dPicker.set({
              'enable': [2,3,5],
              'disable': [1,4,6,7]
            }); 

            break;

        default:

            dPicker.set({
              'enable': [2,3,4,5,6,7],
              'disable': [1]
            });

    }

    updateTimePicker();

}

function updateTimePicker(){

    var radioValue = $("input[type=radio]:checked").val();
    var dPicker = pickupdatepicker.pickadate('picker');
    var tPicker = timepicker.pickatime('picker');

    switch (radioValue){

        case "oc":

            tPicker.set({
                'min': [11,0],
                'max': [14,0]
            });   

            break;

         case "sf":

            if (dPicker.get('select') != null && dPicker.get('select').day == 6){

                tPicker.set({
                    'min': [9,0],
                    'max': [11,30]
                });                 

                break;

             }

             default:

             tPicker.set({
                 'min': [9,0],
                 'max': [16,30]
             });

    }

}

А вот и рабочая скрипка

1 голос
/ 19 сентября 2019

Я добавил функцию к вашим радиокнопкам, я думаю, что вы также манипулируете выбором времени, когда установлена ​​дата.Таким образом, вам нужно создать функцию, которая будет вызываться при изменении даты и при изменении места, и объединять их в одну функцию, чтобы улучшить согласованность, прямо сейчас новая функция будет правильно обрабатывать ваше средство выбора времени, но после выбора даты они будут переопределены.по вашей дате начала функции.

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

function placeEvents() {
  var pickup_loc_sel = document.getElementsByName('car-rental-pickup-location');
  for (var i = 0; i < pickup_loc_sel.length; i++) {
    /* if (pickup_loc_sel[i].checked) {
      pickup_loc = pickup_loc_sel[i].value;
    } */
    pickup_loc_sel[i].addEventListener('change', function(e){
      var max = [16, 30];
      var min = [9, 00];
      if(e.target.value === 'oc') {
        min = [11, 0];
        max = [14, 0]; 
      }
      var time = timepicker.pickatime('picker');
      time.clear().set({
        max, min
      });

      disable = e.target.value === 'oc' ? [1, 4, 6] : [1]; 
      var date = pickupdatepicker.pickatime('picker');
      date.clear().set({
        disable
      })
    })
  }
}

JS Fiddle для вашей справки https://jsfiddle.net/9c6r1ns4/1/

...