Spaces:
Runtime error
Runtime error
File size: 2,234 Bytes
56b6519 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import { Box, TextField } from '@mui/material';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Dayjs } from 'dayjs';
import React from 'react';
type DayPickerProps = {
label: string;
selectedDay: Dayjs | null;
onChange: React.Dispatch<React.SetStateAction<Dayjs | null>>;
};
const DayPicker: React.FC<DayPickerProps> = ({
label,
selectedDay,
onChange,
}) => {
const customTheme = createTheme({
palette: {
mode: 'dark',
background: {
paper: '#1e1e2e',
default: '#1e1e2e',
},
text: {
primary: '#ffffff',
},
},
components: {
MuiTextField: {
styleOverrides: {
root: {
backgroundColor: '#1d2432',
'& .MuiInputBase-input': {
color: '#ffffff',
},
'& .MuiInputLabel-root': {
color: '#ffffff',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: '#1d2432',
},
'&:hover fieldset': {
borderColor: '#1d2432',
},
'&.Mui-focused fieldset': {
borderColor: '#1d2432',
},
'& .MuiFormLabel-root': {
color: '#ffffff',
'&.Mui-focused': {
color: '#ffffff',
},
},
},
},
},
},
},
});
const handleDayChange = (value: Dayjs | null) => {
value && onChange(value);
};
return (
<ThemeProvider theme={customTheme}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Box sx={{ p: 2 }}>
<DatePicker
inputFormat="DD/MM/YYYY"
label={label}
onChange={handleDayChange}
renderInput={params => (
<TextField {...params} size="small" sx={{ minWidth: 200 }} />
)}
value={selectedDay}
/>
</Box>
</LocalizationProvider>
</ThemeProvider>
);
};
export default DayPicker;
|