如何在Angular 4的Bootstrap Datepicker中设置默认当前日期？

我来帮你解决这个问题，在Angular 4的响应式表单里用Bootstrap Datepicker设置当前日期为默认值，你需要调整一下代码的写法——响应式表单有自己的状态管理逻辑，不能混用ngModel和formControlName，具体步骤如下：

1. 正确初始化响应式表单的默认值 #

在组件类中，我们要通过FormControl来设置默认值，而不是依赖模板里的ngModel。先在表单初始化时，给submission_date字段赋值当前日期，格式要和Datepicker的yyyy-mm-dd保持一致：

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnInit, AfterViewInit {
  assignmentForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 生成yyyy-mm-dd格式的当前日期字符串
    const currentDate = new Date();
    const formattedCurrentDate = currentDate.toISOString().split('T')[0];

    // 初始化响应式表单，设置submission_date的默认值
    this.assignmentForm = this.fb.group({
      submission_date: [formattedCurrentDate]
    });
  }

  ngAfterViewInit(): void {
    // 等待DOM渲染完成后初始化Datepicker
    $('#submission_date').datepicker({ 
      autoclose: false, 
      format: 'yyyy-mm-dd',
      defaultDate: new Date() // 让Datepicker面板默认选中当前日期
    });

    // 可选：同步表单值和Datepicker的选中状态
    this.assignmentForm.get('submission_date')?.valueChanges.subscribe(date => {
      $('#submission_date').datepicker('setDate', date);
    });
  }
}

2. 修正HTML模板代码 #

响应式表单中禁止同时使用ngModel和formControlName，这会导致状态冲突。只需要保留formControlName和id即可：

<form [formGroup]="assignmentForm">
  <input 
    type="text" 
    formControlName="submission_date" 
    id="submission_date"
  >
</form>

关键说明 #

• 响应式表单的所有状态（包括默认值）都应该通过FormControl管理，这是响应式表单的核心原则，避免模板和组件状态不一致的问题。
• 用new Date().toISOString().split('T')[0]可以快速生成符合要求的yyyy-mm-dd格式日期，和Datepicker的配置匹配。
• 在ngAfterViewInit钩子中初始化Datepicker，确保DOM元素已经渲染完成，不会出现找不到#submission_date元素的错误。
• 可选的valueChanges订阅，是为了保证当表单值通过代码修改时，Datepicker的选中状态也会同步更新。

这样调整后，你的输入框就会默认显示当前日期，同时Datepicker也能正常工作啦！

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