Change Datepicker header and add Calendar week


Topic: Change Datepicker header and add Calendar week

DerLino pro premium asked 3 months ago

Hello,

I'm coding actually at a dashboard for my family and I would add a calendar. But I would change the language completely to German but I can't, because the header shows the picked date in a weird format and at the top stands "SELECT DATE" and I would change the background colour from blue to black. I would also add the calendar week in the picker. (https://www.directupload.net/file/d/5820/na8fx9oh_png.htm)

I would be happy if you could help me :D

Best wishes Lino


Grzegorz Bujański staff commented 3 months ago

Hi. To change background color just overwrite it in your css: .picker__box .picker__header .picker__date-display { background-color: black; }. Regarding the text 'select date' we will check and fix it.


DerLino pro premium commented 3 months ago

Ok, thank you. But what is with the calendar week? Can I add a calendar week to the datepicker or not?


Grzegorz Bujański staff commented 3 months ago

What do you mean? It's about showing which week of the year it is?


DerLino pro premium commented 3 months ago

Yes, I mean the week of the year :) In Germany we say Kalenderwoche (KW)


Grzegorz Bujański staff commented 3 months ago

I'm sorry but there is no such functionality at the moment. I will add it to our list of ideas and maybe one day we will add this option.


purchase@cebicon.de pro premium answered 2 months ago

As Lino correctly stated, the current formatting (e.g. "Mo, Jun 22") in the header is extremely weird -- not to say completely unusable for German speaking users (who would expect "Mo, 22. Jun"). I think it is quite strange that you can localize almost every component of the date picker, but not the header. The best solution for me now is to hide the complete header with a custom css rule:

picker__box .picker__header .picker__date-display
{
  display: none;
}

But I cannot say that I am satisfied with this behaviour. IMHO there should be a formatting option to define the header date. And the "SELECT DATE" is missing a localization rule, of course.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: 4.18.0
  • Device: Computer
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags