awesome-react-datepicker/README.md

React datepicker component.

# React Datepicker Component

[![Build Status](https://travis-ci.com/ritwik310/awesome-react-datepicker.svg?branch=master)](https://travis-ci.com/ritwik310/awesome-react-datepicker)
![](https://img.shields.io/github/license/ritwik310/awesome-react-datepicker.svg)   
An elegant customizable react datepicker component.

## Installation
```shell
yarn add awesome-react-datepicker
```

## Example
A sample example here..
```javascript
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...
```javascript
<Datepicker
  initDate={this.state.date}
  onDateSelect={(timeStamp) => {
    this.setState({ date: new Date(timeStamp) });
  }}
>
  <h3>{this.state.date.getDate()}</h3>
</Datepicker>
```

### Custom Props
Property|Type|Default|Description|Required
---|---|---|---|---
uniqueId|String|undefined|HTML id attribute, unique for each Datepicker component|true
onDateSelect|Function|undefined|To handle date selection|true
textColor|String|#606060|Color code for html elements|false
borderColor|String|#bbbbbb|Color code for Input and Calendar borders|false
themeColor|String|#ffcb05|themeColor|false
hoverBackground|String|#e5e5e5|Background color on date & nav-button hover|false
backgroundColor|String|#ffffff|Datepicker background color|false
customZIndex|Number|20|Z-index of modal|false

Thank you & Good luck..