CODEWITHSUNDEEP
angularmat-datepicker
SK Chanchol
SK Chanchol

Reputation: 33

How can I set the default date in input portion?

    <mat-form-field>
        <input matInput [matDatepicker]="picker1" placeholder="From date: mm-dd-yyyy" 
        name="from_date" [(ngModel)]="callListRequestOb.from_date" maxlength="150">
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
    </mat-form-field

(.ts file)

    constructor(
            private modalService: NgbModal,
            private aService: ApplicationService,
        ) {
            this.callListRequestOb = new CallListRequestModel();
            this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
            this.callListRequestOb.from_date = moment().format('MM-DD-YYYY');
            this.callListRequestOb.to_date = moment().format('MM-DD-YYYY');
            this.callListRequestOb.page_no = this.page;
            this.callListRequestOb.row_per_page = this.pageSize;
        }

How does this template-driven 'form' set today's date in the dom input portion? I've to use[(ngModel)] here.

Upvotes: 0

Views: 424

Answers (2)

SK Chanchol
SK Chanchol

Reputation: 33

In CallListModel.ts file I've changed the from_date & to_date type is Date.

export class CallListRequestModel{
    from_date: Date;
    to_date: Date;
 }

Then in constructor, I wrote this and it is working.

this.callListRequestOb.from_date = new Date();

Thanks, everyone for helping me out.

Upvotes: 0

Tony
Tony

Reputation: 910

please try this,

test.component.html

<mat-form-field>
    <input matInput [matDatepicker]="picker1" placeholder="From date: mm-dd-yyyy" 
    name="from_date" [(ngModel)]="callListRequestOb.from_date" maxlength="150">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

test.component.ts

callListRequestOb={
    from_date: new Date()
}

Upvotes: 1

Related Questions