Topic: Problem with MDB date Picker, date format and option error
Hello,
I have a problem with the mdb date picker when trying to set a date.
Expected behavior the format and the selected date have to be 01/03/2021 when editing.
Actual behavior But i got this date and this format instead 0-1/0-1/-1.
Here is how the MDB Date Picker is declare
<mdb-date-picker mdbValidate [validateSuccess]="false" [inline]="true" [options]="field.params" [locale]="'fr'" [placeholder]="Date de début" [formControlName]="field.12"></mdb-date-picker>
and here is the options inside the MDB Date picker :
// TRADUCTION
dayLabels: {} = { su: 'Dim', mo: 'Lun', tu: 'Mar', we: 'Mer', th: 'Jeu', fr: 'Ven', sa: 'Sam' };
dayLabelsFull: {} = { su: 'Dimanche', mo: 'Lundi', tu: 'Mardi', we: 'Mercredi', th: 'Jeudi', fr: 'Vendredi', sa: 'Samedi' };
monthLabels: {} = { 1: 'Jan', 2: 'Fév', 3: 'Mar', 4: 'Avr', 5: 'Mai', 6: 'Jun', 7: 'Jui', 8: 'Aou', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Déc' };
monthLabelsFull: {} = { 1: 'Janvier', 2: 'Févier', 3: 'Mars', 4: 'Avril', 5: 'Mai', 6: 'Juin', 7: 'Juillet', 8: 'Août', 9: 'Septembre', 10: 'Octobre', 11: 'Novembre', 12: 'Décembre' };
// PARAMETERS
firstDayOfWeek = 'mo';
dateFormat = 'dd/mm/yyyy';
minYear = 1900;
maxYear = 2100;
showWeekNumbers = true;
// DISABLE
disableSince: {}; // {year: 2020, month: 10, day: 1};
disableUntil: {}; // {year: 2020, month: 10, day: 31};
disableDays: {}[]; // [{year: 2020, month: 11, day: 3}];
disableDateRanges: {}[]; // [{begin: {year: 2020, month: 12, day: 5}, end: {year: 2020, month: 12, day: 7}}];
disableWeekends = false;
// MARK
markCurrentDay = true;
markDates: {}[] = [{ dates: [{ year: 2020, month: 7, day: 20 }], color: '#ea0d0d' }];
markWeekends = true;
// BUTTONS
todayBtnTxt = 'Aujourd\'hui';
showTodayBtn = true;
clearBtnTxt = 'Réinit.';
showClearDateBtn = false;
closeBtnTxt = 'Fermer';
disableHeaderButtons = false;
// STYLE
height = '100px';
width = '50%';
selectionTxtFontSize = '15px';
Resources (screenshots, code snippets etc.) You can find a video on how it shows at this link : Problem render
We were only able to reproduce this problem when we added a date with the wrong format to form control. Please make sure that form control does not have any value or that the value has a correct format (dd/mm/yyyy in this case).
Here is a working example (we used your configuration):
HTML:
<mdb-date-picker
mdbValidate
[validateSuccess]="false"
[inline]="true"
[options]="pickerOptions"
[locale]="'fr'"
[placeholder]="'Date de début'"
[formControl]="pickerControl"
></mdb-date-picker>
TS:
pickerControl = new FormControl();
pickerOptions = {
// TRADUCTION
dayLabels: { su: 'Dim', mo: 'Lun', tu: 'Mar', we: 'Mer', th: 'Jeu', fr: 'Ven', sa: 'Sam' },
dayLabelsFull: { su: 'Dimanche', mo: 'Lundi', tu: 'Mardi', we: 'Mercredi', th: 'Jeudi', fr: 'Vendredi', sa: 'Samedi' },
monthLabels: { 1: 'Jan', 2: 'Fév', 3: 'Mar', 4: 'Avr', 5: 'Mai', 6: 'Jun', 7: 'Jui', 8: 'Aou', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Déc' },
monthLabelsFull: { 1: 'Janvier', 2: 'Févier', 3: 'Mars', 4: 'Avril', 5: 'Mai', 6: 'Juin', 7: 'Juillet', 8: 'Août', 9: 'Septembre', 10: 'Octobre', 11: 'Novembre', 12: 'Décembre' },
// PARAMETERS
firstDayOfWeek: 'mo',
dateFormat: 'dd/mm/yyyy',
minYear: 1900,
maxYear: 2100,
showWeekNumbers: true,
// DISABLE
disableWeekends: false,
// MARK
markCurrentDay: true,
markDates: [{ dates: [{ year: 2020, month: 7, day: 20 }], color: '#ea0d0d' }],
markWeekends: true,
// BUTTONS
todayBtnTxt: 'Aujourd\'hui',
showTodayBtn: true,
clearBtnTxt: 'Réinit.',
showClearDateBtn: false,
closeBtnTxt: 'Fermer',
disableHeaderButtons: false,
// STYLE
height: '100px',
width: '50%',
selectionTxtFontSize: '15px',
}
If you want to add an initial date, make sure to use a string with a correct format:
pickerControl = new FormControl('01/03/2021');
or use Javascript date object:
date = new Date('2021-03-01');
pickerControl = new FormControl(this.date);
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 10.1.1
- Device: Computer
- Browser: Google Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Grzegorz Bujański staff commented 4 years ago
The above code indicates that you are not using MDB5 version 3.2.0. It looks more like Angular to me. Please confirm which version of MDB you are using.
Pierre K commented 4 years ago
Hello, You are right, i made a mistake while asking the question. Sorry for that, I corrected it. Then, do you know what's the problem of my Date picker ?
Regards.
Arkadiusz Idzikowski staff commented 4 years ago
@Pierre K
We need more information about this control
[formControlName]="field.12". Doesfield.12have any initial value or is it null?Pierre K commented 4 years ago
@Arkadiusz Idzikowski
Field.12 has no initial value. it is the name of the control, used for manipulate it in the ts file