Angular DatePicker not showing correct date at top

Topic: Angular DatePicker not showing correct date at top

Mark Olive pro asked 6 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?

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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:
<div>
<pre><mdb-date-picker #datePickername="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [(ngModel)]="model"required></mdb-date-picker></pre>
</div>
2. Add imports to your's component.ts file:
<pre>import { Component, OnInit, ViewChild, AfterViewInit} from '@angular/core';
import { MDBDatePickerComponent } from './../../../typescripts/pro/date-picker/datepicker.component';</pre>
3. Add viewChild to your's component.ts file:
<pre>@ViewChild("datePicker") datePicker: MDBDatePickerComponent;
</pre>
4. And final step is to set your's default date in ngAfterViewInit():
<pre>ngAfterViewInit(){

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

}

</pre>
This should works fine to you. If not, let me know.

Best Regards,

Damian

Please insert min. 20 characters.

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

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

Mark Olive

Pro User 4Support score
5Questions 0Answers 0Snippets