Topic: Change Datepicker header and add Calendar week
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
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.
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 4 months ago
Hi!
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: https://mdbootstrap.com/snippets/jquery/piotr-urbaniak/2759583#js-tab-view :)
I'm afraid, that date format is still unchangeable.
Best regards
Answered
- User: Pro
- Premium support: No
- Technology: jQuery
- MDB Version: 4.18.0
- Device: Computer
- Browser: Google Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Grzegorz Bujański staff commented 10 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 priority commented 10 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 10 months ago
What do you mean? It's about showing which week of the year it is?
DerLino pro priority commented 10 months ago
Yes, I mean the week of the year :) In Germany we say Kalenderwoche (KW)
Grzegorz Bujański staff commented 10 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.