react-custom-date-picker v1.2.1

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