How to Set Input Field With Current Date in Angular

How to set input field with current date in angular

Set formControlName default value as (new Date()).toISOString().substring(0,10)

Working Demo

Try like this:

.ts

myForm:FormGroup;

this.myForm = new FormGroup({    
'presentDate': new FormControl((new Date()).toISOString().substring(0,10))
});

Show current date in html in angular component

In your component.ts file, you can get the date as,

export class AppComponent implements OnInit {
dateVal = new Date();

and display in the component.html, if you want to format you can use DatePipe as you need

{{dateVal | date: 'M/dd/yyyy'}}

If you need to display in input, you can do

<input type="date" [ngModel] ="dt | date:'yyyy-MM-dd'" (ngModelChange)="dt = $event">

DEMO

How to set the value of date input field using data binding in Angular 5?

<input type="date" id="fromDate" [(ngModel)]="fromDate" name="fromDate">

type "date" does not consists of datetime. If you are going to use input with type as date then you use the following code to achieve it. You don't need to parse the transformed value to Date while assigning it to the model.

yesterdayDateFilter(){        
let yesterday = new Date();
yesterday.setDate(yesterday.getDate()-1);
this.fromDate = this.datePipe.transform(yesterday, 'yyyy-MM-dd');
this.toDate=this.datePipe.transform(new Date(), 'yyyy-MM-dd');
console.log(this.fromDate);
}

Demo

If you want to display both date and time then you should go with following library.

ng-pick-datetime

I hope this will help you. If you have any issues or doubts let me know.

Is it possible to put the current date and time inside a mat-form-field?

You're not actually adding that "inside" your input, it's actually oustide, if what you are looking to achieve is auto filling the input, then you need to use value property on <input/> but this ofcourse would cause a problem as that you can not use the date pipe inside the value property, therefore, you will have to use ngModel which will change your approach since that you're using the Reactive Forms approach, but you would figure this out easily either by using the
standalone = true for your ngModel (that's if you don't want this field to appear in your form), Or you can keep the name property instead of formControlName and that would do too (That's if you wan the field to appear in your form), the basic implementation would go something like this:

<mat-label>Filing Time:</mat-label><br>
<mat-form-field appearance="outline" class="width-1">
<input matInput [ngModel]="filingDate | date: 'HH:MM:SS'" />
</mat-form-field>

I can update this answer to suit your case after looking to some more code in the rest of your template, and your component class.

Hope this helped.

Angular input type date: how to get the current date preset?

You need to use the date pipe to format the date as follows,

 <input  type="date" id="regDate" name="regDate" class="form-control" required type="date" #nameField="ngModel"  [ngModel]="regDate | date:'yyyy-MM-dd'"  >

STACKBLITZ DEMO

Angular 2 Date Input not binding to date value

Instead of [(ngModel)] you can use:

// view
<input type="date" #myDate [value]="demoUser.date | date:'yyyy-MM-dd'" (input)="demoUser.date=parseDate($event.target.value)" />

// controller
parseDate(dateString: string): Date {
if (dateString) {
return new Date(dateString);
}
return null;
}

You can also choose not to use parseDate function. In this case the date will be saved as string format like "2016-10-06" instead of Date type (I haven't tried whether this has negative consequences when manipulating the data or saving to database for example).



Related Topics



Leave a reply



Submit