A simple and customizable horizontal date picker component for React applications.
- Horizontal scrolling date picker
- Customizable appearance
- Easy navigation between dates
- Lightweight and flexible
Install the package via npm:
npm install react-horizontal-date
Install the package via yarn:
yarn install react-horizontal-date
Install the package via pnpm:
pnpm install react-horizontal-date
import React, { useState } from "react";
import { ReactHorizontalDates } from "react-horizontal-date";
const App = () => {
const [selectedDate, setSelectedDate] = useState(new Date());
return (
<ReactHorizontalDates
initialDate={selectedDate}
onDateChange={setSelectedDate}
/>
);
};
export default App;
/** initial date */
intialDate ?: Date;
/** number of days to display */
days ?: 7 | 14 | 28;
/** function to trigger next week */
onPrevWeekChange ?: (date: Date) => void;
/** function to trigger next week */
onNextWeekChange ?: (date: Date) => void;
/** function to run when date is click */
onDateChange: ? (date: Date) => void;
/** classnames for component */
classNames ?: DeepPartial<Record<"wrapper" | "controls" | "control" |
"title" | "isSelected" | "day" | "dayNumber" | "dayDay" | "week",
string>>;
/** start of week */
weekStartsOn ?: "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat"
/** icons */
/** previous icon */
prevIcon?: ReactNode;
/** next icon */
nextIcon?: ReactNode;
Contributions, issues, and feature requests are welcome! Feel free to check the issues page to see if someone has already suggested what you’re thinking of. If you have a new idea, feel free to open an issue or a pull request.
This package is released under the MIT License.