Topic: Change Datepicker header and add Calendar week
DerLino free asked 4 years 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
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
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
MB_Cebi free answered 4 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.
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- 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
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.