# Change size ui-form date (datepicker)

**URL:** <https://discourse.nodered.org/t/change-size-ui-form-date-datepicker/34906>\
**Category:** Dashboard\
**Created:** [27 October 2020 19:30 UTC](https://discourse.nodered.org/t/change-size-ui-form-date-datepicker/34906 "2020-10-27T19:30:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)\
**Post date:** [27 October 2020 19:30 UTC](https://discourse.nodered.org/t/change-size-ui-form-date-datepicker/34906/1 "2020-10-27T19:30:35Z")

</div>

Hello

Is it possible to change the size of the settings [blue on picture] when choosing a date? I'm using 'ui-form' on a large touchscreen. I can change the global text size, but not the 'dropdowns' in the date picker.

Incidentally, it is not possible to 'type' the date via the touscreen (Windows 10, in tablet mode). If typing is possible, it is not necessary to increase the size of the datepicker. As it is currently not possible to type a date (via touscreen, tablet mode), is it possible to hide the field, and only show the 'calendar icon' [red on picture]? Or automatically open the datepicker when trying to type the date?

Note that I currently make the adjustments through a fixed PC, and not through the touchscreen.

Thank you in advance

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/b/8b4c94b2c69fe700dde27577b2c9c61e4d9d60b6.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [27 October 2020 20:17 UTC](https://discourse.nodered.org/t/change-size-ui-form-date-datepicker/34906/2 "2020-10-27T20:17:36Z")

</div>

Which exact widget is that ? the built in datepicker looks like

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/750c92d94c82ffe3f7db6859d3a38b9dac99a5a8.png)

If that is a text input in date mode then the css needs to be styled via the virtualdom as how that is rendered is browser dependant.

---

<div class="post-metadata">

**Author:** ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)\
**Post date:** [27 October 2020 20:26 UTC](https://discourse.nodered.org/t/change-size-ui-form-date-datepicker/34906/3 "2020-10-27T20:26:20Z")

</div>

Thx for your answer.  
At this moment I'm using 'UI Form Node', where I'm using 'date'.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f16f5512e5a6440e8e4692576aebd782fd75803a.png)

.  
.  
I could indeed also use 'datepicker' (what you suggest). But the date is a required item. Is it possible to also set the datepicker as required?

Edit:  
An other solution could be 3 input fields, where I ask for day, month and year. But I will need to restrict the fields (example: month = number from 1 to 12).

* * *

Edit:  
For now, I'm gonna use 3 dropdown items (day,month, year). This solves my problem 🙂  
A function checks if the values aren't '0' (I set them as '0' on load). When okay --\> I can press a button to go to the next screen.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 November 2020 20:26 UTC](https://discourse.nodered.org/t/change-size-ui-form-date-datepicker/34906/4 "2020-11-10T20:26:31Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.