0

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?

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>
| improve this answer | |
  • 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 – Vinit Kumar May 22 at 12:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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