Topic: Change Datepicker header and add Calendar week

DerLino free asked 4 years ago


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. (

I would be happy if you could help me :D

Best wishes Lino

Grzegorz Bujański staff commented 4 years 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 free commented 4 years 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 4 years ago

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

DerLino free commented 4 years ago

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

Grzegorz Bujański staff commented 4 years 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.

boubaker premium answered 3 years ago

Hi, Any improvement about this point ? I can't use the header because I can't find a way to translate it French. And also the date format can't be modified, at least I haven't found the way to do it. Thanks

Krzysztof Wilk staff commented 3 years ago


These features are still missing in our package, but you can translate a header of the picker using a little bit of javascript. You can check an example here: :)

I'm afraid, that date format is still unchangeable.

Best regards

MB_Cebi free answered 3 years 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.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.18.0
  • Device: Computer
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes