PHP 7.3 reached end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

Date component

The Date component implements a custom date input field. It uses a date picker implementation provided by the calendar widget.

Configuration options

Option Description Type Default
component The path to the component’s .js file in terms of RequireJS. String 'Magento_Ui/js/form/element/date'
elementTmpl The path to the .html template of the particular field type component (date). String 'ui/form/element/date'
options The configuration object that is passed to the calendar widget. Object {}
inputDateFormat Format of the date received from the server (ICU Date Format). Used only in date picker mode (this.options.showsTime == false). String 'y-MM-dd'
outputDateFormat Format of the date sent to the server (ICU Date Format). Used only in date picker mode (this.options.showsTime == false) String 'MM/dd/y'
pickerDateTimeFormat Date/time format that is used to display date in the input field. String ''
shiftedValue Date/time value shifted to corresponding time zone, according to this.storeTimeZone property. This value is sent to the server. String ''
storeTimeZone The timezone used. String 'UTC'
template The path to the general field .html template. String 'ui/form/field'
timezoneFormat Timezone format, required for the moment.js library for conversion. String YYYY-MM-DD HH:mm

Source files

Extends Abstract:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form>
    ...
    <fieldset>
        ...
        <field name="date_example" formElement="date">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">some_source</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="validate-date" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Date Example</label>
                <visible>true</visible>
                <dataScope>some_scope</dataScope>
            </settings>
        </field>
        ...
    </fieldset>
    ...
</form>

Validation

The validate-date initialization rule that describes the required dateFormat parameter should be specified:

1
2
3
4
5
6
7
8
9
  'validate-date': [
            function (value, params, additionalParams) {
                var test = moment(value, utils.convertToMomentFormat(additionalParams.dateFormat));

                return $.mage.isEmptyNoTrim(value) || test.isValid();
            },
            $.mage.__('Please enter a valid date.')

        ];

The following shows how to add date validation using a calendar widget as an example.

1
  data-validate="{'required-entry': true, 'validate-date': {dateFormat: 'MM/dd/Y'}}"

Result

Date Component Example Date Component Expanded Example