2.0.1 • Published 5 years ago

awesome-react-datepicker v2.0.1

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

React Datepicker Component

Build Status npm.io
An elegant customizable react datepicker component.

Installation

yarn add awesome-react-datepicker

Example

A sample example here..

import React, { Component } from 'react';
import Datepicker from 'awesome-react-datepicker';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

  render() {
    return (
      <div className='App'>
        <Datepicker
          initDate={this.state.date}
          onDateSelect={(timeStamp) => {
            this.setState({ date: new Date(timeStamp) });
          }}
        />          
      </div>
    );
  }
}

export default App;

Customizations

Custom children

To rendar custom children elements inside the input...

<Datepicker
  initDate={this.state.date}
  onDateSelect={(timeStamp) => {
    this.setState({ date: new Date(timeStamp) });
  }}
>
  <h3>{this.state.date.getDate()}</h3>
</Datepicker>

Custom Props

PropertyTypeDefaultDescriptionRequired
uniqueIdStringundefinedHTML id attribute, unique for each Datepicker componenttrue
onDateSelectFunctionundefinedTo handle date selectiontrue
textColorString#606060Color code for html elementsfalse
borderColorString#bbbbbbColor code for Input and Calendar bordersfalse
themeColorString#ffcb05themeColorfalse
hoverBackgroundString#e5e5e5Background color on date & nav-button hoverfalse
backgroundColorString#ffffffDatepicker background colorfalse
customZIndexNumber20Z-index of modalfalse

Thank you & Good luck..