mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

Add dateString to DatePicker & TimePicker onChange

Browse Source 
close #1104
This commit is contained in:
afc163 2016-03-28 12:18:30 +08:00
parent 5308308df9
commit 703cf31868
8 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/date-picker/RangePicker.jsx
View File

@ -52,9 +52,11 @@ export default React.createClass({
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]);
const startDate = value[0] ? new Date(value[0].getTime()) : null;
const endDate = value[1] ? new Date(value[1].getTime()) : null;
const startDateString = value[0] ? this.getFormatter().format(value[0]) : '';
const endDateString = value[1] ? this.getFormatter().format(value[1]) : '';
this.props.onChange([startDate, endDate], [startDateString, endDateString]);
},
render() {
const locale = this.getLocale();

4
components/date-picker/demo/basic.md
View File

@ -9,8 +9,8 @@
````jsx
import { DatePicker } from 'antd';
function onChange(value) {
console.log(value);
function onChange(value, dateString) {
console.log(value, dateString);
}
ReactDOM.render(<DatePicker onChange={onChange} />, mountNode);

3
components/date-picker/demo/range.md
View File

@ -10,8 +10,9 @@
import { DatePicker } from 'antd';
const RangePicker = DatePicker.RangePicker;
function onChange(value) {
function onChange(value, dateString) {
console.log('From: ', value[0], ', to: ', value[1]);
console.log('From: ', dateString[0], ', to: ', dateString[1]);
}
ReactDOM.render(<div>
<RangePicker style={{ width: 184 }} onChange={onChange} />

2
components/date-picker/index.jsx
View File

@ -45,7 +45,7 @@ function createPicker(TheCalendar, defaultFormat) {
this.setState({ value });
}
const timeValue = value ? new Date(value.getTime()) : null;
this.props.onChange(timeValue);
this.props.onChange(timeValue, value ? this.getFormatter().format(value) : '');
},
render() {
const locale = this.getLocale();

4
components/date-picker/index.md
View File

@ -29,7 +29,7 @@
| defaultValue | 默认日期 | string or Date | 无 |
| format | 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | string | "yyyy-MM-dd" |
| disabledDate | 不可选择的日期 | function | 无 |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(Date value) | 无 |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date, dateString) | 无 |
| disabled | 禁用 | bool | false |
| style | 自定义输入框样式 | object | {} |
| popupStyle | 格外的弹出日历样式 | object | {} |
@ -46,7 +46,7 @@
| value | 日期 | [string/Date, string/Date] | 无 |
| defaultValue | 默认日期 | [string/Date, string/Date] | 无 |
| format | 展示的日期格式 | string | "yyyy-MM-dd HH:mm:ss" |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function([Date start, Date end]) | 无 |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date[], dateString[]) | 无 |
`disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer` 属性与 DatePicker 的一致。

7
components/time-picker/demo/basic.md
View File

@ -9,11 +9,8 @@
````jsx
import { TimePicker } from 'antd';
function onChange(time) {
console.log(time);
if (time) {
console.log(time.toLocaleTimeString('zh-CN', { hour12: false })); // Get time string
}
function onChange(time, timeString) {
console.log(time, timeString);
}
ReactDOM.render(

5
components/time-picker/index.jsx
View File

@ -67,7 +67,10 @@ const TimePicker = React.createClass({
},
handleChange(value) {
this.props.onChange(value ? new Date(value.getTime()) : null);
this.props.onChange(
value ? new Date(value.getTime()) : null,
value ? this.getFormatter().format(value) : '',
);
},
getLocale() {

2
components/time-picker/index.md
View File

@ -27,7 +27,7 @@ API
| defaultValue | 初始默认时间 | string or Date | 无 |
| value | 默认时间 | string or Date | 无 |
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
| onChange | 时间发生变化的回调 | function(Date value) | 无 |
| onChange | 时间发生变化的回调 | function(date, dateString) | 无 |
| format | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
| disabled | 禁用全部操作 | bool | false |
| disabledHours | 禁止选择部分小时选项 | function() | 无 |