MDB Angular DatePicker and ngModel


Topic: MDB Angular DatePicker and ngModel

Arturo Macías pro premium 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!

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

Hi,   You can set prefilled value passing object with date
this.fecha_nacimiento = { date: { year: 1945, month: 12, day: 24 } };

Regards

Arturo Macías pro premium 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 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 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.

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No