# Css to change datepicker calender to be mon-\>sun instead of sun-\>sat

**URL:** <https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 19, 2021, 1:42pm UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943 "2021-07-19T13:42:40Z")\
**Posts on this page:** 1\
**Showing post:** 1

<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:** [July 19, 2021, 1:42pm UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/1 "2021-07-19T13:42:41Z")

</div>

For those who want it, here is the magic! its not perfect but eh:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/0/a0fb6982166eb02ed4ce333497c28dc677c535b5.png)  
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: 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; }`

this also works for the other datepicker  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/a/7aed6351924495a02d3836a15f8008afb8863207.png)

(or for injection in a style class)

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

`} .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; }{`

---

_[View the full topic](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943)._