MDB Angular DatePicker and ngModel

Topic: MDB Angular DatePicker and ngModel

Arturo Macías priority asked 7 years ago

Hi!, i'm trying to use DatePicker in a Angular4 form. In html i have this code:

<my-date-picker name="fecha_nacimiento" locale="es" [options]="datePickerOptions" [placeholder]="'Fecha de Nacimiento'" [(ngModel)]="patient.fecha_nacimiento"></my-date-picker>

In component, i have this datepickerOptions:

public datePickerOptions: IMyOptions = {
  dayLabelsFull: {su: 'Domingo', mo: 'Lunes', tu: 'Martes', we: 'Miércoles', th: 'Jueves', fr: 'Viernes', sa: 'Sábado'},
  dayLabels: {su: 'Do', mo: 'Lu', tu: 'Ma', we: 'Mi', th: 'Ju', fr: 'Vi', sa: 'Sa'},
  monthLabels: {1: 'Ene', 2: 'Feb', 3: 'Mar', 4: 'Abr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Ago', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dic'},
  monthLabelsFull: { 1: 'Enero', 2: 'Febrero', 3: 'Marzo', 4: 'Abril', 5: 'Mayo', 6: 'Junio', 7: 'Julio', 8: 'Agosto', 9: 'Septiembre', 10: 'Octubre', 11: 'Noviembre', 12: 'Diciembre' },
  dateFormat: 'yyyy-mm-dd',
  todayBtnTxt: 'Hoy',
  firstDayOfWeek: 'mo',
  clearBtnTxt: 'Limpiar',
  closeBtnTxt: 'Cerrar',
  showTodayBtn: false,
  showClearDateBtn: false,
  markCurrentDay: true,
  minYear: 1917,
  maxYear: 2017
};

patient.fecha_nacimiento contains a string with value \"1945-12-24\" but datepicker is not prefilled with this value. Other inputs in this form are correctly prefilled with ngModel. How can i prefill datepicker with ngModel? Thanks!

Add comment

Serg Tomilkin free answered 7 years ago

0 0 Best answer

Just add few string to datepicker component: 
path/to/your/theme/typescripts/pro/date-picker/datepicker.component.ts:307 - writeValue method:
<pre>writeValue(value: any): void {
 if (value && typeof value == 'string') {
 this.updateDateValue(this.parseSelectedDate(value), false);
 } else if (value && value['date']) {
 this.updateDateValue(this.parseSelectedDate(value['date']), false);
 } else if (value === '') {
 this.updateDateValue({year: 0, month: 0, day: 0}, true);
 }
}</pre>

Please insert min. 20 characters.

Just add few string to datepicker component:
path/to/your/theme/typescripts/pro/date-picker/datepicker.component.ts:307 - writeValue method:

writeValue(value: any): void {
  if (value && typeof value == 'string') {
    this.updateDateValue(this.parseSelectedDate(value), false);
  } else if (value && value['date']) {
    this.updateDateValue(this.parseSelectedDate(value['date']), false);
  } else if (value === '') {
    this.updateDateValue({year: 0, month: 0, day: 0}, true);
  }
}

Add comment

Rafał Rogulski free answered 7 years ago

0 0 Best answer

Hi, You can set prefilled value passing object with date

this.fecha_nacimiento = { date: { year: 1945, month: 12, day: 24 } };

Regards

Arturo Macías priority commented 7 years ago

It works in this way, but i have saw other problems. I have this in DatePickerOptions: <pre> showTodayBtn: false, showClearDateBtn: false, markCurrentDay: false</pre> But buttons are shown anyway. Besides, date shown in top of popup is not the prefilled date, but today. Date selected in calendar below top date is ok

Rafał Rogulski free commented 7 years ago

thanks for the info, it's a bug we will fix it in next release

Łukasz Salamon pro commented 7 years ago

and which is next release ? was it fixed in MDB_Angular_PRO_4.3.1 ? Do you have any issue tracking software where we could see in which verisons bugs are fixed ?

Rafał Rogulski free commented 7 years ago

We have changelog page https://mdbootstrap.com/angular/changelog/ which provide more important updates and changelog for it. At this moment we don,t have any issue tracking software.

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: Priority
Premium support: Yes
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

Arturo Macías

14Support score
6Questions 4Answers 0Snippets