mobile-react-calendar v0.0.7

描述

mobile-react-calendar基于react的移动端日期选择组件，仿携程日历，可选区间日期，也可选一天

依赖关系

version ^0.0.1 -> React ^16.11.0

基础功能

• 选择一组日期，开始日期和结束日期
• 选择一个日期

扩展

• 可配置默认选择
• 可配置可选日期区间

安装

npm install --save mobile-react-calendar

使用

import Calendar, {formatDate} from 'mobile-react-calendar'
class App extends React.Component {

    state = {
        isShow: false,
        maxDate: '2019-12-30',
        minDate: '2019-01-01',
        start: '2019-05-02',
        end: '2019-05-30'
    }

    result = (start, end) => {
        this.setState({
            start: formatDate(start, 'yyyy-mm-dd'),
            end: formatDate(end, 'yyyy-mm-dd')
        })
    }

    render() {
        return (
            <div>
                <div>
                    <input type="text" value={this.state.start} placeholder="开始时间" readOnly />
                    <input type="text" value={this.state.end} placeholder="结束时间" readOnly />
                </div>
                <button onClick={() => this.setState({isShow: true})}>按钮</button>
                <Calendar
                    {...this.state}
                    result={this.result}
                    close={()=> this.setState({isShow: false})}
                />
            </div>
        )
    }
}

export default App;

接口