如何为Material UI TimePicker设置9:00:00 AM格式的默认值

问题描述 #

需要为使用AdapterDayjs的Material UI TimePicker设置默认值，期望默认时间显示为9:00:00 AM，现有代码如下：

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <TimePicker
    value={valueFrom}
    onChange={(newValue) => {
      onChange(newValue, nameFrom);
      console.log('Time Value: ', newValue.$d.toLocaleTimeString('en-US')); // 9:00:00 AM
    }}
    renderInput={(params) => <TextField
      size="small"
      variant="outlined"
      required={valueCheckbox1}
      {...params} />}
    disabled={!valueCheckbox1 || valueCheckbox2 ? true : false}
    style={{color: 'white'}}
  />
</LocalizationProvider>

解决方案 #

由于你使用的是AdapterDayjs，TimePicker的value属性必须接收Dayjs实例，而非字符串。按以下步骤设置默认值：

• 确保已导入dayjs核心库
• 创建对应9:00 AM的Dayjs对象，作为valueFrom的初始值
• 可选：添加format属性强制指定显示格式

修改后的代码示例 #

import dayjs from 'dayjs';
// 若需确保12小时制显示，导入hourCycle插件（按需使用）
import hourCyclePlugin from 'dayjs/plugin/hourCycle';

dayjs.extend(hourCyclePlugin);

// 定义默认时间的Dayjs实例
const defaultTime = dayjs().hour(9).minute(0).second(0).hourCycle('h12');

// 组件内部使用
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <TimePicker
    value={valueFrom || defaultTime} // 绑定默认值
    format="h:mm:ss A" // 指定显示格式
    onChange={(newValue) => {
      onChange(newValue, nameFrom);
      console.log('Time Value: ', newValue.$d.toLocaleTimeString('en-US'));
    }}
    renderInput={(params) => <TextField
      size="small"
      variant="outlined"
      required={valueCheckbox1}
      {...params} />}
    disabled={!valueCheckbox1 || valueCheckbox2}
    style={{color: 'white'}}
  />
</LocalizationProvider>

关键说明 #

• dayjs().hour(9).minute(0).second(0) 生成当天9点0分0秒的Dayjs实例
• hourCycle('h12') 强制使用12小时制（适配AM/PM显示），若你的本地化配置已默认12小时制可省略
• format="h:mm:ss A" 定义显示格式：
  • h：12小时制的小时（1-12）
  • mm：两位数字的分钟
  • ss：两位数字的秒
  • A：大写的AM/PM标识

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