HTML datepicker的角度设置默认值答案

【问题标题】：Angular setting default value of HTML datepickerHTML datepicker的角度设置默认值
【发布时间】：2023-03-17 16:02:01
【问题描述】：

[(ngModel)] 没有为日期选择器设置默认值。我尝试了各种不同的方法来填充日期选择器，但都无法做到。

我的 HTML

<input id="START_DATE" type="datetime-local" [(ngModel)]="startDate"/>

在该示例中，绑定有效，但我无法设置默认值。

如果我只是插值，我可以设置该值，但随后我失去了我的 2 路绑定。 value="{{startDate}}"

【问题讨论】：

标签： html angular date datetime binding

【解决方案1】：

您可以将字符串类型属性绑定到输入日期类型。您必须将“日期对象”转换为“字符串”并将字符串值存储在类组件属性中。将相应的属性（组件类）绑定到 HTML 元素（模板）。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  startDate = new Date().toISOString().slice(0, 16);

  constructor(){
  }
}

您还可以根据用例创建可自定义的“日期到字符串”格式函数。

【讨论】：

我更喜欢这个。谢谢！

【解决方案2】：

Plunker - https://plnkr.co/edit/s5OMg2olU2yHI246nJOG?p=preview

<input type="date" [ngModel] ="dt | date:'yyyy-MM-dd'" (ngModelChange)="dt = $event">

【讨论】：

这很好用，但不得不问为什么不能直接使用[(ngModel)] 和日期？