Angular中bsDatepicker控件时间值异常的原因排查

问题描述 #

筛选区域的四个bsDatepicker控件（startDateFrom、startDateTo、endDateFrom、endDateTo）界面显示英国格式DD/MM/YYYY正常，但网络请求Payload中的值存在异常：

• 部分时间比输入时间早1小时
• 部分值变为选中日期的前一天（午夜减1小时）
• 仅最后一个控件值相对正常

组件.ts文件未修改这些值，控件值直接传递给API，相关模板代码：

<div class='col-md-3 pr-1'>
  <input autocomplete="off" id="startDateFrom" type="text" class="form-control date-input"
    placeholder="Pattern Start From (DD/MM/YYYY)" formControlName="startDateFrom" bsDatepicker
    [bsConfig]="{ dateInputFormat: 'DD/MM/YYYY', showWeekNumbers: false }" (ngModelChange)="onStartDateChange()"
    [maxDate]="filterForm.get('startDateTo') != null ? this.filterForm.get('startDateTo').value : null"
    [minDate]="minDate" windowScroll />
</div>
<div class='col-md-3 pr-1'>
  <input autocomplete="off" id="startDateTo" type="text" class="form-control date-input"
    placeholder="Pattern Start To (DD/MM/YYYY)" formControlName="startDateTo" bsDatepicker
    [attr.disabled]="!startDateEnabled ? '' : null"
    [bsConfig]="{ dateInputFormat: 'DD/MM/YYYY', showWeekNumbers: false }" (ngModelChange)="onStartDateChange()"
    [minDate]="filterForm.get('startDateFrom') != null ? this.filterForm.get('startDateFrom').value : null"
    windowScroll />
</div>
<div class='col-md-3 pr-1'>
  <input autocomplete="off" id="endDateFrom" type="text" class="form-control date-input"
    placeholder="Pattern End From (DD/MM/YYYY)" formControlName="endDateFrom" bsDatepicker
    [bsConfig]="{ dateInputFormat: 'DD/MM/YYYY', showWeekNumbers: false }" (ngModelChange)="onEndDateChange()"
    [maxDate]="filterForm.get('endDateTo') != null ? this.filterForm.get('endDateTo').value : null"
    [minDate]="minDate" windowScroll />
</div>
<div class='col-md-3'>
  <input autocomplete="off" id="endDateTo" type="text" class="form-control date-input"
    placeholder="Pattern End To (DD/MM/YYYY)" formControlName="endDateTo" bsDatepicker [bsConfig]="{ dateInputFormat: 'DD/MM/YYYY', showWeekNumbers:
    false }" (ngModelChange)="onEndDateChange()" [attr.disabled]="!endDateEnabled ? '' : null"
    [minDate]="filterForm.get('endDateFrom') != null ? this.filterForm.get('endDateFrom').value : null"
    windowScroll />
</div>

问题根源 #

这是时区转换导致的：bsDatepicker默认将选中日期转换为UTC时间，英国时区（GMT/BST）的夏令时切换会让本地午夜时间转换为UTC的前一天23:00（夏令时）或22:00（冬令时），最终导致日期偏移。

解决方案 #

1. 控件级禁用UTC转换 #

在每个bsDatepicker的bsConfig中添加useUtc: false，强制使用本地时区处理日期：

[bsConfig]="{ dateInputFormat: 'DD/MM/YYYY', showWeekNumbers: false, useUtc: false }"

2. 提交时格式化日期为字符串 #

如果API仅需要日期（无时间），提交前将Date对象格式化为纯字符串，避免时区影响：

// 格式化日期为YYYY-MM-DD（API常用格式）
formatDate(date: Date): string {
  if (!date) return '';
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 处理API请求参数
submitFilter() {
  const formValues = this.filterForm.value;
  const apiPayload = {
    startDateFrom: this.formatDate(formValues.startDateFrom),
    startDateTo: this.formatDate(formValues.startDateTo),
    endDateFrom: this.formatDate(formValues.endDateFrom),
    endDateTo: this.formatDate(formValues.endDateTo),
    // 其他筛选参数
  };
  // 调用API传递apiPayload
}

3. 全局配置时区 #

若项目多处使用bsDatepicker，可在根模块全局配置，避免重复设置：

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
  imports: [
    BsDatepickerModule.forRoot({
      useUtc: false,
      dateInputFormat: 'DD/MM/YYYY',
      showWeekNumbers: false
    })
  ]
})
export class AppModule { }

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