index.tsx (1161B)
1 import { useDisclosure } from '@mantine/hooks'; 2 import EventIcon from '@mui/icons-material/Event'; 3 import { IconButton } from '@mui/material'; 4 import { MobileDatePicker } from '@mui/x-date-pickers'; 5 import { memo, useRef } from 'react'; 6 7 import DatePickerLocalizationProvider from '../DatePickerLocalizationProvider'; 8 9 import type { MobileDatePickerProps } from '@mui/x-date-pickers/MobileDatePicker'; 10 11 const NothingField = function NothingField() { 12 return <></>; 13 }; 14 15 export default memo(function IconButtonDatePicker( 16 props: Omit<MobileDatePickerProps<Date>, 'open' | 'onOpen' | 'onClose'>, 17 ) { 18 const ref = useRef<HTMLButtonElement | null>(null); 19 const [open, handlers] = useDisclosure(false); 20 21 return ( 22 <DatePickerLocalizationProvider> 23 <IconButton disabled={props.disabled} onClick={handlers.open} ref={ref}> 24 <EventIcon /> 25 </IconButton> 26 27 <MobileDatePicker 28 {...props} 29 slots={{ field: NothingField, ...props.slots }} 30 slotProps={{ 31 toolbar: { toolbarFormat: 'M月d日' }, 32 ...props.slotProps, 33 }} 34 open={open} 35 onClose={handlers.close} 36 onOpen={handlers.open} 37 /> 38 </DatePickerLocalizationProvider> 39 ); 40 });