React-simple-date NPM

React Simple Date

The simplest react date picker implementation of all time

Installation

Run npm install --save-dev react-simple-date to install in your application

You must have a minimum of react@16.12.0 to use this library

Usage

The library consists of three date pickers designed to fit most possible use cases of date selection; SingleDatePicker, MultiDatePicker and MonthDatePicker.

Each of the pickers support the following props

Prop	Type	Description
`value`	`string` or `array`	The current date value for the picker. For `SingleDatePicker` and `MonthDatePicker`, this is a string. For `MultiDatePicker`, this is an array of strings.
`dateFormat`	`string`	The format of the date to use internally. The `value` should be in this format. Defaults to YYYY-MM-DD
`displayDateFormat`	`string`	The format to use for date display. This only affects how the date is displayed. Defaults to YYYY-MM-DD
`displayClassName`	`string`	A CSS class name to apply to the display. You can use this to target the display for CSS styling
`validateDate`	`Function`	An optional validation function for selected dates. If specified, it will receive the selected date string, formatted using `dateFormat`. It must return `true` if validation is successful or throw an error with a specified error message which will be displayed on the picker
`onChange`	`Function`	The callback that is invoked when a date is selected. For `SingleDatePicker` and `MonthDatePicker`, this function is called with the selected date string formatted using `dateFormat`. For `MultiDatePicker`, it is called with an array of selected dates, each formatted using `dateFormat`.

This date picker is built on top of moment thus any supported moment-date-format date format can be used with react-simple-date.

SingleDatePicker

npm.io

This is a date picker for selecting a single date.

Sample code

import React, { useState } from "react";
import { SingleDatePicker } from "react-simple-date";

export const DatePickerHolder = () => {
    const [date, setDate] = useState("2019-12-31");

    return (
        <SingleDatePicker
            value={date}
            dateFormat="YYYY-MM-DD"
            displayDateFormat="YYYY-MM-DD"
            displayClassName="form-control"
            onChange={setDate}
        />
    );
};

Seriously, it's that simple :)

MultiDatePicker

npm.io

This is a date picker for selecting multiple dates.

Sample code

import React, { useState } from "react";
import { MultiDatePicker } from "react-simple-date";

export const DatePickerHolder = () => {
    const [dates, setDates] = useState(["2019-12-02", "2019-12-10", "2019-12-12", "2019-12-20"]);

    return (
        <MultiDatePicker
            value={dates}
            dateFormat="YYYY-MM-DD"
            displayDateFormat="Do MMMM YYYY"
            displayClassName="form-control"
            onChange={setDates}
        />
    );
};

MonthDatePicker

npm.io

This is a date picker for selecting months of a year. Because of this, the day portion of the dates are always returned as '01'.

Sample code

import React, { useState } from "react";
import { MonthDatePicker } from "react-simple-date";

export const DatePickerHolder = () => {
    const [date, setDate] = useState("2019-12-01");

    return (
        <MonthDatePicker
            value={date}
            dateFormat="YYYY-MM-DD"
            displayDateFormat="MMMM YYYY"
            displayClassName="form-control"
            onChange={setDate}
        />
    );
};

Styling

The following css variables can be used to control the appearance of the date pickers.

--simple-date-picker-width controls the width of the pickers. Default is 300px
--simple-date-picker-padding controls the padding around the pickers. Default is 15px
--simple-date-picker-selected-color controls the background color of a selected date in the calendar
--simple-date-picker-color controls the text color of the calendar and control items

Testing

This package is visually tested with Storybook. You can view the stories online, using this link.

To view the stories in development, run npm run storybook.

Contributors

Kwame Opare Asiedu

Support

The author of this library is on a mission to promote high-quality open-source software. If you'd like to support, you can do so via my Patreon page.

It would be really helpful if you can star the project on Github. Find it at react-simple-date

Changelog

1.1.1
- Renamed validate prop to validateDate to prevent conflict with redux-form <Field /> component
1.1.0
- Added validate(dateString) attribute to all date pickers
- Updated README and storybook documentation
1.0.8
- Added README and /docs folder
1.0.7
- Added effect to change calendar display on value change
- Close picker dialog after date selection in SingleDatePicker
- Renamed format prop to dateFormat to prevent conflict with redux-form <Field /> component
- Added [type]=button attribute to control buttons to prevent form submission
1.0.5
- Fixed typings definition in package.json
1.0.0
- Initial release