I am using Magento 2.2.5 to create a custom EAV model.

I managed to create the form in the admin panel using UI components, based on the catalog product implementation. However, I have seen that the UI components do not support "datetime" as input type, therefore I set "date" to all my attributes.

The problems is: How can I set the date picker to include time values too (hours and minutes)? Instead of this

date picker without time

I want this

enter image description here


I hope I got your question right and you can make use of this solution.

You can make this by creating a custom js file for the datepicker. I have managed to implement this by creating a file in my module under view/adminhtml/web/js/form/element called date.js (however, the location and the naming doesn't really matter as long as it is under the web folder). Create the file and copy&paste this code:

], function(Date) {
    'use strict';

    return Date.extend({
        defaults: {
            options: {
                showsDate: true,
                showsTime: true

When creating you form field, make sure to add the path to the file to the component node. That is, if you're using XML:

<item name="component" xsi:type="string">Vendor_ComponentName/js/form/element/date</item>

If you're building your form as in the catalog (meta arrays), do the following for your datetime eav attributes:

$meta['arguments']['data']['config']['component']   = 'Vendor_ComponentName/js/form/element/date';

Try below code:

<field name="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">Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">50</item>
            <item name="dataScope" xsi:type="string">date</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.