Magento 2 How to add only time-picker admin form field using UI form component

[Patel_Chirag]

I want to show only  Timepicker in Ui Component Form. and how to give time format to field.

suppose i want to give format 08:10 AM and also store value to data base as same format.

I am able to show time picker but but no idea about how to give format.

Any help would be appreciated! Thanks.

[chandni_pandya]

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>

You should look after showsTime option.

To debug the UI element - use this command inside the browser console:

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

[Patel_Chirag]

@chandni_pandya thanks for your replay.

I try & review your post as i mentioned in my question i am able to show time field but i can not give format to time field.

suppose i want to give format 08:10 AM and also store value to data base as same format.

How can i achieve this?

[Ravi Dudhara]

Admin Form UI Component 

<field name="schedule_date_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">Schedule Date/Time</item>
         <item name="formElement" xsi:type="string">date</item>
         <item name="source" xsi:type="string">Template</item>
         <item name="dataScope" xsi:type="string">schedule_date_time</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</item>
            <item name="showsTime" xsi:type="boolean">true</item>
         </item>
      </item>
   </argument>
</field>

[nikunjrathod123]

<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</item>
                    <item name="formElement" xsi:type="string">date</item>
                    <item name="source" xsi:type="string">sales_rule</item>                    
                    <item name="dataScope" xsi:type="string">from_date</item>                    
                    <item name="options" xsi:type="array">
                        <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>                        
                        <item name="showsTime" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="validate-optional-datetime" xsi:type="boolean">true</rule>
                </validation>
            </settings>
        </field>

This code works for me.

[Baharuni Asif]

you can achieve this functionality below code.

UI component form in xml file like custom_form.xml:

<field name="your_field_id">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="class" xsi:type="string">{Vendorname}\{Modulename}\Ui\Component\Form\Element\Input</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">End Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">customer</item>
            <item name="sortOrder" xsi:type="number">89</item>                  
           <item name="dataScope" xsi:type="string">your_field_id</item>
           <item name="notice" xsi:type="string" translate="true">Enter the Account Removed Date of Customer(mm/dd/yyyy)</item>
            
        </item>
    </argument>
</field>  

Create file In `{Vendorname}\{Modulename}\Ui\Component\Form\Element\Input.php`

And add the logic in element Input.php file

<?php

namespace {Vendorname}\{Modulename}\Ui\Component\Form\Element;

class Input extends \Magento\Ui\Component\Form\Element\Input
{
    /**
     * Prepare component configuration
     *
     * @return void
     */
    public function prepare()
    {
        parent::prepare();

        $config = $this->getData('config');

        if(isset($config['dataScope']) && $config['dataScope']=='your_field_id'){
            $config['default']= date('Y-m-d', strtotime('+3 years'));
            $this->setData('config', (array)$config);
        }
    }
}

Please check and let know.