React-datepicker-clean NPM

React DatePicker

A simple and configurable datepicker made for React, free from any dependencies other than React.

Installation

Install it from npm and include it in your React build process (using Webpack, Browserify, etc):

npm install --save react-datepicker-clean

Note that React is needed in the project for this component to work and must be installed separately since it is not included in the package.

Usage

Most basic usage:

import React from "react";
import DatePicker from "react-datepicker-clean";

class Example extends React.Component {
  constructor(props) {
    this.state = {
      dates: []
    };
  }

  handleChange = dates => {
    this.setState({ dates });
  };

  render() {
    return (
      <DatePicker
        onDateClick={this.handleChange}
      />
    );
  }
}

Properties

This datepicker has a number of properties that can be used

Mandatory properties:

name	type	description
`onDateClick`	Function	Function to use when user clicks a date. Must take array of dates as argument.

Optional properties:

name	type	default value	description
`weekStart`	number<0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6>	`0`	Indicates which day is the first day of the week. `0` is Sunday, `6` is Saturday.
`weekHoliday`	number<-1 \| 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6	`0`	Indicates which date that should be designated weekly holiday (default red number instead of black). `0` is Sunday, `6` is Saturday. Set to `-1` to disable this option.
`showWeekNumber`	boolean	`true`	Set to `false` to hide week numbers.
`multiChoice`	boolean	`false`	Set to `true` if the user should be able to choose more than one date.
`multiSpan`	boolean	`false`	Set to `true` to make the choose a span of dates instead of multiple single dates. Disabled if `multiChoice` is set ti `false`.
`allowBefore`	boolean	`false`	Set to `true` if the user should be allowed to choose dates before the current date.
`chosenDates`	Array<Date \| string \| number>	`[]`	Any dates that should be chosen already. Can use same `state` element array that is updated in `onDateClick`. Elements can be Date object, ISO-8601 date string, UNIX timestamp or an array containing two dates. If the element is an array of two dates, all dates between (and including) the two dates will be marked.
`blockedDates`	Array<Date \| string \| number>	`[]`	Any dates that should be blocked from selecting. Elements can be Date object, ISO-8601 date string, UNIX timestamp or an array containing two dates. If the element is an array of two dates, all dates between (and including) the two dates will be marked.
`holidayDates`	Array<Date \| string \| number>	`[]`	Any holidays that should be marked as holiday (default red number instead of black). Elements can be Date object, ISO-8601 date string, UNIX timestamp or an array containing two dates. If the element is an array of two dates, all dates between (and including) the two dates will be marked.
`yearsDiff`	number	`100`	How many years should be visible in years list (before if `allowBefore` is set to `true` and) after the current year.
`locale`	string	`'en'`	Locale to use. List of available locales can be found here. Use the value in the "Code" column.