Magento Date Range Picker on CMS page

You can set a specific min and max date range for the calendar, such as restricting the selection to 28-10-2025 till 31-10-2025, you can easily do this by configuring the minDate and maxDate properties.

<div class="form-group">
    <label for="from-date"><span><?php echo __('Event Date') ?>:</span></label>
    <div class="field dateranges">
        <input class="input-text required-entry" type="text" id="from-date" name="from-date" />
        <span style="padding: 10px; 0px;">&dash;</span>
        <input class="input-text required-entry" type="text" id="to-date" name="to-date" />
    </div>
</div>

<script type="text/javascript">
    require(["jquery", "mage/calendar"], function($) {
        // Initialize the Start Date picker
        $("#from-date").calendar({
            dateFormat: 'yyyy-MM-dd',
            minDate: new Date('2025-10-28'),
            maxDate: new Date('2025-10-31'),
            onSelect: function(selectedDate) {
                var startDate = $(this).calendar("option", "selectedDate");
                $("#to-date").calendar("option", "minDate", new Date(startDate));
            }
        });

        // Initialize the End Date picker
        $("#to-date").calendar({
            dateFormat: 'yyyy-MM-dd',
            minDate: new Date('2025-10-28'),
            maxDate: new Date('2025-10-31'),
            onSelect: function(selectedDate) {
                var endDate = $(this).calendar("option", "selectedDate");
                $("#from-date").calendar("option", "maxDate", new Date(endDate));
            }
        });
    });
</script>

Output: