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?

Area you using this library: https://eonasdan.github.io/bootstrap-datetimepicker/ ? — Abdullah Rasheed, Sep 07 '17 at 15:35

Abdullah Rasheed · Accepted Answer · 2017-09-07T19:11:31.813

2

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...
}

edited Sep 07 '17 at 19:11

answered Sep 07 '17 at 15:58

Abdullah Rasheed

3,562
4
33
51

Occurring event on selecting a new day part of the library right? How to manipulate that in my JS file? – Jaggi Sep 07 '17 at 16:30
@inspited - Yes – Jaggi Sep 07 '17 at 17:06
Yeah, also It shouldn't allow user to select minutes less than that – Jaggi Sep 07 '17 at 17:08
class name of the each day are 'day' – Jaggi Sep 07 '17 at 18:51
tried this way..but event never fires $('#datetimepicker').on('click', 'td.day', function (e) { e.preventDefault(); alert('Im here'); }); – Jaggi Sep 07 '17 at 19:03
@Jaggi did you try to use the event the way i said? ive already tested it, it works. – Abdullah Rasheed Sep 07 '17 at 19:10
this solution worked for me. Actually I was calling this event before initializing. – Jaggi Sep 07 '17 at 19:30
- Can you pls help me on disabling the minutes before 30? – Jaggi Sep 07 '17 at 19:41
Maybe you should disable the down arrow when the minutes are at 30. Inside the same change event, you can check the minutes. If the time is 10:30 then you can disable the down arrow – Abdullah Rasheed Sep 07 '17 at 19:46
Can you give an example to disable down arrow when time is equal to 10:30? – Jaggi Sep 08 '17 at 02:50
I was trying to get time from time picker using this $('.timepicker').data("timepicker").getTime(); to compare with assigned time, but never works out. it throws getTime() is undefined. – Jaggi Sep 08 '17 at 04:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153961/discussion-between-jaggi-and-inspired). – Jaggi Sep 08 '17 at 13:52

score 0 · Answer 2 · answered Sep 08 '17 at 16:17

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

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

2 Answers2

Further Explanation