如何为Material UI的KeyboardTimePicker设置默认值

问题出在KeyboardTimePicker的value属性类型不匹配：组件要求传入Date对象或moment实例，但你直接传了"10:20"这种字符串格式的时间，所以触发了「Invalid Time Format」错误。

正确的解决步骤： #

• 利用你代码中已经用到的moment库，将字符串格式的时间转换为moment实例，同时指定解析格式为HH:mm
• 增加空值判断，避免当props.value为空时出现解析错误

修改后的代码： #

const timeDefaultProps = {
    label: props.label,
    variant: "inline",
    inputVariant: "outlined",
    ampm: false,
    showTodayButton: true,
    format: "HH:mm",
    // 关键修改：将字符串转成moment实例，同时处理空值
    value: props.value ? moment(props.value, "HH:mm") : null,

    onChange: (date) => props.onChange(moment(date).format("HH:mm")),

    onBlur: (event) => {
      setBlured(false);
    },
    onFocus: () => {
      setBlured(true);
    },
    keyboardIcon: (
      <TimeIcon
        className={clsx(
          classes.calendarIcon,
          classes.calendarIconKeyboardPicker
        )}
      />
    ), 
  };

<KeyboardTimePicker {...timeDefaultProps} />

补充说明： #

moment的moment(str, format)方法会严格按照指定的格式解析字符串，生成合法的时间实例，组件就能正确识别并渲染这个默认时间了。如果后续你的props.value可能有其他格式，只需要对应调整moment的第二个参数即可。

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