CODEWITHSUNDEEP
javascripthtmlangulartypescript
TheCoderGuy
TheCoderGuy

Reputation: 883

How to use in ngModel date but only month, year and date

I have a interface with name Person and there is name, lastname, birthday and other variables. What is making me confused is in the person.birthday it is sending the date with some letters at the end. What I want is to send the date in the store normaly date but when I want to show in the ngModel to show me only year, month, date. Below you can find a code.

This is the code in HTMl

<app-input-field label="Gerbustag" labelWidth="105px">
            <input class="inputBackground" type="date" [(ngModel)]="person.birthday">
          </app-input-field>

This is the interface of the person.

export interface Person {
  id: string;
  firstName: string;
  lastName: string;
  birthday: Date;

What I have writed in the TS it is like this.

birthday = new Date().toISOString().split('T')[0];
//This returns me good in the HTMl but this is not the correct birthday

Do you have any idea how can I show in html only year-month-date of the person

Upvotes: 0

Views: 907

Answers (2)

Wisely D Cruizer
Wisely D Cruizer

Reputation: 1139

Use built in pipe for angular for dates.

  1. {{ strDate | date :'hh:mm:ss' }} will give output 09:44:12

  2. {{ strDate | date :'dd-MMM-yyyy' }} will give output 07-Nov-2016

  3. {{ strDate | date :'h:mm' }} will give output 9:44

  4. {{strDate | date :'dd:MMM:yyyy hh-mm-ss z'}} will give output 07:Nov:2016 09-44-12 India Standard Time

  5. {{strDate | date :'hh:mm, E'}} will give output 09:44, Mon

See link , for more : https://www.concretepage.com/angular-2/angular-2-date-pipe-example

usage :

 <input [ngModel]="person.birthday | date:'yyyy-MM-dd'"  type="date" name="startDate"/>

Upvotes: 4

SehaxX
SehaxX

Reputation: 764

In ngModel you can use it like this:

 var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

console.log(new Date().toLocaleDateString('de-DE', options));
// expected output: Donnerstag, 20. Dezember 2012

console.log(new Date().toLocaleDateString('ko-KR', options));
// expected output: 2012년 12월 20일 목요일

var options2 = { day: 'numeric', month: 'numeric', year: 'numeric'};

console.log(new Date().toLocaleDateString('de-DE', options2));
// expected output: 18.6.2018

Upvotes: 1

Related Questions