如何在ngModel中使用日期输入？

Question

我有这样的日期输入框

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

如何显示和提交值？

用户输入格式应为dd / MM / yyyy，提交值格式应为yyyy / MM / dd。

Answer 1

在模板中，将 keyup 事件侦听器添加到一个输入字段，并将名称设置为另一个，同时保持第二个隐藏。

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

在组件中创建方法，从输入字段修改日期格式，并将其设置为另一个变量returnValue，它将存储格式化日期，如下所示。

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 can be found here

希望这有帮助。

Answer 2

首先

npm install ng2-datepicker --save

您应该使用输入类型日期，如下所示

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

确保package.json中有

"ng2-datepicker": "^1.4.7"依赖

您的输出将为