unable to change minTime of datetimepicker

Viewed 115
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha512-f0tzWhCwVFS3WeYaofoLWkTP62ObhewQ1EZn65oSYDZUg1+CyywGKkWzm8BxaJj5HGKI72PnMH9jYyIFz+GH7g==" crossorigin="anonymous" />

<h1>date</h1>

<input type="text" name="input_time" id="input_time">


<script>

$('#input_time').datetimepicker({
    format:'h:i A',
    validateOnBlur: false,              
    formatTime: 'h:i A',
    step: 15 ,
    datepicker:false
})
$('#input_time').datetimepicker('option', 'minTime','6:00 PM' );

</script>

I wanted to change minimum time of a datetimepicker dynamically. but nothing seems to work

1 Answers

The pattern you're using to update the plugin options after initialization is for jQueryUI components.

For the DateTimePicker library you need to use the setOptions method, like this:

$('#input_time').datetimepicker({
  format: 'h:i A',
  validateOnBlur: false,
  formatTime: 'h:i A',
  step: 15,
  datepicker: false
})
$('#input_time').datetimepicker('setOptions', { minTime: '18:00' });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha512-f0tzWhCwVFS3WeYaofoLWkTP62ObhewQ1EZn65oSYDZUg1+CyywGKkWzm8BxaJj5HGKI72PnMH9jYyIFz+GH7g==" crossorigin="anonymous"
/>

<h1>date</h1>
<input type="text" name="input_time" id="input_time">

Note that I used a 24 hour time format in this example as there appears to be a bug to do with daylight savings/UTC interpretation in the library when you set 6:00 PM it shows 5:00 PM as the minimum for my locale.

Related