feat: update TimePicker to single column with 30-minute steps

This commit is contained in:
Lê Nhân Phụng
2025-12-05 14:58:19 +07:00
committed by Benoit TELLIER
parent c885d18fb5
commit e4d3722992
@@ -321,6 +321,8 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
onChange={handleStartTimeChange} onChange={handleStartTimeChange}
open={isStartTimeOpen} open={isStartTimeOpen}
onClose={() => setIsStartTimeOpen(false)} onClose={() => setIsStartTimeOpen(false)}
thresholdToRenderTimeInASingleColumn={48}
timeSteps={{ minutes: 30 }}
slotProps={{ slotProps={{
...getSlotProps("start-time-input"), ...getSlotProps("start-time-input"),
openPickerButton: { sx: { display: "none" } }, openPickerButton: { sx: { display: "none" } },
@@ -368,6 +370,8 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
onChange={handleEndTimeChange} onChange={handleEndTimeChange}
open={isEndTimeOpen} open={isEndTimeOpen}
onClose={() => setIsEndTimeOpen(false)} onClose={() => setIsEndTimeOpen(false)}
thresholdToRenderTimeInASingleColumn={48}
timeSteps={{ minutes: 30 }}
slotProps={{ slotProps={{
...getSlotProps( ...getSlotProps(
"end-time-input", "end-time-input",
@@ -452,6 +456,8 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
disabled={allday} disabled={allday}
open={isStartTimeOpen} open={isStartTimeOpen}
onClose={() => setIsStartTimeOpen(false)} onClose={() => setIsStartTimeOpen(false)}
thresholdToRenderTimeInASingleColumn={48}
timeSteps={{ minutes: 30 }}
slotProps={{ slotProps={{
...getSlotProps("start-time-input"), ...getSlotProps("start-time-input"),
openPickerButton: { sx: { display: "none" } }, openPickerButton: { sx: { display: "none" } },
@@ -476,6 +482,8 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
disabled={allday} disabled={allday}
open={isEndTimeOpen} open={isEndTimeOpen}
onClose={() => setIsEndTimeOpen(false)} onClose={() => setIsEndTimeOpen(false)}
thresholdToRenderTimeInASingleColumn={48}
timeSteps={{ minutes: 30 }}
slotProps={{ slotProps={{
textField: { textField: {
size: "small", size: "small",