6

I am using bootstrap time picker by using bootstrap-timepicker.js and i want to restrict the min-time and max-time of that timepicker .Can anyone please tell me how can i achieve it. I have used following methods but nothing gonna help me out:

 $('input[data-role="time"]').timepicker({
    showMeridian: true,
    minTime: {
    hour: 10,
    minute: 15
    },
    minuteStep: 1,
    showInputs: true,
    defaultTime: defaulttime
    })

And

$('input[data-role="time"]').timepicker({
        showMeridian: true,
        minTime: '10:15',
        minuteStep: 1,
        showInputs: true,
        defaultTime: defaulttime
        })
Siguza
  • 21,155
  • 6
  • 52
  • 89
Floki
  • 271
  • 1
  • 5
  • 15

2 Answers2

12
  1. use event changeTime,
  2. check the current time,
  3. if time is less set minimum

http://jsfiddle.net/j3kf2p2e/

$('#timepicker').timepicker({
        showMeridian: true,        
        minuteStep: 1,
        showInputs: true,        
}).on('changeTime.timepicker', function(e) {    
    var h= e.time.hours;
    var m= e.time.minutes;
    var mer= e.time.meridian;
    //convert hours into minutes
    m+=h*60;
    //10:15 = 10h*60m + 15m = 615 min
    if(mer=='AM' && m<615)
        $('#timepicker').timepicker('setTime', '10:15 AM');
  });
dm4web
  • 4,642
  • 1
  • 14
  • 20
  • This solution throws a recursion exception because calling timepicker('setTime') will trigger the 'changeTime.timepicker' event. You shouldn't be calling 'setTime' inside of the 'changeTime' callback. – foob.ar Apr 24 '18 at 18:49
  • You can call 'setTime' inside 'changeTime' as long as it has a condition on it. – David Chu Apr 27 '18 at 07:14
1

You can use the following:eg if mindate is at 8.00 and maxdate is at 2300hrs

    minDate: moment({h:8}),
    maxDate: moment({h:23}),

that is...

$('#time').bootstrapMaterialDatePicker({
    format: 'HH:mm',
    minDate: moment({h:8}),
    maxDate: moment({h:23}),
    clearButton: true,
    date: false
});
Kelvline
  • 11
  • 1