pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
47 lines (46 loc) • 1.98 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import 'flowbite';
import { Datepicker } from 'flowbite-react';
import { useEffect, useState } from 'react';
function DatePicker({ value, defaultValue, disabled, name, onChange }) {
// Ensure initial value is a valid Date object
const getValidDate = (date) => {
if (!date)
return new Date(); // Return current date if no date is provided
const parsedDate = new Date(date);
return isNaN(parsedDate.getTime()) ? new Date() : parsedDate;
};
const [selectedDate, setSelectedDate] = useState(getValidDate(value ?? defaultValue));
useEffect(() => {
if (value !== undefined) {
setSelectedDate(getValidDate(value));
}
}, [value]);
const datepickerTheme = {
root: {
input: {
field: {
base: 'w-full [&>input]:bg-transparent', // Directly targets input element
},
},
},
popup: {
root: {
base: '!z-[1000] !absolute [&>div>div>button:first-child]:bg-core-add [&>div>div>button:first-child]:hover:bg-core-add-hover', // Calendar popup z-index
placement: '!z-[1000] top-12', // Position relative to input
},
header: {
// Customize calendar header if needed
},
},
};
return (_jsx("div", { children: _jsx(Datepicker, { value: selectedDate, onChange: (date) => {
// Ensure we're working with a valid Date object
const validDate = date ? new Date(date) : new Date();
setSelectedDate(validDate);
if (onChange && !isNaN(validDate.getTime())) {
onChange(validDate);
}
}, defaultValue: defaultValue ? new Date(defaultValue) : new Date(), name: name, className: "", disabled: disabled, theme: datepickerTheme }) }));
}
export default DatePicker;