HowTo programmatically set the date in DatePicker

Topic: HowTo programmatically set the date in DatePicker

St Clair Clarke pro asked 6 years ago

Hi,

I am trying to set the date programmatically in DatePicker using mdb-angular by using the

[(ngModel)] = 'model'

this.model = '2017-10-01'

but it is not being displayed when the date changes.

How else can I set this date.

Cheers

Add comment

Dawid Adach pro answered 6 years ago

0 2 Best answer

Dear St Clair Clarke,
You can achieve that using ViewChild & AfterViewInit
Give your mdb-date-picker some id i.e.:
<pre><mdb-date-picker #datePicker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [(ngModel)]="model"required></mdb-date-picker></pre>
Then, within your component.ts import ViewChild,  AfterViewInit and MDBDatePickerComponent
<pre>import { Component, OnInit, ViewChild, AfterViewInit} from '@angular/core';</pre>
<pre>import { MDBDatePickerComponent } from './../../../typescripts/pro/date-picker/datepicker.component';</pre>
Initialize variable
<pre>@ViewChild("datePicker") datePicker: MDBDatePickerComponent;</pre>
And set the value after view is initialized
<pre>ngAfterViewInit(){

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

}</pre>
Of course, you can call it from different places, on demand. I used AfterViewInit to cover scenario when you want have default date chosen just after rendering new view.

Please insert min. 20 characters.

Dear St Clair Clarke,

You can achieve that using ViewChild & AfterViewInit

Give your mdb-date-picker some id i.e.:

<mdb-date-picker #datePicker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [(ngModel)]="model"required></mdb-date-picker>

Then, within your component.ts import ViewChild, AfterViewInit and MDBDatePickerComponent

import { Component, OnInit, ViewChild, AfterViewInit} from '@angular/core';

import { MDBDatePickerComponent } from './../../../typescripts/pro/date-picker/datepicker.component';

Initialize variable

@ViewChild("datePicker") datePicker: MDBDatePickerComponent;

And set the value after view is initialized

ngAfterViewInit(){

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

}

Of course, you can call it from different places, on demand. I used AfterViewInit to cover scenario when you want have default date chosen just after rendering new view.

St Clair Clarke pro commented 6 years ago

Thank Dawid. Everything is fine now.

hbthegreat pro commented 6 years ago

Is there another way of doing this without doing a setTimeout hack?

Dawid Adach pro commented 6 years ago

Dear hbthegreat, we are planning to expose this as a function in a future releases however as for now this is the best way to do it.

Przemysław Ciąćka free commented 5 years ago

This approach seems not working as I would expect. Date set via `onUserDateInput` is not displayed in the input however when you click on input, date picker displays correct date.

Arkadiusz Idzikowski staff commented 5 years ago

We will take a closer look at this problem. For now please upgrade to 7.1.1 and use setValue method in reactive forms.

Add comment

Anas mohammed pro answered 6 years ago

0 2 Best answer

you can set it like below:

import { DatePipe } from '@angular/common';

constructor( private datePipe:DatePipe) {
}

public myDatePickerOptions: IMyOptions = {
dateFormat: 'dd/mm/yyyy' };

ngOnInit() {

this.DateOfBirth = this.datePipe.transform(new Date(basicInfo.DateOfBirth), 'dd/MM/yyyy');

}

//html

Anas mohammed pro commented 6 years ago

Add comment

kaimeng pro answered 6 years ago

0 0 Best answer

Dear Dawid, If I include the day of week in the dateFormat, i.e., myDatePickerOptions: IMyOptions = { dateFormat: 'dddd, dd/mm/yyyy' }; then the solution does not work. ngAfterViewInit() { setTimeout(() => this.datePicker.onUserDateInput('Wednesday, 01/11/2017'), 0); // date not set } How can I initialize the date for such date format?

Chen Xiao pro commented 6 years ago

I set the different dateFormat, but I set data model to 'yyyy/mm/dd', it's ok. So I think you just use [(ngModel)] is enough.

kaimeng pro commented 6 years ago

I cannot get Dawid's solution to work if date format includes the day of the week.

Dawid Adach pro commented 6 years ago

Dear kaimeng, currently, we do not support "dddd" as a input format, we will add it to our to do list. If you would like to add your custom parser, you can update isDateValid() function in /pro/date-picker/services/datepickerUtil.service.ts

Bill Bensing pro commented 6 years ago

I have recently tried this solution with the dateFormat set to 'mmm d, yyyy' and I noticed that it would not work. I tested with other date formats and got the same result. Does this approach only work if the dateFormat is not set? If so, how are you altering the date format for the user?

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

St Clair Clarke

Pro User 12Support score
6Questions 4Answers 0Snippets