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

victordcq · July 19, 2021, 1:42pm

For those who want it, here is the magic! its not perfect but eh:

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

(or for injection in a style class)

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

michal.koblasa · November 4, 2021, 9:51am

Thank you for this, I used it.
I have also modified the popup datepicker, to be 2x bigger for the touchscreen interaction.

thidalgo · November 6, 2022, 10:51am

Hello, It didn't work for me. What is the theme file to modify ? what is the component propertie to modify to do it in a style class ? does it work for Ignition 8.1.18 ? Thanks !

Transistor · November 6, 2022, 3:19pm

What didn't work for you? What did you try? Did you modify <theme>.css?

thidalgo · November 6, 2022, 4:46pm

First I tried adding the code to the file of my theme: "common/date-range-picker.css" since I didn't know very well what file you refer whem typing .css. It didn work after restar Ignition.

Aftewards I tried to do it adding background-image properties to the date picker control as you indicate (look at the image) but it didn't work either:

victordcq · November 7, 2022, 7:59am

The image is showing a style class. Not the style properties.
It's a lot easier to add in css in the newest version

louagejasper · November 7, 2022, 12:13pm

That's useful! Thanks Victor!

thidalgo · November 8, 2022, 9:21am

It Worked !!! Awesome, great job !

prasath.t · February 28, 2024, 3:48pm

Hi @victordcq

Did you manage to find any solution for choosing start date and end date in single date calendar

This feature only available in power chart

Did you crack anything?

victordcq · February 28, 2024, 3:55pm

This does not seem to be related to this post, where was the original question for this? plz post there

Transistor · February 28, 2024, 3:55pm

See what's going on in this thread:

Matt_Giesbrecht · June 25, 2024, 12:34am

Hi @victordcq - been reading a lot of your posts lately, thanks for all your contributions.

Starting recently (not exactly sure when), the code above is causing the body of the calendar to be offset from the month/date selector. Has anyone else seen this? Any fixes for it?

Also, with this code, the month of June displays 7 weeks, which forces scrollbars on the component. Any ideas how to get around this?

Code included below for completeness, but it is a literal copy/paste of what has been posted above.

.ia_DateRangePicker .calendarBar { grid-template-columns: none; } 
    .calendarBar > div:nth-child(1) { grid-area: 1/8/1/8 !important; } 
    .ia_DateRangePicker .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;}
    .ia_TimePickerInput--wrapper{ margin-top: 30px; }

victordcq · June 25, 2024, 7:20am

Hehe welcome to the depths of css

The code you provided is not the same as mine, my css does not have this offset.

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

Gitting rid of the extra week is not possible in css...
Well it can if its a filler, but not if day one of the month is sunday

And while its possible to fix the height with css, it might just be safer to give the component a heigher standard size from the beginning, so that the sudden increase doesnt affect other components

victordcq · June 25, 2024, 7:33am

this is wrong, there is not _ here
same as here

ia naming convention is not really consistent sometimes

Chris_Murphy · May 14, 2025, 3:27am

Bringing this back from the dead to post a complete solution with no scrollbar.
We have used this for ages (Thanks heaps @victordcq)

To remove the scrollbar, you can just override the height property of .iaDateRangePicker to auto.
It's set to a fixed height by default so it can't handle the extra row.

As this is a popup, it won't mess with your page when it grows. It works with just date or date and time. There's a bit of blank space but it's acceptable IMO.

It would be nice if this component could have this feature added.
Maybe a gateway checkbox that says, "I'm not in the USA" so all the default date formats are set sensibly and this control works properly

UPDATE. fix day header alignment.

/*Change date time picker to start on a monday, this is a total hack*/
.iaDateRangePicker{	height: auto;}
.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; }

victordcq · May 14, 2025, 6:37am

In your screenshot the headers (Mo,Tu..) are not lined up correctly, any idea why?

xD

Btw since than, there is a new css feature ":has" which can probably hide the access date row on top.
I might look into it next week if i got time

Chris_Murphy · May 14, 2025, 7:07am

Good pickup, I don't know how I missed that.
The calendarBar needs grid-template-columns set to none.

I've edited my post with the corrected css.

Thanks again.

victordcq · May 14, 2025, 9:39am

ah, just forgot to copy the first line.
no problem