Angular中无需jQuery实现页面加载时按条件自动打开HTML日期选择器

原生<input type="date">没有公开的API直接控制弹窗开关，可通过focus+点击的组合触发打开行为，实现逻辑如下：

• 第一步：给input元素添加模板引用变量，方便组件层获取DOM实例
  修改后的HTML代码：

<input
  #deliveryDateInput
  [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"
/>

• 第二步：在组件类中获取DOM引用，视图初始化后按条件触发弹窗
  在组件中实现AfterViewInit生命周期钩子，判断日期表单控件的值，无值时触发弹窗：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
// 你的其他导入

@Component({
  // 你的组件原有配置
})
export class YourComponent implements AfterViewInit {
  // 绑定模板中定义的deliveryDateInput引用
  @ViewChild('deliveryDateInput') deliveryDateInput!: ElementRef<HTMLInputElement>;
  // 替换为你实际使用的表单组变量名
  yourForm!: FormGroup;

  ngAfterViewInit(): void {
    const dateControl = this.yourForm.get('delivery_date');
    // 表单控件无值时才触发弹窗
    if (!dateControl?.value) {
      // 加0延迟规避Angular变更检测阶段操作DOM失效问题
      setTimeout(() => {
        const inputEl = this.deliveryDateInput.nativeElement;
        inputEl.focus();
        inputEl.click();
      }, 0);
    }
  }

  // 你的组件原有其他逻辑
}

说明：你之前尝试的onLoad属性无效，是因为input元素本身不支持load事件，该事件仅对window、图片、脚本等资源加载类元素生效。
兼容性提示：本方案适配主流桌面端Chrome、Edge、Firefox浏览器，移动端会自动唤起系统原生日期选择器，行为符合预期。

内容的提问来源于stack exchange，提问作者Nidhin Kumar