Change time in day date picker depending on location/day

问题

I'm using amsul date selector and a time selector, I want to change the min/max hours of the time selector depending on what days and check boxes are selected. Here is my code:

    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();
        }
    });

So right now that code works pretty well as is, what I want to change is in addition to everything thing I have there (I was able to do the rest with the help of a previous poster on here), if pickup_loc = "oc" I want the days available to be Monday, Tuesday, Thursday, Friday and I want the times available to be 11am - 2pm. How would I go about doing this?

Edit: Here is a working jsfiddle

回答1:

I added a function to your radio buttons, I think you are also manipulating time picker when date is set. So you have to build a function to call when date is changed and when place is changed and collate them in one function to improve consistency, right now the new function will handle your time picker all right but once you select the date those will be overridden by your date onset function.

This is not accurate code but just to help you figure out your next move.

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 for your reference https://jsfiddle.net/9c6r1ns4/1/

回答2:

Like this:

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]
             });

    }

}

And here is a working fiddle

来源：https://stackoverflow.com/questions/58003023/change-time-in-day-date-picker-depending-on-location-day