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"
/>
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.
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();
}