@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
92 lines (91 loc) • 4.19 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 Number.isNaN(parsedDate.getTime()) ? new Date() : parsedDate;
};
// Initialize selectedDate with defaultValue or current date
const initialDate = value === undefined ? new Date() : getValidDate(value);
const [selectedDate, setSelectedDate] = useState(initialDate);
// Update selectedDate when value prop changes
useEffect(() => {
if (value === undefined)
return;
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',
placement: '!z-[1000] top-12',
},
header: {
// Customize calendar header if needed
},
footer: {
button: {
today: 'bg-primary-500 text-white hover:bg-primary-600 dark:bg-primary-500 dark:hover:bg-primary-600',
clear: 'border border-gray-300 bg-white text-gray-900 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
},
},
},
views: {
days: {
items: {
item: {
selected: 'bg-primary-500 text-white hover:bg-primary-600',
base: 'block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
},
},
},
months: {
items: {
item: {
selected: 'bg-primary-500 text-white hover:bg-primary-600',
base: 'block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
},
},
},
years: {
items: {
item: {
selected: 'bg-primary-500 text-white hover:bg-primary-600',
base: 'block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
},
},
},
decades: {
items: {
item: {
selected: 'bg-primary-500 text-white hover:bg-primary-600',
base: 'block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
},
},
},
},
};
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 && !Number.isNaN(validDate.getTime())) {
onChange(validDate);
}
}, defaultValue: datepickerDefaultValue, name: name, className: "", disabled: disabled, theme: datepickerTheme }) }));
}
export default DatePicker;