禁用几个小时的bootstrap datetimepicker

时间:2015-05-05 12:43:12

标签: twitter-bootstrap datetimepicker bootstrap-datetimepicker

我想禁用使用bootstrap datetimepicker选择几个小时,因为我想只选择上午8:00到晚上19:00的时间。

我对此无能为力。你能救我吗?

6 个答案:

答案 0 :(得分:4)

这应该有效:

$(".datepicker").datetimepicker({
    hoursDisabled: '0,1,2,3,4,5,6,7,18,19,20,21,22,23'
});

还有这个:

    hoursDisabled: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23]

因为在bootstrap-datetimepicker.js中:

    setHoursDisabled: function (hoursDisabled) {
        this.hoursDisabled = hoursDisabled || [];
        if (!$.isArray(this.hoursDisabled)) {
            this.hoursDisabled = this.hoursDisabled.split(/,\s*/);
        }
        ...
    },

答案 1 :(得分:0)

bootstrap-datetimepicker.js文件中,已禁用的小时数定义如下;

var hoursDisabled = this.hoursDisabled || [];

如果您只在一个地方使用日期和时间,则只需在原始javascript文件中将此[]更改为[0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23]即可。但是,如果您在多个地方使用日期和时间,最好更改html文件或单独的js文件中的禁用小时数。这是代码;

<script type="text/javascript">
$('.form_datetime').datetimepicker('setHoursDisabled', [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23]);
</script>

答案 2 :(得分:0)

这对我有用:

legend.box.margin    = margin(t = 2, r = 2),

答案 3 :(得分:0)

执行此操作的最佳方法.....

$(".datepicker").datetimepicker({ enabledHours:[8,9,10,11,12,13,14,15,16,17,18,19,20,21,22] });

答案 4 :(得分:0)

尝试一下。您可以禁用HourInterval

$(function () {
            $('#time1').datetimepicker({
                format: 'HH:mm:ss',
                pickDate: false,
                minuteStepping:30,
                pickTime: true,
                autoclose: true,
                defaultDate: new Date(1979, 0, 1, 8, 0, 0, 0),
                //this is what you will need!
                disabledTimeIntervals: [[moment({ h: 0 }), moment({ h: 8 })], [moment({ h: 18 }), moment({ h: 20 })]],
                //hoursDisabled: '0,1,2,3,4,5,6,7,21,22,23',//Not Working!!
                //hoursDisabled: [00, 01, 02, 03, 04, 05, 06, 07, 21, 22, 23],//Not Working!!
                language:'en',
            });
        });

更多选项: https://eonasdan.github.io/bootstrap-datetimepicker/Options/

答案 5 :(得分:0)

上面发布的解决方案实际上并没有起作用,但这对每次浏览都有效:

<input type="text" id="deliverydate" name="deliverydate" autocomplete="off" required="">
<script src="../js/calendar/jquery.datetimepicker.full.js"></script>
<script type="text/javascript">
$('#deliverydate').datetimepicker({
    format:'Y-m-d H:i',
    allowTimes:['11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00', '20:00','21:00','22:00','23:00'], 
    minDate:0
});
</script>

这会禁用选择上一个日期并限制时间选择,并且已经在实时网站和不同浏览器上进行了测试。