CODEWITHSUNDEEP
twitter-bootstrapdatetimepickerbootstrap-datetimepicker
maures
maures

Reputation: 131

Disable some hours bootstrap datetimepicker

I want to disable selecting some hours with bootstrap datetimepicker because I want to select only time from 8:00 am to 19:00 pm.

I can't find nothing about that. Can you help me?

Upvotes: 4

Views: 15387

Answers (6)

mannujain
mannujain

Reputation: 1

Above posted solutions didn't actually work but this worked on every browse:

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

This disables previous date to be selected and limits time selection and it has been tested on a live website and on different browsers.

Upvotes: 0

benji127
benji127

Reputation: 345

Try this. You can disable 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',
            });
        });

For more Options: https://eonasdan.github.io/bootstrap-datetimepicker/Options/

Upvotes: 0

Hassam Satti
Hassam Satti

Reputation: 1

Best Way to perform this.....

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

Upvotes: 0

KevRuefi
KevRuefi

Reputation: 31

This worked for me:

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

Upvotes: 3

Thilina Ashen Gamage
Thilina Ashen Gamage

Reputation: 1735

In the bootstrap-datetimepicker.js file, the disabled hours are defined as follows;

var hoursDisabled = this.hoursDisabled || [];

If you use date and time only at one place, you can simply change this [] to [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23] in the original javascript file. But if you use date and time in several places, it is better to change the disabled hours in your html file or in a separate js file. Here's the code for that;

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

Upvotes: 0

Konservin
Konservin

Reputation: 1017

This should work:

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

and also this:

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

Because in bootstrap-datetimepicker.js:

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

Upvotes: 7

Related Questions