@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
62 lines (61 loc) • 2.02 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { DateTimePicker } from '@mantine/dates';
import dayjs from 'dayjs';
export const EditableDateTimeRangePicker = ({ value, dateFormat, onChange, timePickerFormat = '12h', startProps = {}, endProps = {} })=>{
const onStartDateChange = (startDate)=>{
if (value?.[1] && dayjs(startDate) > dayjs(value[1])) {
onChange?.([
startDate,
null
]);
} else {
onChange?.([
startDate,
value?.[1]
]);
}
};
return /*#__PURE__*/ _jsxs(_Fragment, {
children: [
/*#__PURE__*/ _jsx(DateTimePicker, {
clearable: false,
label: "Start",
value: value?.[0],
onChange: onStartDateChange,
valueFormat: dateFormat,
w: 150,
styles: {
...startProps.styles
},
timePickerProps: {
format: timePickerFormat,
popoverProps: {
withinPortal: false
}
}
}),
/*#__PURE__*/ _jsx(DateTimePicker, {
clearable: false,
label: "End",
value: value?.[1],
minDate: value?.[0],
onChange: (endDate)=>onChange?.([
value?.[0],
endDate
]),
valueFormat: dateFormat,
w: 150,
styles: {
...endProps.styles
},
timePickerProps: {
format: timePickerFormat,
popoverProps: {
withinPortal: false
}
}
})
]
});
};
//# sourceMappingURL=EditableDateTimeRangePicker.js.map