0

我一直在我网站的一部分上使用这个 DateTime 选择器,我有一个每周的时间表,它的开始和结束时间取决于一周中的哪一天,我想禁用超出时间表范围的时间和包括分钟,我有什么惊喜?我找不到任何有关禁用分钟的文档。我决定将 DateTime 插件更改为另一个插件,但我必须更改我已经拥有的所有代码。所以我回到 [eonasdan-datetimepicker] 有什么办法可以完成这项工作吗?我能够成功禁用小时,但我说的是分钟。

4

2 回答 2

0

您可以使用选项disabledTimeIntervals但这仅适用于特定日期(时刻),然后您必须指定每个可用日期的时间间隔。我做了这样的事情:

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

与 disabledTimeIntervals 相比,还存在选项 disabledHours,它允许您禁用日历小部件中所有可用(可选)天的小时数。

于 2017-05-29T15:02:09.757 回答
-1

你到底想要什么?例如只允许用户选择特定时间,例如半小时 [30] 或整小时?[00] 因为如果是这种情况,您可以使用步进功能,它的作用是当用户选择向上或向下箭头时,分钟会根据您的选择提前,例如 30 分钟:

$(document).ready(function () {
$('#datetimepicker4').datetimepicker({               
stepping:30                    
                });
            });
于 2016-08-04T19:43:34.783 回答