ciqu-react-calendar

    1.0.2 • Public • Published

    React-Calendar

    npm package Dependency Status

    Install

    npm i ciqu-react-calendar

    OR

    yarn add ciqu-react-calendar

    Example

     
    import React from 'react'
    import ReactDom from 'react-dom'
    import moment from 'moment'
    import Calendar from 'ciqu-react-calendar'
     
    class MyCalendar extends React.Component {
     
      constructor(props) {
        super(props)
        this.state = {
          value: moment()
        }
      }
     
      onChange = (value, inputValue) => {
        console.log(value.format('YYYY-MM-DD'))
        this.setState({value})
      }
     
      onOpenChange = (status) => {
        console.log('open status: ' + status)
      }
     
      disabledDate = (currentDate, inputValue) => {
        return false
      }
     
      render() {
        const {onChange, onOpenChange, disabledDate} = this
        return <div>
          <Calendar
            onChange={onChange}
            value={this.state.value}
            allowClear={true}
            disabled={false}
            placeholder={'please input date'}
            format={'YYYY-MM-DD'}
            onOpenChange={onOpenChange}
            disabledDate={disabledDate}
          />
        </div>
      }
    }
     
    ReactDom.render(
      <MyCalendar/>,
      document.getElementById('el')
    )
     

    API

    interface CalendarProps {
      // when input value changes, this callback will be called, default null
      onChange?(value?: Moment, inputValue?: string): void
      
      // fired when datepicker shows or hides, default null
      onOpenChange?(status?: boolean): void
      
      // when returned true, the target date cannot be picked, default null
      disabledDate?(currentDate: Moment, inputValue: string): boolean
      
      // allow to clear the picked date, default true
      allowClear?: boolean
      
      // if true, datepicker is disabled, default false
      disabled?: boolean
      
      // control whether datepicker shows or hides, default false
      open?: boolean,
      
      placeholder?: string
      
      // moment format string, default 'YYYY-MM-DD'
      format?: string
     
      className?: string
      
      // the value under control, default moment()
      value?: Moment
      
      // the default value 
      defaultValue?: Moment
    }

    License

    MIT

    Keywords

    none

    Install

    npm i ciqu-react-calendar

    DownloadsWeekly Downloads

    17

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • ycwalker