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

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!

1
  • 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

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.