Topic: MDB Angular DatePicker and ngModel

Arturo Macías priority asked 6 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!

Serg Tomilkin free answered 6 years ago

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

Rafał Rogulski free answered 6 years ago

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


Arturo Macías priority commented 6 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 6 years ago

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

Łukasz Salamon pro commented 6 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 6 years ago

We have changelog page 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.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No