React Date Primitives

Primitives for creating Date-Picker and DateRange-Picker components in React. And It has zero dependencies!

Installation

This package is distributed via npm.

npm install --save react-date-primitives

This package also depends on react. Please make sure you have those installed as well.

Usage

import * as React from 'react';
import { CalendarMonth } from 'react-date-primitives';

class SimpleDatePicker extends React.Component {
    render() {
        return (
            <table>
                <CalendarMonth
                    month={new Date()}
                    render={({ days }) => (
                        <tbody>
                            {days.map((week, i) => (
                                <tr key={i}>
                                    {week.map((day, j) => (
                                        <td key={`${i}-${j}`}>
                                            {day.inCurrentMonth ? day.date.getDate() : ''}
                                        </td>
                                    ))}
                                </tr>
                            ))}
                        </tbody>
                    )}
                />
            </table>
        );
    }
}

Live Examples

• simple date-picker
• simple date-picker with dropdowns for month and year
• simple daterange-picker using CalendarMonth
• styled date-picker
• useCalendar hook
• useDateRange hook

API

• CalendarMonth
• DateRangeControl

License

MIT. Copyright(c) Vivek Kumar Bansal