A modern, customizable, themeable date range picker component based on TailwindCSS and Day.js.
How to use it:
1. Instal and import the React Tailwindcss Datepicker.
# Yarn $ yarn add react-tailwindcss-datepicker # NPM $ npm i react-tailwindcss-datepicker
import React, {useState} from "react"; import Datepicker from "react-tailwindcss-datepicker";
2. Create a date range picker.
const App = () => { const [value, setValue] = useState({ startDate: new Date(), endDate: new Date().setMonth(11) }); const handleValueChange = (newValue) => { console.log("newValue:", newValue); setValue(newValue); } return ( <div> <Datepicker value={value} onChange={handleValueChange} /> </div> ); }; export default App;
3. Available component props to customize the date range picker.
primaryColor?: string, value: { startDate: Date | string, endDate: Date | string } | null, onChange: (value: {startDate: string | null, endDate: string | null}) => void, useRange?: boolean, showFooter?: boolean, showShortcuts?: boolean, configs?: { shortcuts?: { today?: string, yesterday?: string, past?: (period: number) => string, currentMonth?: string, pastMonth?: string, } | null, footer?: { cancel?: string, apply?: string } | null } | null, asSingle?: boolean, placeholder?: string, separator?: string, startFrom?: Date | null, i18n?: string
Preview:
Download Details:
Author: onesine
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/onesine/react-tailwindcss-datepicker
License: MIT