Angular5中ngx-bootstrap DatePicker UTC时间转换及日期获取问题咨询

我之前在项目里也踩过ngx-bootstrap datepicker的UTC转换坑，太懂这种日期不匹配的糟心了！给你几个实用的方案，保证能拿到和输入框显示完全一致的纯字符串日期，跟jQueryUI Datepicker的效果一模一样：

方案一：自定义日期格式化器（最推荐，一劳永逸） #

通过自定义BsDatepickerFormatter，可以直接让datepicker返回你想要的纯字符串格式，完全绕过UTC转换问题，而且整个项目的datepicker都能统一生效。

步骤1：创建自定义格式化器类 #

import { BsDatepickerFormatter } from 'ngx-bootstrap/datepicker';
import { Injectable } from '@angular/core';

@Injectable()
export class CustomDateFormatter extends BsDatepickerFormatter {
  // 这里的格式可以根据你的需求调整，比如'YYYY-MM-DD'、'MM/DD/YYYY'等
  format(value: Date): string {
    if (!value) {
      return '';
    }
    // 用本地时间的年、月、日，避免UTC转换偏移
    const year = value.getFullYear();
    const month = ('0' + (value.getMonth() + 1)).slice(-2); // 月份从0开始，要+1
    const day = ('0' + value.getDate()).slice(-2);
    return `${year}-${month}-${day}`;
  }
}

步骤2：在组件中配置使用 #

import { Component } from '@angular/core';
import { BsDatepickerFormatter } from 'ngx-bootstrap/datepicker';
import { CustomDateFormatter } from './custom-date-formatter';

@Component({
  selector: 'app-date-picker-example',
  templateUrl: './date-picker-example.component.html',
  providers: [
    { provide: BsDatepickerFormatter, useClass: CustomDateFormatter }
  ]
})
export class DatePickerExampleComponent {
  selectedDate: string = ''; // 直接拿到格式化后的纯字符串
}

模板代码 #

<input type="text" bsDatepicker [(bsValue)]="selectedDate" dateInputFormat="YYYY-MM-DD">

这样选择日期后，selectedDate就是和输入框显示完全一致的纯字符串，无需额外处理。

方案二：手动监听日期变化并格式化 #

如果只是个别组件需要处理，可以直接监听日期变化事件，手动将Date对象格式化为纯字符串：

模板代码 #

<input type="text" bsDatepicker [(bsValue)]="selectedDateObj" (bsValueChange)="formatSelectedDate($event)">

组件代码 #

selectedDateObj: Date | null = null;
formattedDate: string = '';

formatSelectedDate(date: Date | null) {
  if (!date) {
    this.formattedDate = '';
    return;
  }
  // 同样用本地时间的方法获取年月日，避开UTC
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  this.formattedDate = `${year}-${month}-${day}`;
  // 这里的formattedDate就是你要的纯字符串，直接传给后端即可
}

方案三：结合响应式表单处理 #

如果用的是Angular响应式表单，可以在控件的valueChanges中订阅并转换格式：

组件代码 #

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-form-date-picker',
  templateUrl: './form-date-picker.component.html'
})
export class FormDatePickerComponent implements OnInit {
  dateControl = new FormControl();
  formattedDate: string = '';

  ngOnInit(): void {
    this.dateControl.valueChanges.subscribe((date: Date | null) => {
      if (date) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);
        this.formattedDate = `${year}-${month}-${day}`;
      }
    });
  }
}

模板代码 #

<input type="text" bsDatepicker [formControl]="dateControl" dateInputFormat="YYYY-MM-DD">

为什么会出现UTC日期不匹配的问题？ #

ngx-bootstrap默认返回的是JavaScript的Date对象，当你把这个对象传给后端或者自动转换为字符串时，JS会默认将其转为UTC时间。比如你在东8区选择了2024-05-20，对应的UTC时间是2024-05-19T16:00:00.000Z，如果后端直接解析这个UTC时间，就会变成2024-05-19，导致日期不匹配。而上面的方案都是直接取本地时间的年、月、日，完全避开了UTC转换的偏移。

总的来说，自定义格式化器是最省心的方案，一次性配置后整个项目的datepicker都能统一返回你想要的纯字符串格式，完美解决问题。

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