Angular 4新手求教：如何获取ngbDatepicker的输入值

嘿，作为Angular 4新手碰到这个问题太正常了，我给你整理了几种简单可靠的方式来获取ngbDatepicker的选中值：

1. 双向数据绑定（最推荐的常规用法） #

这是Angular里最直观的方式，能让组件类和视图实时同步数据：

• 第一步，在你的组件类中定义一个变量来存储日期：

  import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
  
  export class YourComponent {
    selectedDate: NgbDateStruct; // 用来存储选中的日期
  }
  

• 第二步，在HTML的input标签上添加双向绑定指令[(ngModel)]：

  <input id="datepicker" class="form-control col-7" 
         placeholder="{{dateWording}}" 
         ngbDatepicker #date="ngbDatepicker" 
         required pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}"
         [(ngModel)]="selectedDate"> <!-- 新增这行 -->
  

• 第三步，确保你的模块已经导入了FormsModule（在app.module.ts或者对应组件的模块里）：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // ...其他导入
      FormsModule
    ]
  })
  

这样之后，你在组件里任何地方都可以通过this.selectedDate获取到选中的日期，它的结构是{year: number, month: number, day: number}。

2. 通过模板引用变量直接获取 #

你已经在HTML里定义了#date="ngbDatepicker"这个模板引用变量，直接用它就能拿到值：

• 修改按钮的点击事件，把模板变量传进去：

  <button class="btn btn-outline-secondary picto-calender" 
          (click)="getSelectedDate(date)" 
          type="button"></button>
  

• 在组件类里添加对应的方法：

  import { NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';
  
  export class YourComponent {
    getSelectedDate(datePicker: NgbDatepicker) {
      const selectedDate = datePicker.model;
      console.log('选中的日期：', selectedDate);
      // 这里可以做后续处理
    }
  }
  

3. 响应式表单方式（适合复杂表单场景） #

如果你的页面用了Angular的响应式表单，这种方式更灵活：

• 在组件类里定义一个表单控件：

  import { FormControl } from '@angular/forms';
  import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
  
  export class YourComponent {
    dateControl = new FormControl<NgbDateStruct | null>(null);
  }
  

• 在HTML的input上绑定这个表单控件：

  <input id="datepicker" class="form-control col-7" 
         placeholder="{{dateWording}}" 
         ngbDatepicker #date="ngbDatepicker" 
         required pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}"
         [formControl]="dateControl"> <!-- 新增这行 -->
  

• 确保模块导入了ReactiveFormsModule：

  import { ReactiveFormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // ...其他导入
      ReactiveFormsModule
    ]
  })
  

之后你可以通过this.dateControl.value获取值，还能监听日期变化：

this.dateControl.valueChanges.subscribe((value) => {
  console.log('日期变化了：', value);
});

额外小技巧：转换为字符串格式 #

如果需要把NgbDateStruct转换成YYYY-MM-DD这样的字符串格式，可以写个简单的工具函数：

formatDate(date: NgbDateStruct | null): string {
  if (!date) return '';
  const pad = (num: number) => num < 10 ? `0${num}` : num.toString();
  return `${date.year}-${pad(date.month)}-${pad(date.day)}`;
}

内容的提问来源于stack exchange，提问作者Yaël