1

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?

2 Answers 2

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>
1
  • I have added a datetime picker when i select today date and time save it it show random date ( 2191-04-05 00:00:00) With 00 in time field in DB May 22, 2020 at 12:02
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.