49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import type { DatePickerProps as MantineDatePickerProps } from '@mantine/dates';
|
|
import { DatePicker as MantineDatePicker } from '@mantine/dates';
|
|
import styled from 'styled-components';
|
|
|
|
interface DatePickerProps extends MantineDatePickerProps {
|
|
maxWidth?: number | string;
|
|
width?: number | string;
|
|
}
|
|
|
|
const StyledDatePicker = styled(MantineDatePicker)<DatePickerProps>`
|
|
& .mantine-DatePicker-input {
|
|
color: var(--input-fg);
|
|
background: var(--input-bg);
|
|
|
|
&::placeholder {
|
|
color: var(--input-placeholder-fg);
|
|
}
|
|
}
|
|
|
|
& .mantine-DatePicker-icon {
|
|
color: var(--input-placeholder-fg);
|
|
}
|
|
|
|
& .mantine-DatePicker-required {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
& .mantine-DatePicker-label {
|
|
font-family: var(--label-font-family);
|
|
}
|
|
|
|
& .mantine-DateRangePicker-disabled {
|
|
opacity: 0.6;
|
|
}
|
|
`;
|
|
|
|
export const DatePicker = ({ width, maxWidth, ...props }: DatePickerProps) => {
|
|
return (
|
|
<StyledDatePicker
|
|
{...props}
|
|
sx={{ maxWidth, width }}
|
|
/>
|
|
);
|
|
};
|
|
|
|
DatePicker.defaultProps = {
|
|
maxWidth: undefined,
|
|
width: undefined,
|
|
};
|