diff --git a/components/date-picker/RangePicker.jsx b/components/date-picker/RangePicker.jsx
index 054306bc831f2b8fb37119d256f46a5555494725..415feb17221892a46a81de17d32146dfdb3e2943 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 602e91965c4ad68655f74fe00be7b3c440c046e1..1e317513b849c4aef9693bf194e1c3198e12fe93 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 0000000000000000000000000000000000000000..d47e6fe26024c7a04b9aace031bbc1264007fa56
--- /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 7e6975b023b5c0f6604eafc792672ade39e435a5..a8a804537a414f6cf6488e2f1ac767bf560f3059 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 97b765ffcc2205d821be2abbc8a4dd75beb8af74..5d40c522827b1ffa23677b2ed8c7a52b961aeedd 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 e02ada273253372c549aa49746fe17139e4ed1f6..ea7c9097afa36defc52e64cec531192a3d051dfc 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 7dd2e7d4566f7fca9287c1d60220ff9bb5a4255a..0000000000000000000000000000000000000000
--- 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 04616f2651d54e23f61f46ef5541dec0875a9567..4e4840238274cadad64875de56381882cb8d5e22 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 40aced51db0d2cf483039fe883e14b91248f968b..0000000000000000000000000000000000000000
--- 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 6151eb88fdb931aa0b1951c6a7117e301624865a..b1c5e45e39692d954032e06c042c22efd84aaf9f 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 c512599716f192b6e56bdb8b03e4561a180a7cf0..7b0a72ff01e64ddb61d339bad9eb22f93cfcee85 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 eee91d4eb2f44b1ea6f9d8ccb315c42eb146ed20..78b92fe828314bcf9e5a5c74bf3a1f3ce61530b7 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 的一致。