angular - Hur använder jag ett datumfält med ngModel?

Jag har ett datuminmatningsfält som detta

<input [(ngModel)]="value"
       type="text"
class="form-control">

Hur visar jag och skickar värdet?

Användarinmatning ska formateras som dd/MM/yyyy och skickat värde ska formateras som yyyy/MM/dd.

Svar #1

I din mall, lägg till en keyup-händelselyssnare på ett inmatningsfält och ställ in namn på ett annat samtidigt som det andra hålls dolt.

<input type="text" (keyup)="changeFormat($event)" [(ngModel)]="value" placeholder="Enter a Date here">
<input type="hidden" name="dateField" [attr.value]="returnValue"><hr>
<h1 [hidden]="!value">Hello {{returnValue}}!</h1>

I komponenten skapa metoden för att ändra formatet på datum från inmatningsfältet och sätta det till en annan variabel returnValue som kommer att lagra det formaterade datumet, som visas nedan.

value: string = '';
returnValue : string = "";

changeFormat($event):void {
  let argDateArr = this.value.split("/");
  let year = argDateArr[2];
  argDateArr[2] = argDateArr[0];
  argDateArr[0] = year;
  this.returnValue = argDateArr.join("/");
}

Plunker kan hittas här

Hoppas det här hjälper.

Svar #2

Först

npm install ng2-datepicker --save

Du bör använda inmatningstyp datum som nedan

 <input id="textinput" [(ngModel)]="startDate" name="textinput" type="date" placeholder="Start Date" class="form-control input-md">

Se till att i ditt package.json har

"ng2-datepicker": "^1.4.7" i dess beroenden

Din utdata kommer att vara som