如何将Nebular Datepicker的ISO日期格式转换为纯日期格式？（Angular 11项目）

这个问题我之前在项目里碰到过，本质是时区转换导致的UTC与本地时间差异——你选的2021-07-23是本地时间，Nebular默认转成带UTC标识的ISO字符串后，就变成了前一天的17:00（比如你的时区比UTC晚7小时），后端直接解析这个ISO字符串时，会默认按UTC处理，自然就拿到了前一天的日期。

针对你的需求，完全可以让Nebular Datepicker输出纯日期格式，不用ISO字符串，这里给你几个可行的方案：

方案1：给单个Datepicker指定输出格式 #

Nebular的nb-datepicker支持通过format属性直接设置日期输出格式，这样它就会返回你想要的yyyy-MM-dd字符串，而不是ISO格式：

<nb-input [nbDatepicker]="datePicker">
  <input nbInput placeholder="选择日期" [(ngModel)]="selectedDate">
</nb-input>
<nb-datepicker #datePicker format="yyyy-MM-dd"></nb-datepicker>

如果用响应式表单，绑定控件时同样可以在Datepicker上设置format属性，提交表单时拿到的就是纯日期字符串，直接传给后端即可。

方案2：表单提交前手动转换日期 #

如果不想改动现有模板的配置，可以在提交表单时，把ISO日期转换为本地日期的纯字符串：

// 假设表单控件的值是isoDate（比如 "2021-07-22T17:00:00.000Z"）
const dateObj = new Date(this.isoDate);
// 转换为 yyyy-MM-dd 格式
const pureDate = `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')}`;

// 把 pureDate 传给后端

这种方式适合快速修改现有代码，不用动组件模板。

方案3：全局配置所有Datepicker的默认格式 #

如果你的项目里有很多Datepicker都需要纯日期格式，可以在全局模块里配置Nebular的日期处理模块，统一设置默认格式：

import { NgModule } from '@angular/core';
import { NbDatepickerModule, NbDateFnsDateModule } from '@nebular/theme';

@NgModule({
  imports: [
    NbDatepickerModule.forRoot(),
    // 全局设置日期格式为 yyyy-MM-dd
    NbDateFnsDateModule.forRoot({ format: 'yyyy-MM-dd' }),
  ],
})
export class AppModule { }

这样所有的NbDatepicker都会默认输出纯日期字符串，不用每个组件单独配置。

另外补充一句：如果后端可以调整，也可以让后端在解析ISO日期时考虑时区，但前端直接输出纯日期的方式更直接，毕竟后端只需要日期部分，不需要时区信息。

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