How to Add a Date and Time picker in Magento 2 admin form

Magento 2 date and time picker

In this code snippet, we will see how to add a date and time picker in Magento 2 admin form using UI component. We will also see how we can add only date picker and only time picker in Magento 2 admin form.

Add a date picker in Magento 2 admin form

To add a date picker in your Magento 2 admin form please add below code in your UI component form file.

<field name="from_date">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">string</item>
            <item name="label" xsi:type="string" translate="true">From Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">task</item>
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="dataScope" xsi:type="string">from_date</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="options" xsi:type="array">
                <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            /item>
        </item>
    </argument>
</field>

Add a time picker in Magento 2 admin form

<field name="start_time">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">string</item>
            <item name="label" xsi:type="string" translate="true">Start time</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">task</item>
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="dataScope" xsi:type="string">start_time</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="options" xsi:type="array">
                <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
                <item name="showsTime" xsi:type="boolean">true</item>
                <item name="timeOnly" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Add a datetime picker in Magento 2 admin form

<field name="sell_start_date">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">string</item>
            <item name="label" xsi:type="string" translate="true">Sell Start Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">task</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="dataScope" xsi:type="string">sell_start_date</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="options" xsi:type="array">
                <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
                <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
                <item name="showsTime" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Hope this code snippet helps you.To receive update about this type of code snippet, please like us on Facebook and follow us on Twitter.

Leave a Comment

(0 Comments)

All the comments are goes into moderation before approval. Irrelevant comment with links directly goes to spam. Your email address will not be published.

Was this post helpful? Please support Us!

Follow us on twitter or Like us on facebook.

 


To Avoid Spam Downloads, We Want Your Email

We will send you download link right
away. Please submit form below.
SEND ME DOWNLOAD LINK
Close

Increase Your
Magento 2
Knowledge

Get Weekly Tutorial
to your Inbox
Subscribe Me
close-link
Subscribe Here