react-bare-datepicker

A fully customizable React date picker designed for flexibility and ease of use. This library gives you complete control and injection over every component while maintaining a simple and intuitive API.

Key Features

• Component Injection: Replace any part of the UI with your own custom components
• Simple API: Straightforward props for injecting custom UI elements without complexity
• Custom Triggers: Use any component as your datepicker trigger
• Flexible Date Restrictions: Easily disable future dates, past dates, or specific date ranges
• Highlighted Dates: Effortlessly highlight important dates in the calendar
• Flexible Positioning: Control the popup positioning with options like "bottom center", "top left", etc.

Installation

npm install react-bare-datepicker

or

yarn add react-bare-datepicker

Basic Usage

import React, { useState } from "react";
import DatePicker from "react-bare-datepicker";

function App() {
    const [selectedDate, setSelectedDate] = useState(new Date());

    const customTrigger = () => (
        <button
            className="my-custom-button"
            style={{
                display: "flex",
                alignItems: "center",
                gap: "8px",
                padding: "8px 16px",
                backgroundColor: "#f0f7ff",
                border: "1px solid #0077ff",
                borderRadius: "4px",
                cursor: "pointer",
            }}
        >
            <span>Select Date: {selectedDate.toLocaleDateString()}</span>
        </button>
    );

    return (
        <DatePicker value={selectedDate} onChange={setSelectedDate} renderTrigger={customTrigger} />
    );
}

Feature Highlights

1. Date Restrictions Made Simple

Easily manage date restrictions with built-in props:

<DatePicker
    value={selectedDate}
    onChange={setSelectedDate}
    disableFutureDates={true} // Simple flag to disable all future dates
    // OR
    disablePastDates={true} // Simple flag to disable all past dates
    // OR use specific dates
    disableDatesAfter={new Date(2025, 5, 15)}
    disableDatesBefore={new Date(2025, 2, 1)}
/>

2. Highlighted Dates

Mark important dates in the calendar:

<DatePicker
    value={selectedDate}
    onChange={setSelectedDate}
    highlightedDates={[
        new Date(2025, 1, 20), // Highlight January 20, 2025
        new Date(2025, 2, 10), // Highlight February 10, 2025
    ]}
/>

Advanced Usage

import React, { useState } from "react";
import DatePicker from "react-bare-datepicker";

function App() {
    const [selectedDate, setSelectedDate] = useState(new Date());

    // Custom components for complete UI control
    const customTrigger = () => (
        <div className="date-selector">
            <span>Pick a date: {selectedDate.toLocaleDateString()}</span>
        </div>
    );

    const customDateCell = ({ date, isSelected, isToday, isHighlighted }) => (
        <div
            style={{
                width: "40px",
                height: "40px",
                borderRadius: "50%",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: isSelected ? "#4285f4" : isHighlighted ? "#e8f0fe" : "transparent",
                color: isSelected ? "white" : isToday ? "#4285f4" : "black",
                fontWeight: isToday ? "bold" : "normal",
            }}
        >
            {date}
        </div>
    );

    const customTodayButton = () => <button className="today-btn">Jump to Today</button>;

    return (
        <DatePicker
            value={selectedDate}
            onChange={setSelectedDate}
            disablePastDates={true}
            highlightedDates={[new Date(2025, 2, 25), new Date(2025, 2, 26)]}
            renderTrigger={customTrigger}
            renderDateCell={customDateCell}
            renderTodayButton={customTodayButton}
            backgroundStyle={{
                borderRadius: 8,
                backgroundColor: "#ffffff",
                border: "1px solid #e0e0e0",
                paddingTop: 16,
                paddingBottom: 16,
                paddingLeft: 16,
                paddingRight: 16,
                boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.1)",
            }}
        />
    );
}

Props Table

