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

Ignition
1

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: 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

(or for injection in a style class)

image
image821×499 27.3 KB

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

5 Likes
2

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

1 Like
3

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 !

4

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

5

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:

image
image456×555 28.4 KB

6

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

7

That's useful! Thanks Victor!

1 Like
8

It Worked !!! Awesome, great job !

1 Like
9

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?

10

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

1 Like
11

See what's going on in this thread:

1 Like