Primeng Calendar无法从数据库设置日期及Moment格式化报错求助

嘿，我之前也碰到过类似的问题，咱们一步步来搞定它！

问题根源 #

你遇到的Uncaught (in promise): Unexpected literal at position 2错误，核心原因是Moment解析日期时用错了格式参数。服务器返回的2018-04-17T16:41:47.683是标准ISO 8601格式，如果你硬给Moment传"YYYY.MM.DD HH.MM"这种格式去解析，肯定会不匹配报错——原始日期里是-和T分隔，不是.啊！

另外，PrimeNG Calendar默认期望绑定的是Date对象，要是直接传字符串或者格式不对的Moment对象，也会出问题。

具体解决方案 #

1. 正确解析服务器返回的日期 #

Moment可以直接识别ISO格式的日期，完全不用手动指定格式，省得写错：

// 假设从后端拿到的日期字符串是serverDate
const serverDate = '2018-04-17T16:41:47.683';
const momentDate = moment(serverDate); // 直接解析，完美适配ISO格式

如果非要手动指定格式（其实没必要，多此一举），得用和原始字符串完全匹配的格式：

const momentDate = moment(serverDate, 'YYYY-MM-DDTHH:mm:ss.SSS');

2. 绑定到PrimeNG Calendar #

有两种方式让Calendar正常显示这个日期：

方式一：转成Date对象（最省心）

把Moment对象转成原生Date，直接绑定到ngModel就行：

// 在组件类里
this.startDate = momentDate.toDate();

模板里这样写：

<p-calendar id="StartDate" 
            inputStyleClass="form-control" 
            [showIcon]="true" 
            showTime="true" 
            hourFormat="24"
            [(ngModel)]="startDate"></p-calendar>

方式二：让Calendar支持Moment对象

如果你想直接用Moment对象绑定，可以在模块里配置Calendar的全局设置：

import { CalendarModule } from 'primeng/calendar';
import * as moment from 'moment';

@NgModule({
  imports: [
    CalendarModule.forRoot({
      useMoment: true,
      moment: moment
    })
  ]
})
export class YourModule { }

之后就可以直接把Moment对象绑定到ngModel了，不用转Date。

3. 设置显示格式为YYYY.MM.DD HH.MM #

要让Calendar显示成你想要的格式，直接用它的dateFormat属性，注意PrimeNG的格式规则和Moment有点不一样：

<p-calendar id="StartDate" 
            inputStyleClass="form-control" 
            [showIcon]="true" 
            showTime="true" 
            hourFormat="24"
            dateFormat="yy.mm.dd HH.mm" <!-- 这里yy对应4位年，mm是月/分，dd是日 -->
            [(ngModel)]="startDate"></p-calendar>

解释下格式符：yy是4位年份，mm是月份（或分钟，在时间部分），dd是日期，HH是24小时制的小时。

最后再检查下 #

确保你之前没有犯这两个错误：

• 用错误的格式字符串去解析ISO日期
• 直接把原始的ISO字符串绑定到Calendar（它不认，要转成Date或Moment对象）

这样应该就能正常显示数据库返回的日期了！

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