Big L DatePicker

A lightweight and fully customizable React Date Picker — freely customize how days, months, and years are rendered.
No enforced styling, no opinionated themes — you control the calendar UI.

🆕 New: Range Selection

Now supporting range selection with mode="range" and a customizable maxRangeDays limit. Instantly respond to every change in the selected range, enabling dynamic, real-time interactions—perfect for bookings and interval-based flows. Highly recommended for developers needing precise control over date ranges.

For change requests or feature suggestions, please reach out at [email protected].

Live Demo

📦 Installation

npm install big-l-date-picker

OR

yarn add big-l-date-picker

| Prop | Type | Default | Description | | --------------------- | ----------------------------------------------- | -------------- | --------------------------------------------------------------------------- | | mode | 'single' \| 'range' | 'single' | 'single' = one date; 'range' = multiple dates (up to maxRangeDays) | | maxRangeDays | number | 2 | When mode="range", max number of days selectable (increase for longer ranges) | | value | Date | — | Current selected date (single mode) | | valueRange | Date[] | — | Selected dates (range mode, controlled) | | onChange | (value: Date \| undefined) => void | — | Callback when the single date changes | | onRangeChange | (dates: Date[]) => void | — | Callback when the selected range changes | | onDateRangeChange | (dates: Date[]) => void | — | Emitter for date range changes only (fires on every add/remove day) | | closeDatePicker | boolean | false | Automatically close the picker after selecting a date | | placeholder | string | "dd/mm/yyyy" | Placeholder text for the input | | showLabel | boolean | false | Show a label above the date picker | | className | string | "" | Custom CSS class for styling | | disabled | boolean | false | Disable the date picker input | | label | string | "" | Label text when showLabel is true | | name | string | "" | Name attribute for form usage | | id | string | "" | ID attribute for the input | | disableFutureDates | boolean | false | Prevent selecting future dates | | disablePastDates | boolean | false | Prevent selecting past dates | | minDate | Date | — | Minimum selectable date | | maxDate | Date | — | Maximum selectable date | | weekStartsOnSunday | boolean | true | Start the week on Sunday (false = Monday) | | gridPosition | GridPosition ("left" \| "center" \| "right") | "center" | Position of the date picker grid relative to the input | | renderDays | (days: dayItem[]) => dayItem[] | — | Custom transformer to modify or style generated day items | | renderMonths | (months: monthItem[]) => monthItem[] | — | Custom transformer to modify or style generated month items | | renderYears | (years: yearItem[]) => yearItem[] | — | Custom transformer to modify or style generated year items |

🖥 Usage Example

import React, { useState } from "react";
import { DatePicker } from "big-l-date-picker";

export default function App() {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());

  const handleDateChange = (date: Date | undefined) => {
    setSelectedDate(date);
  };

  return (
    <div style={{ maxWidth: 300 }}>
      <DatePicker
        onChange={handleDateChange}
        closeDatePicker={true}
        placeholder="Select a date"
        value={selectedDate}
        label="Choose Date"
        showLabel
        disabled={false}
        id="date-picker"
        name="date"
        className="custom-datepicker"
         renderDays={(days) => {
            return days.map((day) => {
                if (day.date < new Date()) {
                    day.custom = <div style={{ display: "flex", flexDirection: 'column', alignItems: 'center' }}>
                        <div style={{ fontSize: 12 }}>{day.label}</div>
                        <div style={{ fontSize: 8, color: 'green' }}>₹{Math.abs(10 - Number(day.label)).toFixed(2)}</div>
                    </div>;
                }

                return day;
            });
        }}
        renderMonths={(months) => {
            return months.map((month) => {
                if (month.month <= 9) {
                    month.custom = <div style={{ display: "flex", flexDirection: 'column', alignItems: 'center' }}>
                        <div style={{ fontSize: 12 }}>{month.label}</div>
                        <div style={{ fontSize: 12, color: 'red' }}>Offer!</div>
                    </div>;
                }

                return month;
            });
        }}
        renderYears={(years) => {
            return years.map((year) => {
                if (year.year <= 2025 && year.year > 2010) {
                    year.custom = <div style={{ display: "flex", flexDirection: 'column', alignItems: 'center' }}>
                        <div style={{ fontSize: 12 }}>{year.label}</div>
                        <div style={{ fontSize: 8, color: 'blue' }}>Discount!</div>
                    </div>;
                }

                return year;
            });
        }}
      />
    </div>
  );
}

📅 Date range mode

Use mode="range" to let users select multiple days. By default up to 2 days can be selected; pass maxRangeDays to allow more. Click a day to add it, click again to remove. Days between first and last selected are shown as in-range.

import React, { useState } from "react";
import { DatePicker } from "big-l-date-picker";

export default function RangeExample() {
  const [range, setRange] = useState<Date[]>([]);

  return (
    <DatePicker
      mode="range"
      maxRangeDays={7}
      valueRange={range}
      onDateRangeChange={(dates) => setRange(dates)}
      placeholder="Select up to 7 days"
      label="Date range"
      showLabel
    />
  );
}

• Uncontrolled: Omit valueRange and use onDateRangeChange or onRangeChange to read the selection.
• Default range: With no maxRangeDays, the limit is 2 days; use maxRangeDays={7} (or any number) to allow more.

Made with ❤️ from Kerala, India 🌴