react-simple-calendar-date-picker
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.24 • Public • Published

    react-simple-date-picker

    ReactJs simple calendar date picker component

    NPM JavaScript Style Guide

    Install

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

    GitLab

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

    Preview

    Date-Calendar

    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>
        )
      }
    }

    License

    MIT © Nick Dam

    Install

    npm i react-simple-calendar-date-picker

    DownloadsWeekly Downloads

    2

    Version

    1.0.24

    License

    ISC

    Unpacked Size

    31.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • nickdam