如何在p-calendar组件中设置默认时间且日期字段为空

要实现p-calendar默认时间为上午8:00且日期字段为空的需求，核心问题在于PrimeNG的p-calendar（datetime模式）绑定的是完整的Date对象，而Date对象必须包含日期和时间信息。我们可以通过两种方式实现需求：

方案一：面板打开时自动设置默认时间 #

这种方案保持输入框默认为空，仅在用户打开日历面板时自动选中8:00时间，适合不需要输入框提前显示时间的场景。

1. 调整FormControl初始化 #

保持初始值为null，确保输入框默认无内容：

start = new FormControl(null, [Validators.required]);

2. 绑定面板显示事件 #

在p-calendar上添加onShow事件，触发默认时间设置：

<p-calendar #timePicker
            [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"
            dateFormat="dd-mm-yy" [formControl]="start" [showTime]="true"
            [showSeconds]="false" hourFormat="24" inputId="time"
            (onShow)="setDefaultTime(timePicker)">
</p-calendar>

3. 实现时间设置逻辑 #

在组件类中编写方法，直接操作日历面板的时间组件：

setDefaultTime(calendar: any) {
  // 仅当未选择任何日期时设置默认时间
  if (!this.start.value) {
    calendar.timeComponent.hour = 8;
    calendar.timeComponent.minute = 0;
    calendar.timeComponent.updateModel();
  }
}

效果 #

• 页面加载时输入框为空
• 打开日历面板，时间自动选中8:00
• 选择日期后，日期填充到输入框，时间保持8:00（可手动修改）

方案二：输入框默认显示8:00（无日期） #

如果需要输入框提前显示08:00，可通过自定义格式化逻辑实现，用固定标记日期区分“未选择日期”状态。

1. 初始化默认时间 #

用1970-01-01作为标记日期，仅设置时间为8:00：

private getDefaultDateTime(): Date {
  const date = new Date('1970-01-01');
  date.setHours(8, 0, 0, 0);
  return date;
}

start = new FormControl(this.getDefaultDateTime(), [Validators.required]);

2. 自定义格式化与解析函数 #

编写函数控制输入框的显示和值的解析：

// 格式化输入框显示内容
customFormatter(date: Date): string {
  if (!date) return '';
  // 标记日期仅显示时间
  if (date.getFullYear() === 1970 && date.getMonth() === 0 && date.getDate() === 1) {
    return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  }
  // 正常日期显示日期+时间
  return `${date.getDate().toString().padStart(2, '0')}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getFullYear().toString().slice(-2)} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
}

// 解析用户输入的值
customParser(value: string): Date {
  if (!value) return null;
  // 仅输入时间时，用标记日期存储
  if (value.includes(':') && !value.includes('-')) {
    const [hours, minutes] = value.split(':');
    const defaultDate = new Date('1970-01-01');
    defaultDate.setHours(parseInt(hours), parseInt(minutes), 0, 0);
    return defaultDate;
  }
  // 输入日期+时间时正常解析
  const [datePart, timePart] = value.split(' ');
  const [day, month, year] = datePart.split('-');
  const [hours, minutes] = timePart.split(':');
  return new Date(`20${year}-${month}-${day}T${hours}:${minutes}:00`);
}

3. 绑定到p-calendar #

将格式化和解析函数绑定到组件：

<p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"
            [formControl]="start" [showTime]="true"
            [showSeconds]="false" hourFormat="24" inputId="time"
            [formatter]="customFormatter" [parser]="customParser">
</p-calendar>

效果 #

• 页面加载时输入框显示08:00
• 选择日期后自动切换为dd-mm-yy 08:00格式
• 提交表单时需自行判断标记日期，若存在则说明用户未选择日期，需做对应处理

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