Angular DatePicker not showing correct date at top

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Angular DatePicker not showing correct date at top

Mark Olive pro asked 7 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>
</mdb-date-picker>

this.startDate = '21-02-2018'; // UK Date format
See: https://photos.google.com/share/AF1QipNX1ldvqsnNmQxs8pZ6wKXu2NyerdwPQhY-H-mzXdkTPjpwyFHygPIICHVMZtwuAg?key=ZTV6MmhKTlJaQXp0a3l3SVhxUWcyekdhejBvRU13 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 7 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 - https://mdbootstrap.com/support/howto-programmatically-set-the-date-in-datepicker/ 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(): 
ngAfterViewInit(){


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


}
This should works fine to you. If not, let me know. Best Regards, Damian
Write
Create snippet
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: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Mark Olive
Pro User
4Support score
5Questions 0Answers
0Snippets likes 0Snippets