如何在没有 jquery 的情况下在 Angular 页面加载时自动打开 HTML 日历

Question

赏金将在 18 小时后到期。 回答这个问题有资格获得+50声望奖励。 Nidhin Kumar正在寻找规范的答案。

我在 Angular 应用程序中使用了带有日期字段的 HTML 输入。我想在不使用 jquery 的情况下根据条件在页面加载时打开日期字段模式。 条件是当输入选择了日期时，不应打开日历，如果未选择日期，则应打开下拉菜单。

我尝试在 HTML 标签中设置 onLoad，但我不确定如何关闭/打开日历模式。

<input
  [class.is-invalid]="deliveryDate.invalid && deliveryDate.touched"
  type="date"
  class="form-control"
  [ngClass]="{'alerts-border': isDateSelected()}"
  [min]="cartItems.minDeliveryDate"
  formControlName="delivery_date"
  onkeydown="return false"
/>

Answer 1

如this answer中所述， datepicker 元素是一种单独的窗口，您似乎无法直接调用它。

所以答案是：不，你不能打开日期选择器。 如果您安装了角材料，那么您可以尝试使用他们的 datepciekr。

Answer 2

我不知道这是否正是你想要的，但你可以试试这个：

<input
  [class.is-invalid]="deliveryDate.invalid && deliveryDate.touched"
  type="date"
  class="form-control"
  [ngClass]="{'alerts-border': isDateSelected()}"
  [min]="cartItems.minDeliveryDate"
  formControlName="delivery_date"
  [disabled]="form.value.delivery_date != null ? true : false"
  onkeydown="return false"
/>

注意：您没有说出表单的名称，我已将表单作为名称 ([disabled]=" form .value...)。如果您的表单有另一个名称，请更改“表单”。

当您初始化delivery_date字段时，如果您希望用户可以选择日期，则应将其初始化为null （如果您想显示日期但不让用户选择另一个日期，则应将其初始化为“2021-11-23”之类的字符串） .