# Increase the size of the date time picker

**URL:** <https://forum.inductiveautomation.com/t/increase-the-size-of-the-date-time-picker/101184>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 21, 2025, 5:20pm UTC](https://forum.inductiveautomation.com/t/increase-the-size-of-the-date-time-picker/101184 "2025-01-21T17:20:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sagar\_shetty](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@sagar\_shetty](https://forum.inductiveautomation.com/u/sagar_shetty)\
**Post date:** [January 21, 2025, 5:20pm UTC](https://forum.inductiveautomation.com/t/increase-the-size-of-the-date-time-picker/101184/1 "2025-01-21T17:20:53Z")

</div>

Is there a way to increase the size of the date time picker that pops up when selecting the DateTimeInput component in perspective. Currently on a touch screen display it makes it very hard not accidently pressing the wrong button due to the size of the pop up.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6d77fdaade45c226151c78845efcd0987f3a4de8.png)

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [January 21, 2025, 7:20pm UTC](https://forum.inductiveautomation.com/t/increase-the-size-of-the-date-time-picker/101184/2 "2025-01-21T19:20:21Z")

</div>

Yes, I've had the same problem and solved it with a scale transform  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/e/7e7e6592c7d04085eeab3c15a3509fb73e787229.png)

---

<div class="post-metadata">

**Author:** ![sagar\_shetty](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@sagar\_shetty](https://forum.inductiveautomation.com/u/sagar_shetty)\
**Post date:** [January 21, 2025, 11:50pm UTC](https://forum.inductiveautomation.com/t/increase-the-size-of-the-date-time-picker/101184/3 "2025-01-21T23:50:44Z")

</div>

Thank you, this works

However the issue I see is if the pop up is too large where it cannot be displayed next to the datetimeinput component it defaults to the centre of the screen where it retains its 1x scale size

---

<div class="post-metadata">

**Author:** ![MMaynard](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmaynard/32/3366_2.png) [@MMaynard](https://forum.inductiveautomation.com/u/MMaynard)\
**Post date:** [January 22, 2025, 12:55pm UTC](https://forum.inductiveautomation.com/t/increase-the-size-of-the-date-time-picker/101184/4 "2025-01-22T12:55:17Z")

</div>

Okay take it easy with the vision guy here but..  
How would you add that modalStyle to the calendar component in Perspective?

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [January 22, 2025, 1:14pm UTC](https://forum.inductiveautomation.com/t/increase-the-size-of-the-date-time-picker/101184/5 "2025-01-22T13:14:32Z")

</div>

> [@MMaynard](#):
>
> calendar component in Perspective?

Calendar component? Do you mean [DateTimePicker](https://docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-input-palette/perspective-datetime-picker)?

You can add the transform under the component's style prop

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/2/32c453db98d85b92155de0c2b711b74b4d8a21ee.png)

---

<div class="post-metadata">

**Author:** ![MMaynard](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmaynard/32/3366_2.png) [@MMaynard](https://forum.inductiveautomation.com/u/MMaynard)\
**Post date:** [January 22, 2025, 1:20pm UTC](https://forum.inductiveautomation.com/t/increase-the-size-of-the-date-time-picker/101184/6 "2025-01-22T13:20:19Z")

</div>

Yeah sorry, meant the datetimepicker.  
Well that was surprisingly simple..

I saw in your earlier post it said modalStyle and I could not for the life of me figure out where that came from..

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [January 22, 2025, 1:29pm UTC](https://forum.inductiveautomation.com/t/increase-the-size-of-the-date-time-picker/101184/7 "2025-01-22T13:29:01Z")

</div>

For the DateTimeInput component, I only wanted to scale the modal popup, not the entire component. Hence using the `modalStyle` instead of `style`