import React from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/themes/airbnb.css';
interface IDatepickerProps {
align: string;
mode?: 'range' | 'single';
onChange: (dates: any[]) => void;
}
const Datepicker = ({ align, onChange, mode = 'range' }: IDatepickerProps) => {
return (
<>
onChange(dates)}
className="custom-date-input"
options={{
mode: mode,
static: true,
monthSelectorType: 'static',
dateFormat: 'M j, Y',
locale: {
rangeSeparator: ' — ', // Native Flatpickr way to remove 'to'
},
defaultDate:
mode === 'single'
? new Date()
: [new Date().setDate(new Date().getDate() - 6), new Date()],
prevArrow:
'',
nextArrow:
'',
onReady: (_: any, __: any, instance: any) => {
const customClass = align ? align : '';
instance.calendarContainer.classList.add(
`flatpickr-${customClass}`
);
},
}}
/>
);
};
export default Datepicker;