@meinefinsternis/react-horizontal-date-picker
v1.0.1
Published
A simple component that allows the user to choose a date from a scrollable monthly view.
Downloads
1,846
Maintainers
Readme
Installation
The package can be installed via npm:
npm install @meinefinsternis/react-horizontal-date-picker --save
Below is a simple example of how to use the Datepicker in a React view.
import React from "react";
import { Datepicker, DatepickerEvent} from "@meinefinsternis/react-horizontal-date-picker";
import { enUS } from "date-fns/locale";
const Example = () => {
const [date, setDate] = React.useState<{
endValue: Date | null;
startValue: Date | null;
rangeDates: Date[] | null;
}>({
startValue: null,
endValue: null,
rangeDates: [],
});
const handleChange = (d: DatepickerEvent) => {
const [startValue, endValue, rangeDates] = d;
setDate((prev) => ({ ...prev, endValue, startValue, rangeDates }));
};
return (
<Datepicker
onChange={handleChange}
locale={enUS}
startValue={date.startValue}
endValue={date.endValue}
/>
);
};
Props
Common props you may want to specify include:
locale
:Locale
- locales directly exported from date-fns/locales.onChange
:(d: [Date | null, Date | null, Date[] | null]) => void
- subscribe to change eventsstartValue
:Date | null
- defines the initial start valueendValue
:Date | null
- defines the initial end valuestartDate
?:Date
- defines minimum date. Defaultnew Date()
.endDate
?:Date
- defines maximum date. Defaultnew Date() + 3 months
className
?:object
- apply a className to the customizedisabledDates
?:Date[]
- list of disabled dates