Assigning value to an HTML input of type date with Angular 4

Question

I'm new to angular, but I need to assign a date to a html input of type date when loading the page.

I noticed that if you change the input type from date to text, the value is assigned to the input, but leave as date the value is not assigned.

Someone would know where I'm going wrong.

Follow me code.

HTML

<input class="form-control" 
       type="date" 
       maxlength="10" 
       placeholder="dd/mm/yyyy"
       [(ngModel)]="carFilter.dataInicial"  
       (ngModelChange)="onDateChangeFim($event)"    
        min="{{auxFimMinDate}}"
        max="{{auxFimMaxDate}}">

Component Example

export class CarComponent implements AfterViewInit, OnInit {

    carFilter : CarModel;
    auxInMaxDate: Date  = new Date("2099-12-30");
    auxFimMinDate: Date  = new Date("1900-01-01");


    ngOnInit(): void {

        this.carFilter  = new CarModel();
        const data = new Date();        
        this.carFilter.dataInicial = data;

    }
}

Model Example

export class CarModel {

    offSet : number;
    dataInicial : Date;
    dataFinal : Date;

    constructor(
                offSet:number,
                dataInicial : Date,
                dataFinal : Date
                ){

        this.offSet = offSet;
        this.dataInicial = dataInicial;
        this.dataFinal = dataFinal;     

    }
}

Image input

Console Google Chrome

Possible duplicate of Angular2: How to use JavaScript Date Object with NgModel two way binding — Martin Parenteau
– Martin Parenteau, Commented Sep 11, 2018 at 13:57

Ger · Accepted Answer · 2018-09-11 15:25:51Z

1

I was able to solve the problem by assigning my ngModel | date: 'yyyy-MM-dd'. I have to study why it worked that way. If anyone wants to comment or suggest something better I thank you. Thanks to all who helped @Samy Sammour and @Dmitriy Snitko

<input class="form-control" 
   type="date" 
   maxlength="10" 
   placeholder="dd/mm/yyyy"
   [ngModel]="carFilter.dataInicial | date:'yyyy-MM-dd'"  
   (ngModelChange)="onDateChangeFim($event)"    
    [min]="auxFimMinDate"
    [max]="auxFimMaxDate">

answered Sep 11, 2018 at 15:25

Ger

6493 gold badges17 silver badges37 bronze badges

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

Comments

Samy Sammour · Accepted Answer · 2018-09-11 13:52:19Z

0

The variable date should be an object from Date. not just a string.

So instead, try to add a real object:

this.carFilter  = new CarModel();
var data = new Date('10/09/2018');        
this.carFilter.dataInicial = data;

<input type="date" [(ngModel)]="carFilter.dataInicial" />

answered Sep 11, 2018 at 13:52

Samy Sammour

2,4553 gold badges35 silver badges70 bronze badges

2 Comments

Ger Over a year ago

Thanks for the answer Samy Sammour, I did just that way, but the input does not render the value assigned in the component. I added a componet image to my question after changing my code as per your comment.

Samy Sammour Over a year ago

Try to use [value]="carFilter.dataInicial" instead of [(ngModel)]

Collectives™ on Stack Overflow

Assigning value to an HTML input of type date with Angular 4

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related