datepicker-react

说明

fork自https://github.com/Adphorus/react-date-range 因原版本仍然以来老版本的React，所以fork一份，自行维护 新增Datepicker

改动记录

Calendar

新增today状态样式，调整hover，active，selected状态样式，区分开selected和today 从外部接收到date改变后，也修改shownDate，使calendar日历界面显示的月份也渲染到对应的月份 重构， 新增月视图，年试图，类似windows日历；新增选周，选月模式。

react-date-range

A React component for choosing dates and date ranges. Uses Moment.js for date operations.

Getting Started

Installation

$ npm install --save datepicker-react

Usage

Date Picker

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import { Calendar, Datepicker, VIEWMODE, SELECTMODE } from '../src/index';
 
class App extends Component {
    constructor(props, context) {
        super(props, context);
 
        this.state = {
            selectedDate: undefined,
            selectedWeekDate: undefined,
            selectedMonthDate: undefined,
            selectedYearDate: undefined,
            selectedDates: undefined
        }
    }
 
    render() {
        const { selectedDate, selectedWeekDate, selectedMonthDate, selectedYearDate, selectedDates } = this.state;
        const format = 'dddd, D MMMM YYYY';
 
        return (
            <div>
                <h1>选择日期</h1>
                <Datepicker
                    placeholder="选择日期"
                    value={selectedDate}
                    onChange={this.handleSelectDates.bind(this, 'selectedDate')} />
 
                <h1>选择周</h1>
                <Datepicker
                    placeholder="选择周"
                    value={selectedWeekDate}
                    selectMode={SELECTMODE.WEEK}
                    onChange={this.handleSelectDates.bind(this, 'selectedWeekDate')} />
 
                <h1>选择月</h1>
                <Datepicker
                    placeholder="选择月"
                    value={selectedMonthDate}
                    selectMode={SELECTMODE.MONTH}
                    onChange={this.handleSelectDates.bind(this, 'selectedMonthDate')} />
 
                <h1>选择年</h1>
                <Datepicker
                    placeholder="选择年"
                    value={selectedYearDate}
                    selectMode={SELECTMODE.YEAR}
                    onChange={this.handleSelectDates.bind(this, 'selectedYearDate')} />
 
                <h1>选择时间范围</h1>
                <Datepicker
                    placeholder="选择时间范围"
                    value={selectedDates}
                    selectMode={SELECTMODE.DATES}
                    onChange={this.handleSelectDates.bind(this, 'selectedDates')} />
            </div>
        )
    }
    
    handleSelectDates(key, dates) {
        this.setState({
            [key]: dates
        });
    }
}
 
ReactDom.render(<App />, document.getElementById('root'));

Available Options (props)

• value: (Moment.js object) - default: undefined
• format: (String) - default: L
• placeholder (String) - default: undefined
• theme: (Object)
• selectMode: (Number) default: SELECTMODE.DATE
• onChange: (Function) default: none