How to fix opening time minutes for whole week using DateTime Picker?

Question

Using DateTimepicker I want to set store opening time as 10:30 AM (for example) for the whole week. Using this piece of code I could able to restrict hours.

var curentDate = new Date();
var lastDate = new Date();
lastDate.setDate(curentDate.getDate() + 6);
$('#txtdate').datetimepicker({
    inline: true,
    sideBySide: true,
    maxDate: lastDate,
    minDate: curentDate,
    enabledHours: HoursArray()
});

I set this to 15min increment but I'm not sure how to set minutes for all the days in a week. Also I want to disable minutes before 10:30 AM each day.

Can some one guide me on this?

Answer 1

I don't see the library exposing any ways to set the default time for each day, but you can take control into your own hands by using their events API and date() method. You could listen for change event Like this:

$(document).on('dp.change', manipulateTime);

The event shows the new date and oldate of the calendar. If the dates are different then you can change the time for new date using the date() method.

function manipulateTime(e){

  if(!e.date.isSame(e.oldDate, "day")){
    $(e.target).data("DateTimePicker").date(e.date.set({
      'hour' : 10,
      'minute'  : 30
    }));
  }

}

Further Explanation

---

The when the event fires it returns three necessary references, date,olddate,target.

Calling DateTimePicker Functions

• Note according to their documentation you can use their methods like this: All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION()

Using Events

When you call the dp.change event. The call back function will return an object e that has the following accessible properties:

The e property

e = {
    date, //date the picker changed to. Type: moment object (clone)
    oldDate //previous date. Type: moment object (clone) or false in the event of a null,
    target // targeted date picker,
    and more...
}

Answer 2

This is the final thing I did to fix my both issues

var futureHour  = (new Date(td.date)).getHours();
var futureMin = (new Date(td.date)).getMinutes();

//This is to re-loop time when user tries to select time below 1st pickup time
              if(futureHour <= storeOpenHour && futureMin < storeOpenMinutes){
                $(td.target).data("DateTimePicker").date(td.date.set({
                  'hour' : storeOpenHour,
                  'minute'  : storeOpenMinutes
                }));
                }

                //This is to select 1st pickup time on day change
              if(!td.date.isSame(td.oldDate, "day")){
                $(td.target).data("DateTimePicker").date(td.date.set({
                  'hour' : storeOpenHour,
                  'minute'  : storeOpenMinutes
                }));
              }