Set default value for angular material datePicker with angular 5

Question

I'm using a date picker from angular material. I want to set a default value but it is not showing the value.

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
   <input matInput [picker]="picker" placeholder="Date"
                  autocomplete="off"
                  name="date" 
                  formControlName="date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker  [startAt]="startDatePicker" #picker></mat-datepicker>
</mat-form-field>

this is my .js code with the value that i want to set as default

var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); 

this.form = this.formBuilder.group({
        dataInicial: [data_inicial],
                   ...

Do you want to set current date as default date?

Dani
– Dani

2018-10-15 03:45:06 +00:00
Commented Oct 15, 2018 at 3:45 — Dani
– Dani, Commented Oct 15, 2018 at 3:45
What's this 3888000000 representing?

LearnToday
– LearnToday

2019-08-08 03:27:29 +00:00
Commented Aug 8, 2019 at 3:27 — LearnToday
– LearnToday, Commented Aug 8, 2019 at 3:27

Suraj Rao · Accepted Answer · 2019-07-18 12:45:33Z

28

This works for me!

HTML-

<mat-form-field>
    <input matInput [matDatepicker]="picker1" placeholder="From Date" [formControl]="date1">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker  #picker1></mat-datepicker>
</mat-form-field>

TS-

date1 = new FormControl(new Date())

edited Jul 18, 2019 at 12:45

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Jul 18, 2019 at 12:39

Rohit Parte

4,25233 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ChumiestBucket Over a year ago

this is the best way

magor Over a year ago

not anymore :D does not work with Angular 15

Sameer Trivedi Over a year ago

It works for all angular versions, I tested this on Angular 17, make sure you are importing ReactiveFormsModule in your imports array and you should be fine.

User3250 · Accepted Answer · 2018-10-15 02:59:18Z

21

You need to provide a Date object to the startAt change as below:

In .ts:

date = new Date((new Date().getTime() - 3888000000));

In html:

<mat-datepicker  [startAt]="date" #picker></mat-datepicker>

A working demo here: https://stackblitz.com/edit/angular-n9yojx

edited Oct 15, 2018 at 2:59

answered Oct 14, 2018 at 5:36

User3250

3,4536 gold badges34 silver badges69 bronze badges

5 Comments

ssct79 Over a year ago

hi! thanks for the answer but it still does not showing :/

User3250 Over a year ago

@AlexLungu Not sure about ur case. Did you check the demo stackblitz? It works!

Alex Lungu Over a year ago

You are right. I missunderstood the question. I was looking for something more like [min]. As in the calendar "startsAt" a specific date. That's not how it works though. Sorry about the misunderstanding

User3250 Over a year ago

@AlexLungu That's fine. Post a new question if you still facing issue.

Agung Sudrajat Over a year ago

working as expected

Irrfan23 · Accepted Answer · 2019-11-10 15:04:40Z

9

You can use the formControl defined and in your input.

here is html

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
    <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date" [(ngModel)]="date.value">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

here is TS declare you formControl

date: FormControl;
this.date = new FormControl(new Date(<you can provide you date input field if you getting date from other sources>))

answered Nov 10, 2019 at 15:04

Irrfan23

3906 silver badges18 bronze badges

1 Comment

Farhad Over a year ago

While using formControl, you have to import ReactiveFormsModule to your imports array.

MJ X · Accepted Answer · 2020-07-16 20:57:32Z

3

Below is working code with Angular 10, Angular Material 10 and Reactive forms

component.ts

      this.youForm= this._formBuilder.group({


        StartDate: [new Date(), Validators.required],

      });

No change on component.html

  <mat-form-field appearance="outline">
            <input matInput [matDatepicker]="StartDate" placeholder="Start date *" 
              formControlName="StartDate">
            <mat-label>Start Date *</mat-label>
            <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle>
            <mat-datepicker #StartDate></mat-datepicker>
          </mat-form-field>

answered Jul 16, 2020 at 20:57

MJ X

9,12413 gold badges86 silver badges124 bronze badges

Comments

Sandun Susantha · Accepted Answer · 2020-08-09 04:30:45Z

3

In a group of form controllers, you can use the default date as seen in follows.

 birthdayCtrl: ['1999-01-31']

answered Aug 9, 2020 at 4:30

Sandun Susantha

1,1501 gold badge11 silver badges11 bronze badges

Comments

SaiSurya · Accepted Answer · 2020-12-30 13:15:19Z

2

Using Template driven approach the solution is as followed.

 selectedDate = new Date();

<input class="form-control"
                     matInput
                     [matDatepicker]="dp3"
                     [min]="today"
                     [max]="max"
                     disabled
                     [(ngModel)]="selectedDate"
                     (ngModelChange)="dateUpdated()"
                     name="currentDate"
                   />
                   <mat-datepicker-toggle
                     matSuffix
                     [for]="dp3"
                   ></mat-datepicker-toggle>
                   <mat-datepicker #dp3 disabled="false"></mat-datepicker> ```

answered Dec 30, 2020 at 13:15

SaiSurya

1,1261 gold badge9 silver badges16 bronze badges

Comments

Avinash Dalvi · Accepted Answer · 2019-12-06 09:10:29Z

0

in your .html----

     <mat-form-field style="width:150px;"  color="accent">
            <mat-label>Choose From Date</mat-label>
            <input  class="example-events" matInput [matDatepicker]="picker1"  [ngModel]="dateF" >
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1 ></mat-datepicker>
     </mat-form-field>

in your .ts----

dateF:any=new Date();

edited Dec 6, 2019 at 9:10

Avinash Dalvi

9,4299 gold badges34 silver badges60 bronze badges

answered Dec 6, 2019 at 9:05

ASH ASH

172 bronze badges

Comments

Zoe - Save the data dump · Accepted Answer · 2024-05-13 19:46:33Z

-1

ngModel works for me...

var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy');

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
   <input matInput [picker]="picker" placeholder="Date"
                  autocomplete="off"
                  name="date" 
                  formControlName="date" [ngModel]="date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker  [startAt]="startDatePicker" #picker></mat-datepicker>
</mat-form-field>

edited May 13, 2024 at 19:46

Zoe - Save the data dump

28.4k22 gold badges130 silver badges163 bronze badges

answered Nov 6, 2019 at 14:50

user8604852

78011 silver badges18 bronze badges

Comments

Dani · Accepted Answer · 2018-10-14 05:41:34Z

-3

Here is my answer,

in your .html

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
    <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

in your .ts

this.form = this.formBuilder.group({
   date: new FormControl(new Date()), // Current Date
               ...
});

This will set current date as default date.

edited Oct 14, 2018 at 5:41

answered Oct 14, 2018 at 5:33

Dani

8179 silver badges12 bronze badges

1 Comment

Andrei Maimas Over a year ago

Works this way: new FormControl(new Date()) | BUT doesn't work if I am using it as --> new FormControl({value: new Date()}, [Validators.required])

Collectives™ on Stack Overflow

Set default value for angular material datePicker with angular 5

9 Answers 9

3 Comments

5 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

5 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related