Angular5 Input With Date

Angular5 input with date

Ok, I finally found the problem. First of all thanks for your replies, the right solution was precisely the use of the pipe BUT:
1) the date format of the pipe MUST be the same as the date is retrieved;
2) the date format of the pipe MUST NOT be the same as the user will see it.

For example: in my case the db date format was 'yyyy-MM-dd' but the shown date format was 'dd/MM/yyyy'. So the pipe had to be be set with 'yyyy-MM-dd'.

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).

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.

Angular and input type Date won't display date assigned in format with T

Use the date Pipe in your date input

Like this

"day.dayValue | date: 'yyyy-MM-dd'"

Full code [Edited]

<input
  type="date"
  [(ngModel)]="day.dayValue"
  [ngModel]="day.dayValue | date: 'yyyy-MM-dd'"
  [disabled]="false"
/> />

Notice that I added both [ngModel] and [(ngModel])

You can take this and place it instead of your input and it will work.

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

---

Related Topics