A Simple React datepicker component

by React

React-Calendar

A Simple React datepicker component.

View demo Download Source

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
}

GitHub