# Date picker - First day of week

**URL:** <https://forum.inductiveautomation.com/t/date-picker-first-day-of-week/80828>\
**Category:** Maker\
**Tags:** perspective\
**Created:** [October 23, 2023, 1:07am UTC](https://forum.inductiveautomation.com/t/date-picker-first-day-of-week/80828 "2023-10-23T01:07:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vidar\_Hetlelid](https://avatars.discourse-cdn.com/v4/letter/v/dfb087/32.png) [@Vidar\_Hetlelid](https://forum.inductiveautomation.com/u/Vidar_Hetlelid)\
**Post date:** [October 23, 2023, 1:07am UTC](https://forum.inductiveautomation.com/t/date-picker-first-day-of-week/80828/1 "2023-10-23T01:07:07Z")

</div>

Hello,

Ive added a date picker in my project. But when selecting date, sunday is the first day. Is it possible to change it to monday?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/f/af8e2c92acdf0e3628e0dcf47b9449c66efa225c.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 23, 2023, 2:22am UTC](https://forum.inductiveautomation.com/t/date-picker-first-day-of-week/80828/2 "2023-10-23T02:22:00Z")

</div>

I'm afraid not. See,

> [@DateTime Input and DateTime Picker start from Monday](https://forum.inductiveautomation.com/t/datetime-input-and-datetime-picker-start-from-monday/67323):
>
> I need the week in the dateTime Picker and dateTime Imput components to start with Monday. At the moment it starts on Sunday, is there any way to change it? [image] I need this: [image] Thangs for the advice

and

> [@\[FEATURE\] Allow styling dates in the datetime picker calendar component](https://forum.inductiveautomation.com/t/feature-allow-styling-dates-in-the-datetime-picker-calendar-component/79132):
>
> Please add the ability to style calendar dates within the Datetime picker component. E.g. the coloured "16" below. E.g. something like this:

There is a thread somewhere where some folks tried to be clever with CSS but it was not worth the trouble.

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [October 23, 2023, 1:41pm UTC](https://forum.inductiveautomation.com/t/date-picker-first-day-of-week/80828/3 "2023-10-23T13:41:02Z")

</div>

> [@Transistor](#):
>
> thread somewhere where some folks tried to be clever with CSS

There is this, YMMV:

> [@Css to change datepicker calender to be mon-\>sun instead of sun-\>sat](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943):
>
> For those who want it, here is the magic! its not perfect but eh: [image] for theme.css .iaDateRangePicker .calendarBar { grid-template-columns: none; } .calendarBar \> div:nth-child(1) { grid-area: 1/8/1/8 !important; } .iaDateRangePicker .calendar{grid-template-columns: none;} .calendar \> div[style$="2;"]{ grid-column-start: 8 !important; grid-column-end: 8 !important;}.calendar \> div[style^="grid-area: 1"]{ grid-row-start: 2 !important;}.calendar \> div[style^="grid-area: 2"]{ grid-row-start…

EDIT: changed to direct link to thread

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 23, 2023, 2:34pm UTC](https://forum.inductiveautomation.com/t/date-picker-first-day-of-week/80828/4 "2023-10-23T14:34:53Z")

</div>

Well with the stylesheet.css addition, you just gotta copy past this into it, not a lot of trouble anymore 😛  
That is, if it still works becuase other changes since then might have broken this very fragile css workaround xd If so i can take another look at it again

> [@Css to change datepicker calender to be mon-\>sun instead of sun-\>sat](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/1):
>
> .iaDateRangePicker .calendarBar { grid-template-columns: none; } .calendarBar \> div:nth-child(1) { grid-area: 1/8/1/8 !important; } .iaDateRangePicker .calendar{grid-template-columns: none;} .calendar \> div[style$="2;"]{ grid-column-start: 8 !important; grid-column-end: 8 !important;}.calendar \> div[style^="grid-area: 1"]{ grid-row-start: 2 !important;}.calendar \> div[style^="grid-area: 2"]{ grid-row-start: 3 !important;}.calendar \> div[style^="grid-area: 3"]{ grid-row-start: 4 !important;}.calendar \> div[style^="grid-area: 4"]{ grid-row-start: 5 !important;}.calendar \> div[style^="grid-area: 5"]{ grid-row-start: 6 !important;}.calendar \> div[style^="grid-area: 6"]{ grid-row-start: 7 !important;} .calendar \> div[style$="2;"][style^="grid-area: 1"]{ grid-row-start: 1 !important;}.calendar \> div[style$="2;"][style^="grid-area: 2"]{ grid-row-start: 2 !important;}.calendar \> div[style$="2;"][style^="grid-area: 3"]{ grid-row-start: 3 !important;}.calendar \> div[style$="2;"][style^="grid-area: 4"]{ grid-row-start: 4 !important;}.calendar \> div[style$="2;"][style^="grid-area: 5"]{ grid-row-start: 5 !important;}.calendar \> div[style$="2;"][style^="grid-area: 6"]{ grid-row-start: 6 !important;} .iaTimePickerInput--wrapper{ margin-top: 30px; }