How to open HTML calendar automatically on page load in Angular without jquery

user_10982622 0
Viewed 325

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"
/>
angular html
2 Answers

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.

user_92396110

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).

EXTRA: When you get the "idea", if it is that you wanted, you have to know that you can even handle the disability of the input with the formControlName="delivery_date" programmatically (in your .ts code), like this:

// 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();
}
user_154686630
Related