daterange-picker-reactjs v1.0.9

React date and date-range picker

Features

• Easily customized and add unique styles with Tailwindcss
• Lightweight
• Typescript support
• Select date ranges across multiple months
• Keyboard navigation

Usage/Examples

Date Picker

import { DatePicker } from "daterange-picker-reactjs";

function App() {
  return (
    <DatePicker 
        preSelectedDate={new Date(2025, 1, 12)} 
        onChange={(date) => console.log(date)}
        weekStartsOn = 0,
        customDaysOfWeek = {['S', 'M', 'T', 'W', 'T', 'F', 'S']}
    />
  )
}

NOTE: When customizing the customDaysOfWeek prop, make sure the start
day coincides with the weekStartsOn prop. Eg, if customDaysOfWeek's first 
day starts on Monday, the weekStartsOn value should be 1.

DatePicker Props

DateRange Picker

import { DateRangePicker } from "daterange-picker-reactjs";

function App() {
  return (
    <DateRangePicker
        onRangeChange={(range) => console.log("Selected Range:", range)}
        disabledDates={[
          new Date(2024, 11, 25),
          new Date(2024, 0, 1),
        ]}
        customDaysOfWeek={['S', 'M', 'T', 'W', 'T', 'F', 'S']}
        preSelectedRange={{
          start: new Date(2025, 0, 12),
          end: new Date(2025, 1, 12),
        }}
        monthTitleStyle="text-red-500 uppercase"
        daysOfWeekStyles="text-red-700"
        endDateStyle="bg-red-500 text-white rounded-r-full"
        isCurrentMonthStyle="text-red-900 hover:bg-red-500"
        visibleMonths={3}
        weekStartsOn={0} // Week starts on Sunday
    />
  )
}

DateRangePicker Props