🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A minimalist date picker component for Reactjs based web applications.

Date_Time React

Documentation

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


You May Also Like