2.0.1 • Published 5 years ago
awesome-react-datepicker v2.0.1
React Datepicker Component
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
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..