React Custom Date Picker

A simple date picker that is customizable.

Getting Started

Install

npm install react-custom-date-picker --save

or

yarn add react-custom-date-picker

Import

import DatePicker from 'react-custom-date-picker';

Dependencies

• moment

Usage

This is the minimum requirement for using the react-custom-date-picker

Single Date Picker

import React, { Component } from 'react';
import DatePicker from 'react-custom-date-picker';

class App extends Component {
  state = {
    date: null,
  }

  handleDateChange = (date) => {
    this.setState({ date });
  }

  render() {
    return (
      <DatePicker
        date={this.state.date}
        handleDateChange={this.handleDateChange}
      />
    );
  }
}

export default App;

Custom Theming

import React, { Component } from 'react';
import DatePicker from 'react-custom-date-picker';

class App extends Component {
  state = {
    date: null,
  }

  handleDateChange = (date) => {
    this.setState({ date });
  }

  render() {
    return (
      <DatePicker
        color="#296b3e"
        date={this.state.date}
        errorColor="#c32c27"
        handleDateChange={this.handleDateChange}
        hoverWeek
        inputStyle={{
          borderRadius: 0,
        }}
        lightHeader
      />
    );
  }
}

export default App;

Date Range

import React, { Component } from 'react';
import DatePicker from 'react-custom-date-picker';

class App extends Component {
  state = {
    date: null,
    endDate: null,
  }

  handleDateChange = ([date, endDate]) => {
    this.setState({
      date,
      endDate,
    });
  }

  render() {
    return (
      <DatePicker
        date={this.state.date}
        endDate={this.state.endDate}
        handleDateChange={this.handleDateChange}
        range
      />
    );
  }
}

export default App;

Props

| Prop | Description | Type | Default | Required | | --- | --- | --- | --- | --- | | color | The primary color of the date picker | String | '#46b2e9' | No | | date | The date (or start date if using the 'range' prop) | Date Object | null | Yes | | endDate | The end date if using the 'range' prop | Date Object | null | Yes | | errorColor | The color displayed if date is invalid and using the 'required' prop | String | '#ff0000' | No | | errorMessage | The error message to display if there is an error | String | 'Invalid Date' | No | | forceError | How to generate an error without user blurring the input | Boolean | false | No | | handleDateChange | Used to control value of date (or array of two dates if using 'range' prop) | Function | n/a | Yes | | hoverWeek | Highlights entire week on hover | Boolean | false | No | | inputStyle | All CSS attributes for input DOM element available | Object | {} | No | | keepOpen | Prevent the calendar from closing on selection or outside click | Boolean | false | No | | lightHeader | Use white font for header and selected date (recommend if 'color' prop is a dark color) | Boolean | false | No | | maxDate | Set the max date allowed (as a string 'YYYY-MM-DD') | String | null | No | | minDate | Set the min date allowed (as a string 'YYYY-MM-DD') | String | null | No | | modal | Display the calendar in a modal view (does not work with the prop 'keepOpen') | Boolean | false | No | | placeholder | Placeholder text for input | String | 'Date (MM/DD/YYYY)' | No | | range | Allow user to select start date and end date | Boolean | false | No | | required | Displays error on blur if date is invalid | Boolean | false | No | | startOfWeek | Set the starting day of the week (0 = Sunday, 1 = Monday, etc.) | Number | 0 | No | | width | Set width of datepicker window | Number | 400 | No |