pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
52 lines (51 loc) • 2.27 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, 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;
};
// Initialize selectedDate with defaultValue or current date
const initialDate = value !== undefined ? getValidDate(value) : new Date();
const [selectedDate, setSelectedDate] = useState(initialDate);
// Update selectedDate when value prop changes
useEffect(() => {
if (value !== undefined) {
setSelectedDate(getValidDate(value));
}
}, [value]);
// Initialize defaultValue for the Datepicker component
const datepickerDefaultValue = new Date();
const datepickerTheme = {
root: {
input: {
field: {
base: 'w-full h-[36px] [&>input]:rounded-md [&>input]:border [&>input]:bg-transparent [&>input]:h-[36px]', // Added fixed height
},
},
},
popup: {
root: {
base: '!z-[1000] !absolute [&>div>div>button:first-child]:bg-primary-500 [&>div>div>button:first-child]:hover:bg-primary-600', // 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: datepickerDefaultValue, name: name, className: "", disabled: disabled, theme: datepickerTheme }) }));
}
export default DatePicker;