Problem with MDB date Picker, date format and option error

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

Pierre K free asked 3 years 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 3 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 free commented 3 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 3 years 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 free commented 3 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

Add comment

Arkadiusz Idzikowski staff answered 3 years ago

0 0 Best answer

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 (<code>dd/mm/yyyy</code> in this case).

Here is a working example (we used your configuration):

HTML:

TS:

<pre class="prettyprint"><code> 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',
 }
</code></pre>

If you want to add an initial date, make sure to use a string with a correct format:

<pre class="prettyprint"><code> pickerControl = new FormControl('01/03/2021');
</code></pre>

or use Javascript date object:

<pre class="prettyprint"><code> date = new Date('2021-03-01');
 pickerControl = new FormControl(this.date);
</code></pre>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Pierre K

40Support score
4Questions 2Answers 0Snippets