Search code examples
javascriptdatetimepickerbootstrap-datetimepickereonasdan-datetimepicker

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


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?


Solution

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