Date component

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

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:

app/code/Magento/Ui/view/base/web/js/form/element/date.js

Example

<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>
Copied to your clipboard
<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:

'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.')

      ];
Copied to your clipboard
'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.

data-validate="{'required-entry': true, 'validate-date': {dateFormat: 'MM/dd/Y'}}"
Copied to your clipboard
data-validate="{'required-entry': true, 'validate-date': {dateFormat: 'MM/dd/Y'}}"