This package has been deprecated

Author message:

This package is no longer maintained. A new library has been put up by the author: react-simple-widgets which includes its functionality. For more information, contact the author at [e-mail]

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

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

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

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