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

Posted 2023-03-05

【中文标题】如何在没有 jquery 的情况下在 Angular 中的页面加载时自动打开 HTML 日历

【英文标题】：How to open HTML calendar automatically on page load in Angular without jquery

【发布时间】：2021-12-09 03:05:58

【问题描述】：

我在 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"
/>

【问题讨论】：

***.com/questions/24975667/… 这是你要找的那个吗？

@sojin webshim 不再维护了，对吧？

【参考方案1】：

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

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

【参考方案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"
/>

注意：您没有说出表单的名称，我已将 form 作为名称（[disabled]="form >.值...）。 如果您的表单有另一个名称 chage "form"。

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

EXTRA：当你得到“想法”时，如果它是你想要的，你必须知道你甚至可以处理输入的disability formControlName="delivery_date" 以编程方式（在您的 .ts 代码中），如下所示：

// To disable
this.form.get('delivery_dat').disable();
// to enable
this.form.get('delivery_dat').enable();

// so you can do things like:
if (this.form.get('delivery_dat') != null) 
   this.form.get('delivery_dat').disable();
 else 
   this.form.get('delivery_dat').enable();