React-simple-calendar-date-picker NPM

react-simple-date-picker

ReactJs simple calendar date picker component

Install

npm i react-simple-calendar-date-picker --save

GitLab

https://gitlab.com/damjan89/react-simple-date-picker

Preview

Usage

React >= 16.9.0

import * as React from 'react'

import DatePickerCalendarComponent from 'react-simple-calendar-date-picker';
import 'react-simple-calendar-date-picker/src/assets/style.css';
class IndexComponent extends React.Component {
   constructor(){
    super();
    this.state = {
        dateValue: new Date()
    }
   }
/*
  * Name: ClickedOutside
  * Description: This function is called when user clicks outside calendar borders (useful when calendar is in popup)
  * Parameters: event
  * author: Nick Dam
  * */
  clickedOutside(event){
    //if calendar is in popup you can hide it here
  }
  /*
  * Name: valueChanged
  * Description: This function is called when user choose a date
  * Parameters: value -> Clicked Date
  * author: Nick Dam
  * */
  valueChanged(value){
    this.setState({
      dateValue: value
    });
  }
  render () {
    return (
        <div>
          <p>{this.state.dateValue.toString()}</p>
          <DatePickerCalendarComponent
                    value={this.state.dateValue}
                    clickedOutside={(e)=>this.clickedOutside(e)}
                    onChange={(val)=>this.valueChanged(val)}/>
        </div>
    )
  }
}