0.9.6 • Published 8 years ago
datepicker-react v0.9.6
#说明 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