In jquery ui datepicker how can I can I make timepicker.co change time if Saturday is chosen?

Question

At the moment I am struggling in making Datepicker change timepicker.co options if Saturday is chosen.

$(".selector").datepicker({  
if(Saturday chosen) {  
Time changed 7am - 2pm  
      }
   })

Any ideas how to do it?

Thank you!

Answer 1

Had some time, and made a demo for you.

First, look at the available demos: http://jsfiddle.net/wvega/A9cE6/embedded/result,js,html,css,resources/

You will first need some association between the weekday selected, and the hours that should be set. I did this using an object of arrays.

var hours = {
  sunday: [null, null],
  monday: [6, 22],
  tuesday: [6, 22],
  wednesday: [6, 22],
  thursday: [6, 22],
  friday: [6, 22],
  saturday: [7, 14],
};

Made some guesses there. Could do this when the selection is made, but felt this was a bit easier.

Made some other guesses since you had not included an example or a complete amount of code.

HTML

<div class="ui-widget" style="width: 340px;">
  <div class="ui-widget-header ui-corner-top">Date &amp; Time</div>
  <div class="ui-widget-content ui-corner-bottom">
    <ul>
      <li>
        <label>Select Date</label>
        <input type="text" class="date selector" id="date-1" />
      </li>
      <li>
        <label>Select Time</label>
        <input type="text" class="time selector" id="time-1" /> -
        <input type="text" class="time selector" id="time-2" />
      </li>
    </ul>
    <button id="date-time-save">Set Date &amp; Time</button>
  </div>
</div>

Here we have a date and two time fields. This is a basic wrapper just to look nice.

JavaScript

var hours = {
  sunday: [null, null],
  monday: [6, 22],
  tuesday: [6, 22],
  wednesday: [6, 22],
  thursday: [6, 22],
  friday: [6, 22],
  saturday: [7, 14],
};

$(function() {
  $(".date").datepicker({
    dateFormat: "DD m/d/y",
    onSelect: function(dt, $dtp) {
      var selectWeekDay = dt.slice(0, dt.indexOf(" ")).toLowerCase();
      var selectHours = hours[selectWeekDay];
      if (selectWeekDay === "sunday") {
        $(".time").val("");
        return true;
      }
      var hour1 = selectHours[0] < 12 ? selectHours[0] + ":00a" : selectHours[0] + "00p";
      var hour2 = selectHours[1] < 12 ? selectHours[1] + ":00a" : selectHours[1] + ":00p"
      $("#time-1").timepicker("setTime", hour1);
      $("#time-2").timepicker("setTime", hour2);
    }
  });
  $(".time").timepicker({
    timeFormat: 'h:mm p',
    interval: 30,
    minTime: '6',
    maxTime: '10:00pm',
    startTime: '6:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true
  });

  $("#date-time-save").button({
    icon: "ui-icon-disk",
    click: function(e) {
      e.preventDefault();
      return false;
    }
  });
});

Working Example: https://jsfiddle.net/Twisty/r1dfLr9r/

You can see when the user selects a date, date text is passed back to the onSelect callback. There are some more difficult ways to get this data if you want, yet I wanted it to be easy so I just sliced off the text I needed.

We cross reference that as the Index in our hours object and now we know what hours we want to set. We can then make use of the setTime method of timepicker.

Timepicker will take a few formats for setTime , the easiest is a string, like "7:00a" . So we add a little format code as we pull out the hours we want for that day. We then set the time values. You can also enter these strings in the array if you want. Something like:

var hours = {
  sunday: [null, null],
  monday: ["6:00a", "11:00p"],
  tuesday: ["6:00a", "11:00p"],
  wednesday: ["6:00a", "11:00p"],
  thursday: ["6:00a", "11:00p"],
  friday: ["6:00a", "11:00p"],
  saturday: ["7:00a", "2:00p"],
};

Your preference. Hope this helps.