1

How to set the width of input where I use DateTime picker?

There is a question, which I have reviewed, but it looks like there are no issues.

Magento 2 - How to add the DateTime UI Component

Magento 2 - Date input with time picker

In my case, I tried different ways to change width of input, where is inserted date and time from DateTime picker, but it is not good.

 <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">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">50</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>

enter image description here enter image description here

poojan sharma
  • 1,564
  • 1
  • 9
  • 16
Yury Adamovich
  • 11
  • 2

1 Answers1

1

You can add a custom class for the specific input field and set CSS for it.

In you <item name="config" xsi:type="array"> add the below code to add css class

<item name="additionalClasses" xsi:type="array">
    <item name="admin__field-my-class" xsi:type="boolean">true</item>
</item>

now you can add the style to the class.

Hope this help!

Technocracker
  • 1,997
  • 1
  • 14
  • 26
  • Thank you @Technocracker It works when I add the following css code:

    .admin__field-datetime input { width: 180px !important; }

    Really, it helps, but look a little bit hackly. It is unfortunate that there is no more beautiful solution.

     – Yury Adamovich Mar 22 '20 at 17:39