material-ui的时间选择器组件是否可以在打开的对话框中显示选择的时间

Question

我想显示 TimePicker component dialog. Is that possible ? It should basically look the same as the StaticTimePicker 组件上的时间选择器值，但显示时间除外。

总结：我想要的是第二张图片中的TimePicker组件显示选择的时间，就像第一张图片中的StaticTimePicker一样。

1 - StaticTimePicker:

2 - TimePicker:

Answer 1

那就用StaticTimePicker我不明白你的问题

export default function MaterialUIPickers() {
  const [value, setValue] = React.useState<Date | null>(
    new Date(),
  );

  const handleChange = (newValue: Date | null) => {
    setValue(newValue);
  };

  return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticTimePicker
    displayStaticWrapperAs="mobile"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>
  );
}

https://stackblitz.com/edit/react-fgwzeg?file=demo.tsx

Answer 2

有一个道具可以做到这一点，showToolbar={true}。它可以在 the API documentation.

中找到

这是它应该如何使用：

<TimePicker
  showToolbar={true}
  label="Time"
  value={value}
  onChange={handleChange}
  renderInput={(params) => <TextField {...params} />}
/>

这里是 code Sandbox 更多上下文。

material-ui的时间选择器组件是否可以在打开的对话框中显示选择的时间

Is it possible for material-ui's timepicker component to display to picked time within the opened dialog

javascript

timepicker

reactjs

material-table