1

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

Muhammad Anas
  • 1,467
  • 3
  • 12
  • 33
Sergiu Abrudean
  • 13
  • 4

2 Answers2

1

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>
            <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>
Himmat Paliwal
  • 1,742
  • 14
  • 25
1

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:

define([
    'Magento_Ui/js/form/element/date'
], 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';
Rares M
  • 26
  • 2