Magento 2: Show Calendar/DatePicker & Date-Range Field in Custom Form

This article shows how you can add a calendar or date-picker field in any custom form in Magento 2.

I will be showing three different ways of adding date picker in the template file (.phtml) in Magento 2.

1) using calendar widget
2) using datepicker widget
3) using datetimepicker widget

I will also show how you can add date-range in your custom form.

Showing date-picker field

First of all, let see our input field code. The date field is named as my-date.

<input type="text" 
    class="input-text required-entry hasDatepicker" 
    id="my-date" 
    name="my-date"
    aria-required="true" />

Now, we can simply add the Javascript code after the form end tag.

1) Using calendar widget

<script>
require([
    'jquery',
    'mage/mage',
    'mage/calendar'
], function($){
    $('#my-date').calendar({
        // show date
        changeYear: true,
        changeMonth: true,
        yearRange: '1970:2050',
        buttonText: 'Select Date',
        
        // show time as well
        timeInput: true,
        timeFormat: 'HH:mm:ss',
        showsTime: true
    });
});
</script>

2) Using datepicker widget

<script>
require([
    'jquery',
    'mage/mage',
    'mage/calendar'
], function($){
    $('#my-date').datepicker({
        dateFormat: 'd/m/yy',
        changeMonth: true,
        changeYear: true
    });
});
</script>

3) Using datetimepicker widget

<script>
require([
    'jquery',
    'mage/mage',
    'mage/calendar'
], function($){
    $('#my-date').datetimepicker({
        dateFormat: 'd/m/yy',
        timeFormat: 'HH:mm:ss',
        changeMonth: true,
        changeYear: true,
        showsTime: true
    });
});
</script>

Showing date-range fields

To show date-range fields, first of all, we need to add two fields for date-range, i.e. from-date and to-date input text fields.

<div class="field overview required" id="date-range">
    <label for="from" class="label">
        <span>From date</span>
    </label>
    <div class="control">
        <input class="input-text required-entry"
            type="text"
            id="date-from"
            name="from" />
    </div>

    <label for="to" class="label">
        <span>To date</span>
    </label>
    <div class="control">
        <input class="input-text required-entry"
            type="text"
            id="date-to"
            name="to" />
    </div>
</div>

After the from and to date fields are defined in the form, we can then write the following javascript code at the end of the file, i.e. after the form tag ends.

<script>
require([
    'jquery',
    'mage/mage',
    'mage/calendar'
], function($){
    $('#date-range').dateRange({
        buttonText: 'Select Date',
        from: {
            id: 'date-from'
        },
        to: {
            id: 'date-to'
        }
    });
});
</script>

The calendar/date-picker JS file is present in the file: lib/web/mage/calendar.js inside your Magento folder. You can look into that file to find out more options that can be added to the calendar/date-picker.

Hope this helps. Thanks.