HowTo programmatically set the date in DatePicker

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: HowTo programmatically set the date in DatePicker

St Clair Clarke pro asked 7 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

Dawid Adach pro answered 7 years ago

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 7 years ago

Thank Dawid. Everything is fine now.

hbthegreat pro commented 7 years ago

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

Dawid Adach pro commented 7 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 commented 6 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 6 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.

kaimeng pro answered 7 years ago

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 7 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 7 years ago

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

Dawid Adach pro commented 7 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 7 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?

salmansahnoon pro answered 7 years ago

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

salmansahnoon pro commented 7 years ago

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
St Clair Clarke
Pro User
12Support score
6Questions 4Answers
0Snippets likes 0Snippets