Prop	Type	Required	Default	Description
value	Date	Yes	-	The currently selected date
onChange	(date: Date) => void	Yes	-	Callback function when date is changed
position	PopupPosition	No	"bottom center"	Position of the datepicker popup
disableFutureDates	boolean	No	false	Whether to disable dates in the future
disablePastDates	boolean	No	false	Whether to disable dates in the past
disableDatesAfter	Date	No	-	Disable all dates after the specified date
disableDatesBefore	Date	No	-	Disable all dates before the specified date
highlightedDates	Date[]	No	[]	Array of dates to be highlighted
offsetX	number	No	0	Horizontal offset of the popup
offsetY	number	No	0	Vertical offset of the popup
closeOnPick	boolean	No	true	Whether to close the popup after selecting a date
backgroundStyle	DatePickerBackgroundStyleProps	No	-	Style properties for the datepicker background

Customization Props

Prop	Type	Required	Default	Description
renderTrigger	() => ReactNode	No	Default button	Custom component for the datepicker trigger button
renderMonthDropDownTrigger	(currentMonth: CurrentMonth) => void	No	Default trigger	Custom component for the month dropdown trigger
renderMonthDropDown	(props: MonthDropDownProps) => ReactNode	No	Default dropdown	Custom component for the month dropdown
renderYearDropDownTrigger	(currentYear: number) => ReactNode	No	Default trigger	Custom component for the year dropdown trigger
renderYearDropDown	(props: YearDropDownProps) => ReactNode	No	Default dropdown	Custom component for the year dropdown
renderMonthDecreaseButton	() => ReactNode	No	Default button	Custom component for the previous month button
renderMonthIncreaseButton	() => ReactNode	No	Default button	Custom component for the next month button
renderWeekDayCell	(day: DayOfWeek) => ReactNode	No	Default cell	Custom component for weekday labels
renderTodayButton	() => ReactNode	No	Default button	Custom component for the "Today" button
renderDateCell	(props: DateCellProps) => ReactNode	No	Default cell	Custom component for date cells

Interface Definitions

DatePickerBackgroundStyleProps

interface DatePickerBackgroundStyleProps {
    borderRadius: number;
    backgroundColor: string;
    border: string;
    paddingTop: number;
    paddingBottom: number;
    paddingLeft: number;
    paddingRight: number;
    boxShadow: string;
}

DateCellProps

interface DateCellProps {
    date: string | number;
    isSelected: boolean;
    isToday: boolean;
    isHighlighted: boolean;
}

YearDropDownProps

interface YearDropDownProps {
    ref: RefObject<HTMLDivElement | null>;
    itemRefs: RefObject<YearItemRefsProps>;
    years: number[];
    pickYear: (year: number) => void;
    onScroll: (e: UIEvent<HTMLDivElement>) => void;
}

MonthDropDownProps

interface MonthDropDownProps {
    ref: RefObject<HTMLDivElement | null>;
    itemRefs: RefObject<MonthItemRefsProps>;
    months: Month[];
    pickMonth: (monthId: MonthId) => void;
}

Important Notes

• To adjust the size of the datepicker, you need to customize the date cell size using renderDateCell prop
• The background styles can only be customized using the properties defined in DatePickerBackgroundStyleProps
• Every component has a default implementation, so you only need to override the parts you want to customize

Why react-bare-datepicker?

This datepicker was created to provide a solution that offers:

• Flexibility: Control every aspect of the UI to match your design system
• Simplicity: Intuitive API for common date picker requirements
• Functionality: Essential features like date highlighting and restrictions
• Customization: Replace any component with your own implementation

Example: Custom Date Cell Size

const customDateCell = ({ date, isSelected, isToday, isHighlighted }) => (
    <div
        style={{
            width: "50px", // Increase cell width
            height: "50px", // Increase cell height
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: isSelected ? "#007bff" : "transparent",
            color: isSelected ? "white" : "black",
            borderRadius: "4px",
        }}
    >
        {date}
    </div>
);

<DatePicker value={selectedDate} onChange={setSelectedDate} renderDateCell={customDateCell} />;

License

MIT