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

| Name | Description | Type | isRequired | Default | |-------|-----|-----|-------|--------| | preSelectedDate | Default date selected | Date | null | null | |isSelectedStyle | Style for highlighting selected date | string | false | bg-blue-500 text-white | onChange | Callback for returning your selected date. Takes in a date prop | Function | true | - | weekStartsOn | Start day of the week | Number | false | 0 | customDaysOfWeek | Customize week names | string[] | false | ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] | containerStyle | CSS rules for styling calendar container | String | false | py-4 px-2 border rounded shadow-md | disabledDate | Date to be unselectable | Date | false | null | | showYearMonthDivider | Opt in to have the year/month divider visible or not | boolean | false | true | daysOfWeekStyles | Custom styles for days of the week | string | false | text-center font-medium text-black/70 | | visibleDatesStyle | Style for dates in the month | string | false | hover:bg-blue-100 cursor-pointer | prevMonthBtnIcon | Some icon/component to fit into the button for navigating to previous months | React.ReactNode | false | Chevron-left icon | nextMonthBtnIcon | Some icon/component to fit into the button for navigating to nextious months | React.ReactNode | false | Chevron-right icon | outlineStyle | Custom outline style to be applied on all focused states | string | false | outline-blue-500

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

| Name | Description | Type | isRequired | Default | |-------|-----|-----|-------|--------| | onRangeChange | Callback for returning your selected range. Takes in a range prop | Function | true | - | disabledDates | Array of dates to be unselectable | Date[] | false | null | | customDaysOfWeek | Customize week names | string[] | false | ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] | preSelectedRange | Highlight a range of dates preselected on render. Great for when editing | { start: Date; end: Date } | false | null startDateStyle | Styling for first day of range | string | false | bg-blue-500 text-white rounded-l-full | inRangeStyles | Styling for dates in range other than first and last dates | string | false | bg-blue-200 text-blue-800 | endDateStyle | Styling for last day of range | string | false | bg-blue-500 text-white rounded-r-full | visibleDatesStyle | Styling for dates visible | string | false | some css classes | daysOfWeekStyles | Styling for days of the week | string | false | font-medium text-black/70 | monthTitleStyle | Styling for month name and year title | string | false | text-center font-semibold | containerStyle | CSS rules for styling calendar container | String | false | py-4 px-2 border rounded shadow-md | visibleMonths | The number of months to show at a time | number | false | 2 | weekStartsOn | Preferred start day of the week | number | false | 0 | prevMonthBtnIcon | Some icon/component to fit into the button for navigating to previous months | React.ReactNode | false | Chevron-left icon | nextMonthBtnIcon | Some icon/component to fit into the button for navigating to nextious months | React.ReactNode | false | Chevron-right icon | outlineStyle | Custom outline style to be applied on all focused states | string | false | outline-blue-500 | showYearMonthDivider | Opt in to have the year/month divider visible or not | boolean | false | true