Date picker - First day of week

[Vidar_Hetlelid]

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?

[Transistor]

I'm afraid not. See,

DateTime Input and DateTime Picker start from Monday

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

Please add the ability to style calendar dates within the Datetime picker component. E.g. the coloured "16" below. [image] E.g. something like this: [image]

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

[Felipe_CRM]

@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

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

[victordcq]

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

@victordcq

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