Magento – Magento 2 – time picker on backend (xml form)

adminformdatepickermagento2

I need to to have only time picked in the form. I have a field

<field name="open">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Tuesday</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">somesource</item>
            <item name="dataScope" xsi:type="string">open</item>
            <item name="options" xsi:type="array">
                <item name="showsTime" xsi:type="boolean">true</item>
                <item name="timeOnly" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

hours and minuts scroll bars doesnt work properly for me. How to make the datepicked to show only time? Or how to make a field that saves time only

Best Answer

Ciemin, try this code:

<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>
            <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="timeOnly" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Result:

Related Solutions

Magento Adminhtml – Date Picker on Custom Page (Non-Form)

So date fields are added using Varien_Data_Form_Element_Date. What you could do would be to look into this file and check the function getElementHtml this is where the "magic" happens.

You should be able to call something like new Varien_Data_Form_Element_Date($config) where $config is the array used on the call to addElement.

Note this is untested but "should" work

$element = new Varien_Data_Form_Element_Date(
    array(
        'name' => 'date',
        'label' => Mage::helper('your_module_name')->__('Date'),
        'after_element_html' => '<small>Comments</small>',
        'tabindex' => 1,
        'image' => $this->getSkinUrl('images/grid-cal.gif'),
        'format' => Mage::app()->getLocale()->getDateFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT),
        'value' => date(
            Mage::app()->getLocale()->getDateStrFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT),
            strtotime('next weekday')
        )
    )
);
$element->setId('date');
$element->getElementHtml(); // this should now give you all the html that you could need

Magento2 – How to Add Datetime Picker in System.xml

You should use the datetimepicker like this:

$html .= '<script type="text/javascript">
        require(["jquery", "jquery/ui"], function (jq) {
            jq(document).ready(function () {
                jq("#' . $element->getHtmlId() . '").datetimepicker( { dateFormat: "dd/mm/yy" } );
                jq(".ui-datepicker-trigger").removeAttr("style");
                jq(".ui-datepicker-trigger").click(function(){
                    jq("#' . $element->getHtmlId() . '").focus();
                });
            });
        });
        </script>';
// return datetime picker element

Result:

Best Answer

Related Solutions

Magento Adminhtml – Date Picker on Custom Page (Non-Form)

Magento2 – How to Add Datetime Picker in System.xml

Related Topic