import React from 'react'
import { Stack, Typography } from '@mui/material'
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers'
import dayjs, { Dayjs } from 'dayjs'
interface ResponsiveDateTimePickerProps {
value: Dayjs | null
maxDateTime: Dayjs | null
minDateTime: Dayjs | null
disabled?: boolean
label?: string
onAccept: (date: Dayjs | null) => void
}
const ResponsiveDateTimePicker: React.FunctionComponent<
ResponsiveDateTimePickerProps
> = ({ value, maxDateTime, minDateTime, disabled, label, onAccept }) => {
type textFieldSizes = 'small' | 'medium' | undefined
type actionBarOptions = 'today' | 'accept'
const dateTimePickerProps = {
viewRenderers: !label
? {
hours: renderTimeViewClock,
minutes: renderTimeViewClock,
seconds: renderTimeViewClock,
}
: undefined,
value,
maxDateTime: maxDateTime || undefined,
minDateTime: minDateTime || undefined,
onAccept: (date: unknown) => {
if (dayjs.isDayjs(date)) {
onAccept(date as Dayjs)
} else {
onAccept(null)
}
},
format: 'DD MMMM YYYY, h:mm a',
disabled,
slotProps: {
actionBar: {
actions: ['today' as actionBarOptions, 'accept' as actionBarOptions],
sx: { padding: 0 },
},
textField: () => ({
size: 'small' as textFieldSizes,
InputProps: {
placeholder: value ? '' : 'Forever',
sx: {
height: '40px',
},
slotProps: {
input: {
sx: {
height: '21px !important',
fontSize: '14px !important',
padding: '8.5px 30px !important',
},
},
},
},
}),
},
}
return (
<Stack direction="row" alignItems="center">
{label && (
<Typography
variant="subtitle1"
sx={{ minWidth: '120px' }}
paddingRight={0}
>
{label}
</Typography>
)}
<DateTimePicker {...dateTimePickerProps} />
</Stack>
)
}
export default ResponsiveDateTimePicker
While using the Datetime picker and displaying both the date and time parts in the picker, I have observed this sequence:
- User clicks the picker to display it
- User selects a date
- User chooses an hour (and can pick am or pm)
- User picks minutes (can also select am or pm here)
The issue is that when the user selects minutes, the function call is triggered immediately instead of waiting for the user to click "Accept". This disrupts the flow because I want the action to be executed only when the user explicitly clicks "Accept", allowing them to go back and adjust the hour if needed. How can I ensure that the function is called only when the user clicks "Accept" and not just by selecting minutes?
I would appreciate any help and guidance in resolving this issue. Thank you.