Does anyone know how to restrict past day selection in magento 2 date picker using JS mixing.

This is the frontend HTML Block That We Copied from the browser.

<input class="input-text _has-datepicker" type="text" data-bind="
hasFocus: focused,
datepicker: { storage: value, options: options },
attr: {
    id: uid,
    value: value,
    name: inputName,
    placeholder: placeholder,
    'aria-describedby': getDescriptionId(),
    'aria-required': required,
    'aria-invalid': error() ? true : 'false',
    disabled: disabled
}" id="OA2254" value="" name="oa_date" aria-required="true" aria-invalid="false" autocomplete="on">

1 Answer 1


You can restrict date range with pass correct options to Date component and you don't need to create any additional mixins.

You need to pass minDate with value like new Date()

Example with XML:

                    <item name="options" xsi:type="array">
                        <!-- ... -->
                        <item name="minDate" xsi:type="string">new Date()</item>

See all available options in https://api.jqueryui.com/datepicker/

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.