How to set disabled minutes - eonasdan-datetimepicker

Question

I've been using this DateTime picker on a section of my website, I have a schedule per week which has a start and end time depending on the day of the week and I wanted to disable the time that was out of the schedule range and that includes minutes, what was my surprise? I couldn't find any documentation about disabling minutes. I decided to change the DateTime plugin for another one but I would have to change all the code that I already have. so I came back to [eonasdan-datetimepicker] Is there any way to get this done? I'm able of disabling hours successfully but I'm talking about minutes.

Answer 1

You could use the option disabledTimeIntervals but this only work for specific dates (moments), then you must specify the interval for each available day. I did something like this:
var addingColacionInterval = function (disabledTimeIntervals, currDate) {
var intervalsPerDay = {
1: { //1-7 where 1 is Monday and 7 is Sunday
startHour:15,
startMinute: 40,
durationInMinutes: 30
},
2: {
startHour:8,
startMinute: 20,
durationInMinutes: 50
}
// etc
}
var intervalForWeekDay = intervalPerDay[currDate.isoWeekday()]; //.isoWeekday(); // returns 1-7 where 1 is Monday and 7 is Sunday
var initialTime = currDate.clone().set({ hour: intervalForWeekDay.startHour, minute: intervalForWeekDay.startMinute });
disabledTimeIntervals.push([initialTime, initialTime.clone().add(parseInt(intervalForWeekDay.durationInMinutes), 'minutes')]);
}
var minDate = moment("the min selectable date");
var maxDate = moment("the max allowed date");
//for disable colación minutes intervals we can't use disableHours because don't work with minutes disabledTimeIntervals doesn't work for all days (like, but you have to loop trought
var disabledTimeIntervals = [];
var currDate = minDate.clone().startOf('day');
var lastDate = maxDate.clone().endOf('day');
do {
addingColacionInterval(disabledTimeIntervals, currDate);
} while (currDate.add(1, 'days').diff(lastDate) < 0);
var disabledHours = [0, 1, 2, 3, 4, 5, 6, 7, 23];
$scope.disableDays = [];
if ($scope.import.disableSunday) {
$scope.disableDays = [0];
}
//
$scope.dateSecOptions = {
minDate: minDate.format('YYYY-MM-DD'),
maxDate: maxDate.format('YYYY-MM-DD'),
disabledHours: disabledHours,
disabledTimeIntervals: disabledTimeIntervals,
stepping: 10,
};
in contrast with disabledTimeIntervals also exist the option disabledHours which allow you to disable hours for all available (selectable) days in the calendar widget.

Answer 2

what exactly do you want? like for example just allowing users to select specific times like just half hour [30] or whole hour? [00] because if that is the case, you can use the stepping function, what it does is that when users select the up or down arrow, the minutes advance as much as you choose, for example 30 minutes:
$(document).ready(function () {
$('#datetimepicker4').datetimepicker({
stepping:30
});
});