如何在沒有 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”之類的字符串） .