I want to show timepicker in my UiComponent form

As Magento Docs show the variations they provide timepicker : enter image description here

I want this using UiComponent in my form.

Note : Need to show schedule time so no date needed.

Checked reference :How to add time range picker to adminhtml form in Magento 2? (But its using block, I want using UiComponent)


You need to "create"* your own UI Component. You can do this by extending the Date UI Component.

#1 Add the XML to your form

Add the field to the fieldset. In this example, the component that we will be creating is called time. Note that you can declare a template in the following XML. However, it won't really do any good as it is the XHTML template that will wrap the Knockout template that does the actual rendering. There are other nodes you can declare here like validation.

<field name="time_field">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Time</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="dataScope" xsi:type="string">time_field</item>
            <item name="component" xsi:type="string">Your_Module/js/form/element/time</item>

#2 Create the UI Component

// app/code/Your/Module/view/adminhtml/web/js/form/element/time.js

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

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

            elementTmpl: 'ui/form/element/date'

A few notes on the above Javascript:

elementTmpl is not necessary. However, if you want to customize the template (currently module-ui/view/base/web/templates/form/element/date.html), just create your own template and reference it with elementTmpl.

There are more options for the input. You can find more about them: http://trentrichardson.com/examples/timepicker/#tp-options. In the code, there is a list of all defaults here: /lib/web/jquery/jquery-ui-timepicker-addon.js

End Result:


  • At this point, I don't believe it is possible to declare your own UI Component in a way similar to that of definitions.xml. However, you can extend them with minimal effort. (And, if there is a way, please let me know).
| improve this answer | |
  • 1
    @John, UI Components do not exist in Magento 1. But it is Magento <= 2.1. Magento 2.2 introduced some changes to the schema expectations. Perhaps I'll be able to add a note regarding that, but if you determine the Magento 2.2 schema, please post. – bassplayer7 Apr 9 '18 at 17:25

You can just use this xml code for the same result as above:

<field name="opening_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">Opening time</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">70</item>
            <item name="dataScope" xsi:type="string">opening_time</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>
                <item name="timeOnly" xsi:type="boolean">true</item>

Result: enter image description here

| improve this answer | |

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.