Magento 2 DateTime picker - Limit time selection range

Question

I am using a datetimepicker on my frontend form with below code. I want to limit time selection between range 09:00 to 17:30

<input name="datetime_field" id="datetime_field" readonly title="Appointment Date" value="" placeholder="Date & Time" class="input-text" type="text" data-validate="{required:true}">

script for datetimepicker,

<script>
    require([
        "jquery",
        "mage/calendar"
    ], function ($) {
        var minHour = 9;
        var maxHour = 17;
        $("#datetime_field").calendar({
            showsTime: true,
            hideIfNoPrevNext: true,
            buttonText: "<?php echo __('Select Date') ?>",
            hourMin: minHour,
            hourMax: maxHour,
        });
    });
</script>

I used minHour and maxHour which limits time selection between 09:00 to 17:59. How can I limit it to 17:30?

Answer 1

The timepicker uses jquery-ui-timepicker-addon.js. In the latest version 1.6.3, which can be found here, you can specify minTime and maxTime settings.

You can override Magento's default js file (if it's not the latest) with the latest version and your code would be like:

<script>
    require([
        "jquery",
        "mage/calendar"
    ], function ($) {        
        $("#datetime_field").calendar({
            showsTime: true,
            hideIfNoPrevNext: true,
            buttonText: "<?php echo __('Select Date') ?>",
            minTime: '9:00 am',
            maxTime: '5:30 pm'
        });
    });
</script>

Answer 2

-> it will show am/pm 12 hour format and min and max hour

<input type="text" name="datetimepicker" id="datetimepicker" value="" class="datetimepicker">
    <script>
    require([
        'jquery',
        'mage/calendar'
    ], function($){
        $('#datetimepicker').datetimepicker({
            minDate: new Date(),
            beforeShowDay: $.datepicker.noWeekends,
            showsTime: true,
            showHour: true,
            showMinute: true,
            timeFormat: 'hh:mm tt',
            dateFormat: 'dd-mm-yy,',
            hourMin: 9,
            hourMax: 17,
            stepMinute : 5,
        });
    });
    </script>