Topic: Angular DatePicker not showing correct date at top

Mark Olive pro asked 4 years ago

Hi, When I initialise my calendar popup start date, the date in the calendar part of the pop-up shows my startDate '21-02-2018', however the date at the top in the shows: Monday Feb 12 2008 which is todays date.
<mdb-date-picker name="mydate" [options]="myDatePickerOptions" 
  [placeholder]="'Enter Start Date'"
    [formControl]="startDate" required ngDefaultControl>

this.startDate = '21-02-2018'; // UK Date format
See: This is very confusing.  Is there anyway to get both the top 'title' and the calendar part of the datepicker to show the initial date set?

Damian Gemza staff answered 4 years ago

Hello Mark Olive, In our DatePicker we haven't got something like startDate, so it can't work well. If you want to set your's default date, and want to datepicker picks that date for default, you have to use workaround created by my friend Dawid - Referring to that link: 1. You have to add datepicker markup in your's .component.html file:
<mdb-date-picker #datePickername="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [(ngModel)]="model"required></mdb-date-picker>
2. Add imports to your's component.ts file:
import { Component, OnInit, ViewChild, AfterViewInit} from '@angular/core';
import { MDBDatePickerComponent } from './../../../typescripts/pro/date-picker/datepicker.component';
3. Add viewChild to your's component.ts file:
@ViewChild("datePicker") datePicker: MDBDatePickerComponent;
4. And final step is to set your's default date in ngAfterViewInit():

setTimeout(() =>this.datePicker.onUserDateInput("2017-10-13"), 0);


This should works fine to you. If not, let me know. Best Regards, Damian

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

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No