From cbf7d27664583c43c363252aea6b5aeadf25474c Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 25 Dec 2015 01:21:03 +0800 Subject: [PATCH] improve rangepicker and add showTime prop --- components/date-picker/RangePicker.jsx | 71 +++++++++++-------- components/date-picker/demo/basic.md | 6 +- components/date-picker/demo/disabled-date.md | 22 ++++++ components/date-picker/demo/locale.md | 2 +- components/date-picker/demo/month-picker.md | 2 +- components/date-picker/demo/range.md | 25 ++++--- components/date-picker/demo/select.md | 24 ------- components/date-picker/demo/start-end.md | 4 +- components/date-picker/demo/time-range.md | 18 ----- components/date-picker/demo/time.md | 43 ++---------- components/date-picker/index.jsx | 22 ++++-- components/date-picker/index.md | 3 +- components/date-picker/locale/zh_CN.js | 3 +- package.json | 2 +- style/components/datepicker.less | 1 - style/components/datepicker/Calendar.less | 4 +- style/components/datepicker/RangePicker.less | 30 +++++--- style/components/datepicker/Time.less | 26 ++++--- style/components/datepicker/TimePanel.less | 72 -------------------- 19 files changed, 146 insertions(+), 234 deletions(-) create mode 100644 components/date-picker/demo/disabled-date.md delete mode 100644 components/date-picker/demo/select.md delete mode 100644 components/date-picker/demo/time-range.md delete mode 100644 style/components/datepicker/TimePanel.less diff --git a/components/date-picker/RangePicker.jsx b/components/date-picker/RangePicker.jsx index 054306bc83..415feb1722 100644 --- a/components/date-picker/RangePicker.jsx +++ b/components/date-picker/RangePicker.jsx @@ -1,8 +1,8 @@ import React from 'react'; import GregorianCalendar from 'gregorian-calendar'; import RangeCalendar from 'rc-calendar/lib/RangeCalendar'; -import Datepicker from 'rc-calendar/lib/Picker'; -import Timepicker from 'rc-time-picker'; +import DatePicker from 'rc-calendar/lib/Picker'; +import TimePicker from 'rc-time-picker'; import classNames from 'classnames'; import PickerMixin from './PickerMixin'; @@ -10,7 +10,7 @@ export default React.createClass({ getDefaultProps() { return { defaultValue: [], - format: 'yyyy-MM-dd HH:mm:ss', + format: 'yyyy-MM-dd', startPlaceholder: '开始时间', endPlaceholder: '结束时间', transitionName: 'slide-up', @@ -46,8 +46,9 @@ export default React.createClass({ } }, handleChange(value) { - this.setState({value}); - + if (!('value' in this.props)) { + this.setState({ value }); + } const startTime = value[0] ? new Date(value[0].getTime()) : null; const endTime = value[1] ? new Date(value[1].getTime()) : null; this.props.onChange([startTime, endTime]); @@ -64,14 +65,23 @@ export default React.createClass({ transitionName, disabled, popupStyle, align, style} = this.props; const state = this.state; - const calendar = (} + const timePicker = showTime + ? + : null; + + const calendarClassName = classNames({ + ['ant-calendar-time']: this.props.showTime, + }); + + const calendar = ); + showClear />; const pickerClass = classNames({ 'ant-calendar-picker': true, @@ -79,13 +89,14 @@ export default React.createClass({ }); const pickerInputClass = classNames({ + 'ant-calendar-range-picker': true, 'ant-input': true, 'ant-input-lg': size === 'large', - 'ant-input-sm': size === 'small' + 'ant-input-sm': size === 'small', }); - return ( - + { const start = value[0]; const end = value[1]; - return ( - - ~ - - - ); + return ( + + + ~ + + + + ); } } - + ); } }); diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md index 602e91965c..1e317513b8 100644 --- a/components/date-picker/demo/basic.md +++ b/components/date-picker/demo/basic.md @@ -9,7 +9,11 @@ ````jsx import { DatePicker } from 'antd'; +function onChange(value) { + console.log(value); +} + ReactDOM.render( - + , document.getElementById('components-date-picker-demo-basic')); ```` diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md new file mode 100644 index 0000000000..d47e6fe260 --- /dev/null +++ b/components/date-picker/demo/disabled-date.md @@ -0,0 +1,22 @@ +# 指定不可选择日期 + +- order: 6 + +设置 `disabledDate` 方法，来确定不可选时段。 + +如上例：不可选择今天之后的日期。 + +--- + +````jsx +import { DatePicker } from 'antd'; + +const disabledDate = function(current, value) { + // can not select days after today + return current && current.getTime() > Date.now(); +}; + +ReactDOM.render( + +, document.getElementById('components-date-picker-demo-disabled-date')); +```` diff --git a/components/date-picker/demo/locale.md b/components/date-picker/demo/locale.md index 7e6975b023..a8a804537a 100644 --- a/components/date-picker/demo/locale.md +++ b/components/date-picker/demo/locale.md @@ -1,6 +1,6 @@ # 国际化 -- order: 9 +- order: 10 通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN diff --git a/components/date-picker/demo/month-picker.md b/components/date-picker/demo/month-picker.md index 97b765ffcc..5d40c52282 100644 --- a/components/date-picker/demo/month-picker.md +++ b/components/date-picker/demo/month-picker.md @@ -2,7 +2,7 @@ - order: 9 -使用 MonthPicker 实现月选择器. +使用 `MonthPicker` 实现月选择器. --- diff --git a/components/date-picker/demo/range.md b/components/date-picker/demo/range.md index e02ada2732..ea7c9097af 100644 --- a/components/date-picker/demo/range.md +++ b/components/date-picker/demo/range.md @@ -1,22 +1,21 @@ -# 指定不可选择日期 +# 日期范围二 -- order: 6 +- order: 8 -设置 `disabledDate` 方法，来确定不可选时段。 - -如上例：不可选择今天之后的日期。 +使用 `RangePicker` 实现日期范围选择有更好的交互体验。 --- ````jsx import { DatePicker } from 'antd'; +const RangePicker = DatePicker.RangePicker; -const disabledDate = function(current, value) { - // can not select days after today - return current && current.getTime() > Date.now(); -}; - -ReactDOM.render( - -, document.getElementById('components-date-picker-demo-range')); +function onChange(value) { + console.log('From: ', value[0], ', to: ', value[1]); +} +ReactDOM.render(
+ +
+ +
, document.getElementById('components-date-picker-demo-range')); ```` diff --git a/components/date-picker/demo/select.md b/components/date-picker/demo/select.md deleted file mode 100644 index 7dd2e7d456..0000000000 --- a/components/date-picker/demo/select.md +++ /dev/null @@ -1,24 +0,0 @@ -# 选择日期 - -- order: 2 - -通过设置选择日期的回调事件 `onChange`，完成交互行为。 - ---- - -````jsx -import { DatePicker } from 'antd'; - -const Picker = React.createClass({ - handleChange: function(value) { - console.log(new Date(value.getTime())); - }, - render: function() { - return ; - } -}); - -ReactDOM.render( - -, document.getElementById('components-date-picker-demo-select')); -```` diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md index 04616f2651..4e48402382 100644 --- a/components/date-picker/demo/start-end.md +++ b/components/date-picker/demo/start-end.md @@ -1,8 +1,8 @@ -# 日期范围选择 +# 日期范围一 - order: 7 -设置 `disabledDate` 方法，来约束开始和结束日期。 +可以设置 `disabledDate` 方法，来约束开始和结束日期。 --- diff --git a/components/date-picker/demo/time-range.md b/components/date-picker/demo/time-range.md deleted file mode 100644 index 40aced51db..0000000000 --- a/components/date-picker/demo/time-range.md +++ /dev/null @@ -1,18 +0,0 @@ -# 时间范围选择 - -- order: 7 - -使用 RangePicker 实现范围选择器。 - ---- - -````jsx -import { DatePicker } from 'antd'; -const RangePicker = DatePicker.RangePicker; - -function log(value) { - console.log('From: ', value[0], ', to: ', value[1]); -} -ReactDOM.render( -, document.getElementById('components-date-picker-demo-time-range')); -```` diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md index 6151eb88fd..b1c5e45e39 100644 --- a/components/date-picker/demo/time.md +++ b/components/date-picker/demo/time.md @@ -2,51 +2,18 @@ - order: 4 -和 [时间选择框](/components/timepicer) 配合使用。 +增加选择时间功能。 --- ````jsx -import { DatePicker, TimePicker } from 'antd'; +import { DatePicker } from 'antd'; -const DateTimePicker = React.createClass({ - handleChange(from, value) { - this.result = this.result || new Date(); - if (!value) { - if (from === 'date') { - this.selectedDate = false; - } else { - this.selectedTime = false; - } - return; - } - if (from === 'date') { - this.result.setFullYear(value.getFullYear()); - this.result.setMonth(value.getMonth()); - this.result.setDate(value.getDate()); - this.selectedDate = true; - } else { - this.result.setHours(value.getHours()); - this.result.setMinutes(value.getMinutes()); - this.result.setSeconds(value.getSeconds()); - this.selectedTime = true; - } - if (this.selectedDate && this.selectedTime) { - this.props.onSelect(this.result); - } - }, - render() { - return
- - -
; - } -}); - -function onSelect(value) { +function onChange(value) { console.log('选择了时间：', value); } -ReactDOM.render( +ReactDOM.render( + , document.getElementById('components-date-picker-demo-time')); ```` diff --git a/components/date-picker/index.jsx b/components/date-picker/index.jsx index c512599716..7b0a72ff01 100644 --- a/components/date-picker/index.jsx +++ b/components/date-picker/index.jsx @@ -5,7 +5,9 @@ import DatePicker from 'rc-calendar/lib/Picker'; import GregorianCalendar from 'gregorian-calendar'; import CalendarLocale from 'rc-calendar/lib/locale/zh_CN'; import AntRangePicker from './RangePicker'; -import PickerMixin from './Pickermixin'; +import PickerMixin from './PickerMixin'; +import TimePicker from 'rc-time-picker'; +import classNames from 'classnames'; function createPicker(TheCalendar, defaultFormat) { return React.createClass({ @@ -61,14 +63,26 @@ function createPicker(TheCalendar, defaultFormat) { const placeholder = ('placeholder' in this.props) ? this.props.placeholder : locale.lang.placeholder; + + const timePicker = this.props.showTime + ? + : null; + + const calendarClassName = classNames({ + ['ant-calendar-time']: this.props.showTime, + }); + const calendar = ( ); @@ -100,7 +114,7 @@ function createPicker(TheCalendar, defaultFormat) { { ({value}) => { return ( - + - ); + ); } } diff --git a/components/date-picker/index.md b/components/date-picker/index.md index eee91d4eb2..78b92fe828 100644 --- a/components/date-picker/index.md +++ b/components/date-picker/index.md @@ -35,6 +35,7 @@ | popupStyle | 格外的弹出日历样式 | object | {} | | size | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string | 无 | | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) | +| showTime | 增加时间选择功能 | bool | false | ### RangePicker @@ -45,7 +46,7 @@ | format | 展示的日期格式 | string | "yyyy-MM-dd HH:mm:ss" | | onChange | 时间发生变化的回调，发生在用户选择时间时 | function([Date start, Date end]) | 无 | -`disabled` `style` `popupStyle` `size` `locale` 属性与 DatePicker 的一致。 +`disabled` `style` `popupStyle` `size` `locale` `showTime` 属性与 DatePicker 的一致。