ng2-datepicker未默认加载当前日期问题求助

看起来你遇到了两个小问题：组件没默认显示当前日期，以及选择器没有自动弹出。我来一步步帮你搞定：

1. 让组件默认显示当前日期 #

你现在的代码里，[(ngModel)]="date"绑定的date变量应该是没初始化的，所以组件不知道该渲染哪个日期。只需要在组件类里把date变量初始化为当前日期就行：

// 在组件类中添加这行，初始化date为当前日期
date: Date = new Date();

这样ngModel有了初始值，组件就会按照你设置的displayFormat默认显示当前日期了。

2. 让日期选择器默认自动打开 #

ng2-datepicker本身没有直接的配置项让选择器默认打开，但我们可以通过模板引用变量+组件方法来实现：

首先修改你的HTML代码，给ng-datepicker添加一个模板引用：

<div class="form-group">
  <ng-datepicker #datePickerRef [(ngModel)]="date" [options]="options"></ng-datepicker>
</div>

然后在组件的TS代码里，通过ViewChild获取这个引用，在组件初始化完成后调用选择器的toggle()方法来打开它：

import { Component, OnInit, ViewChild } from '@angular/core';
import { DatepickerComponent, DatepickerOptions } from 'ng2-datepicker';
import { enLocale } from 'ng2-datepicker/locales';

export class YourComponent implements OnInit {
  @ViewChild('datePickerRef') datePicker!: DatepickerComponent;
  date: Date = new Date();
  options: DatepickerOptions = {
    displayFormat: 'DD-MMM-YYYY',
    barTitleFormat: 'MMM YYYY',
    dayNamesFormat: 'dd',
    locale: enLocale,
    minDate: new Date(Date.now()),
  };

  ngOnInit(): void {
    // 用setTimeout确保组件已经渲染完成，避免调用toggle时出错
    setTimeout(() => {
      this.datePicker.toggle();
    }, 0);
  }
}

另外再检查一下enLocale的导入路径是否正确，要是路径不对也可能影响日期的正常显示哦。

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