Problem with MDB date Picker, date format and option error


Topic: Problem with MDB date Picker, date format and option error

Pierre K asked 2 months ago

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


Grzegorz Bujański staff commented 2 months 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 2 months 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 2 months ago

@Pierre K

We need more information about this control [formControlName]="field.12". Does field.12 have any initial value or is it null?


Pierre K commented 2 months ago

@Arkadiusz Idzikowski

Field.12 has no initial value. it is the name of the control, used for manipulate it in the ts file


Arkadiusz Idzikowski staff answered 2 months ago

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);

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: 10.1.1
  • Device: Computer
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes