Can't change time dynamically

[Drotak]

Hi :)

I tried now for hours to change the time according to a selected day (opening hours: Monday-Thursday: 8am-4:30pm, Friday: 8am-2:30pm), but I'm not able to. First I tried the onChange Event with selecting the "time" view, but there I have not the day which I had selected before (or am I missing something?). Now I made a hack around it, but I'm not happy with this. I use the onChange Event now with selecting the "days" view and override all day click events (which is the problem) to change the time range with the update function. But when I select the day my click function triggers correctly, but the view does not change to "time" (because of overriding the click event of Zebra_Datepicker) and i have to click again on the day (or another, doesn't matter then)

Here is my code:

$('#id_begin').Zebra_DatePicker({
  format: 'Y-m-d H:i',
  enabled_hours: enabled_hours,
  enabled_minutes: [0, 15, 30, 45],
  days: days,
  months: months,
  start_date: date,
  show_select_today: false,
  open_on_focus: true,
  direction: 7,
  pair: $('#id_end'),
  onChange: function(view, elements) {
    if(view === "days"){
      elements.each(function() {
        $(this).click(function() {
          date = new Date($(this).data('date'))
          day = date.getDay()
          console.log(day)
          // if Monday to Thursday
          if(day >= 1 && day <= 4){
            enabled_hours = [];
            for(let i = 8; i <= 16; i++){
              enabled_hours.push(i);
            }
            $("#id_begin").data('Zebra_DatePicker').update({
              enabled_hours: enabled_hours,
              // view: "time" - setting the view here would be a possibility, but is not implemented in Zebra 
            });
          } else if(day == 5) {
            // Friday
            enabled_hours = []
            for(let i = 8; i <= 14; i++){
              enabled_hours.push(i);
            }
            $(this).data('Zebra_DatePicker').update({
              enabled_hours: enabled_hours,
              // view: "time" - setting the view here would be a possibility, but is not implemented in Zebra 
            });
          }
        });
      });
    }
  }
});

And another topic: Would be also awesome to have the possibility to set the start time and end time (e.g. 8am-4:30pm, now I only can set the enabled_minutes to [0, 30] but that's not the best solution for this.

Thanks in advance, cheers, Michael

[stefangabos]

you exposed some serious shortcomings that I'll have to look into. until then, here's another slightly cleaner solution

// when the date picker is shown
onOpen: function() {

    // when clicking on any of the cells of the day picker
    // (we set a single delegated event handler)
    // notice the use of namespace making it easier to remove it later on
    $('.Zebra_DatePicker .dp_daypicker').on('click.Zebra_DatePicker', 'td', function() {

        var $element = $(this),
            date = new Date($element.data('date')),
            day = date.getDay(),
            enabled_hours = [], i;

        // if the cell is not disabled, nor it is a weekend day
        if (!$element.hasClass('dp_disabled') && !$element.hasClass('dp_weekend')) {

            // set enabled hours
            for (i = 8; i <= (day >= 1 && day <= 4 ? 16 : 14); i++)
                enabled_hours.push(i);

            // update date picker
            $('#id_begin').data('Zebra_DatePicker').update({
                enabled_hours:  enabled_hours
            });

        }

    });
},

// when the date picker is closed we need to remove the event handler
// notice the use of the namespace making it easier to remove
onClose: function() {
    $('.Zebra_DatePicker .dp_daypicker').off('click.Zebra_DatePicker');
}

you should also disable weekend days (see the docs) and handle the situation when the time view is accessed without previously selecting a day

let me know if it works thanks!