18

I want to add new field as datetime in CMS page section while adding new page, I found that magento using UI Component for it, so after digging I could able to add the date field by using below code but not able to add datetime field. Can anybody help on it.

Code for add date field:

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

File we need to override to achieve:

vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml
30
+50

To add the dateTime picker you should use the next directive inside the xml file:

<field name="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">Go Live Start Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">21</item>
            <item name="dataScope" xsi:type="string">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>

Important thing is the showsTime option.

Result should look like this:

date-time ui element result

If you want to debug the UI element - use this command inside the browser console (on your page):

require('uiRegistry').get('index = start_date')

It returns your date element with all initial options and all possible functions:

UI element object

You can use them when you define the element (inside xml).

As additional info:

The date (also dateTime) element could be found here:

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

in the static files:

pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/js/form/element/date.js

The date-element class (object) has method prepareDateTimeFormats, where the important option showsTime is checked:

/**
 * Prepares and converts all date/time formats to be compatible
 * with moment.js library.
 */
prepareDateTimeFormats: function () {
    this.pickerDateTimeFormat = this.options.dateFormat;

    if (this.options.showsTime) {
        this.pickerDateTimeFormat += ' ' + this.options.timeFormat;
    }

    this.pickerDateTimeFormat = utils.normalizeDate(this.pickerDateTimeFormat);

    if (this.dateFormat) {
        this.inputDateFormat = this.dateFormat;
    }

    this.inputDateFormat = utils.normalizeDate(this.inputDateFormat);
    this.outputDateFormat = utils.normalizeDate(this.outputDateFormat);

    this.validationParams.dateFormat = this.outputDateFormat;
}
  • What is if I want to show only time picker? @Siarhey – Ronak Chauhan Jan 11 '17 at 6:55
  • @RonakChauhan You need another custom element because the DateTime element always renders date. – Siarhey Uchukhlebau Jan 11 '17 at 7:09
  • but how to do that? – Ronak Chauhan Jan 11 '17 at 7:10
  • @RonakChauhan You should extend the abstract UI-element and use something like .timepicker() – Siarhey Uchukhlebau Jan 11 '17 at 7:14
  • 1
    Find the solution by myself, your answer has a wrong timeFormat, we need change hh:mm:ss to HH:mm:ss in the UI Componet, otherwise 03:00:00 PM will became 03:00:00 AM, lack 12 hours and you can not save the time of PM in the database table. – Key Shang Oct 25 '17 at 8:17
2

I hope this answer gives some idea about what you miss

I added the UI component of date time field through php (it works fine)

$fieldset->addField(
        'event_date',
        'date',
        [
            'name' => 'event_date',
            'label' => __('Date'),
            'title' => __('Date'),
            'required' => true,
            'date_format' => 'yyyy-MM-dd',
            'time_format' => 'hh:mm:ss'
        ]
);

easy for your reference

compare to your xml file all values are present except date_format and time_format so you can try to set the both value in your xml file

for more details please refer this full source code

  • Can you go through "vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml" file and let me know how can I integrate the above code. – MagentoDev Aug 17 '16 at 10:32
  • How can I change source to my custom name ? What requirements are here ? – Vasilii Burlacu Nov 19 '16 at 19:31

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.