angular - 如何使用 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

希望这对您有所帮助。