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

Question

. Answers to this question are eligible for a +50 reputation bounty. Nidhin Kumar is looking for a .

I have used HTML input with the date field in the Angular application.I would like to open the date field modal on page load based on a condition without using jquery. The condition is when the input is having a date selected then the calendar shouldn't be opened and if there is no date selected then the dropdown should be opened.

I have tried setting onLoad in the HTML tag but i'm not sure how to close/open the calendar modal.

<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

As described in this answer , the datepicker element is a kind of a separate window and it seems that you cannot call it directly.

So the answer is: no you cannot open the datepicker. If you have angular material installed then you can try their datepciekr.

Answer 2

I don't know if this is exactly what you want, but you could try this:

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

NOTE : You didn't say the name of your form, I've put form as name ([disabled]=" form .value...). If your form has another name chage " form " by it.

When you initialize the delivery_date field, you should initialize it to null if you want users could pick a date (or with a string like "2021-11-23" if you want to show the date but not let the user pick another one).