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