Modern Date Range Picker Component – React Tailwindcss Datepicker

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