test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

improve rangepicker and add showTime prop

Browse Source
This commit is contained in:
afc163 2015-12-25 01:21:03 +08:00
parent 6c1f601ab8
commit cbf7d27664
19 changed files with 146 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 = (<RangeCalendar prefixCls="ant-calendar"
timePicker={<Timepicker prefixCls="ant-time-picker" />}
const timePicker = showTime
? <TimePicker prefixCls="ant-time-picker"
placeholder={locale.lang.timePlaceholder}
transitionName="slide-up" />
: null;
const calendarClassName = classNames({
['ant-calendar-time']: this.props.showTime,
});
const calendar = <RangeCalendar prefixCls="ant-calendar"
className={calendarClassName}
timePicker={timePicker}
disabledDate={disabledDate}
locale={locale.lang}
defaultValue={defaultCalendarValue}
showTime={showTime}
showOk={showTime}
showClear />);
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 (<span className={pickerClass}>
<Datepicker
return (<span className={pickerClass} style={style}>
<DatePicker
transitionName={transitionName}
disabled={disabled}
calendar={calendar}
@ -100,25 +111,25 @@ export default React.createClass({
({value}) => {
const start = value[0];
const end = value[1];
return (<span className={pickerInputClass} disabled={disabled}>
<input disabled={disabled}
onChange={this.handleInputChange}
value={start && this.getFormatter().format(start)}
placeholder={startPlaceholder}
style={style}
className="ant-calendar-range-picker-input"/>
<span> ~ </span>
<input disabled={disabled}
onChange={this.handleInputChange}
value={end && this.getFormatter().format(end)}
placeholder={endPlaceholder}
style={style}
className="ant-calendar-range-picker-input"/>
<span className="ant-calendar-picker-icon"/>
</span>);
return (
<span className={pickerInputClass} disabled={disabled}>
<input disabled={disabled}
onChange={this.handleInputChange}
value={start && this.getFormatter().format(start)}
placeholder={startPlaceholder}
className="ant-calendar-range-picker-input" />
<span> ~ </span>
<input disabled={disabled}
onChange={this.handleInputChange}
value={end && this.getFormatter().format(end)}
placeholder={endPlaceholder}
className="ant-calendar-range-picker-input" />
<span className="ant-calendar-picker-icon" />
</span>
);
}
}
</Datepicker>
</DatePicker>
</span>);
}
});

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

@ -9,7 +9,11 @@
````jsx
import { DatePicker } from 'antd';
function onChange(value) {
console.log(value);
}
ReactDOM.render(
<DatePicker defaultValue="2015-12-12" />
<DatePicker onChange={onChange} />
, document.getElementById('components-date-picker-demo-basic'));
````

22
components/date-picker/demo/disabled-date.md Normal file
View File

@ -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(
<DatePicker disabledDate={disabledDate} />
, document.getElementById('components-date-picker-demo-disabled-date'));
````

2
components/date-picker/demo/locale.md
View File

@ -1,6 +1,6 @@
# 国际化
- order: 9
- order: 10
通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN

2
components/date-picker/demo/month-picker.md
View File

@ -2,7 +2,7 @@
- order: 9
使用 MonthPicker 实现月选择器.
使用 `MonthPicker` 实现月选择器.
---

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

@ -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(
<DatePicker disabledDate={disabledDate} />
, document.getElementById('components-date-picker-demo-range'));
function onChange(value) {
console.log('From: ', value[0], ', to: ', value[1]);
}
ReactDOM.render(<div>
<RangePicker style={{width: 184}} onChange={onChange} />
<br />
<RangePicker showTime format="yyyy-MM-dd HH:mm:ss" onChange={onChange} />
</div>, document.getElementById('components-date-picker-demo-range'));
````

24
components/date-picker/demo/select.md
View File

@ -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 <DatePicker onChange={this.handleChange} />;
}
});
ReactDOM.render(
<Picker />
, document.getElementById('components-date-picker-demo-select'));
````

4
components/date-picker/demo/start-end.md
View File

@ -1,8 +1,8 @@
# 日期范围选择
# 日期范围一
- order: 7
设置 `disabledDate` 方法，来约束开始和结束日期。
可以设置 `disabledDate` 方法，来约束开始和结束日期。
---

18
components/date-picker/demo/time-range.md
View File

@ -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(<RangePicker defaultValue={['2011-11-11 11:11:11', '']} onChange={log} />
, document.getElementById('components-date-picker-demo-time-range'));
````

43
components/date-picker/demo/time.md
View File

@ -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 <div>
<DatePicker onChange={this.handleChange.bind(null, 'date')} />
<TimePicker onChange={this.handleChange.bind(null, 'time')} />
</div>;
}
});
function onSelect(value) {
function onChange(value) {
console.log('选择了时间：', value);
}
ReactDOM.render(<DateTimePicker onSelect={onSelect} />
ReactDOM.render(
<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" onChange={onChange} style={{width: 160}} />
, document.getElementById('components-date-picker-demo-time'));
````

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

@ -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
? <TimePicker prefixCls="ant-time-picker"
placeholder={locale.lang.timePlaceholder}
transitionName="slide-up" />
: null;
const calendarClassName = classNames({
['ant-calendar-time']: this.props.showTime,
});
const calendar = (
<TheCalendar
disabledDate={this.props.disabledDate}
locale={locale.lang}
timePicker={timePicker}
defaultValue={defaultCalendarValue}
dateInputPlaceholder={placeholder}
showTime={this.props.showTime}
prefixCls="ant-calendar"
className={calendarClassName}
showOk={this.props.showTime}
showClear />
);
@ -100,7 +114,7 @@ function createPicker(TheCalendar, defaultFormat) {
{
({value}) => {
return (
<span>
<span>
<input disabled={this.props.disabled}
onChange={this.handleInputChange}
value={value && this.getFormatter().format(value)}
@ -109,7 +123,7 @@ function createPicker(TheCalendar, defaultFormat) {
className={'ant-calendar-picker-input ant-input' + sizeClass}/>
<span className="ant-calendar-picker-icon"/>
</span>
);
);
}
}
</DatePicker>

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

@ -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 的一致。
<style>
.code-box-demo .ant-calendar-picker {

3
components/date-picker/locale/zh_CN.js
View File

@ -5,7 +5,8 @@ import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
// 统一合并为完整的 Locale
let locale = objectAssign({}, GregorianCalendarLocale);
locale.lang = objectAssign({
placeholder: '请选择日期'
placeholder: '请选择日期',
timePlaceholder: '请选择时间',
}, CalendarLocale);
// All settings at:

2
package.json
View File

@ -58,7 +58,7 @@
"rc-switch": "~1.3.1",
"rc-table": "~3.6.2",
"rc-tabs": "~5.5.0",
"rc-time-picker": "1.0.0-alpha9",
"rc-time-picker": "~1.0.0",
"rc-tooltip": "~3.3.0",
"rc-tree": "~0.19.0",
"rc-trigger": "~1.0.6",

1
style/components/datepicker.less
View File

@ -11,7 +11,6 @@
@import "datepicker/Calendar";
@import "datepicker/RangePicker";
@import "datepicker/Time";
@import "datepicker/TimePanel";
@import "datepicker/MonthPanel";
@import "datepicker/YearPanel";
@import "datepicker/DecadePanel";

4
style/components/datepicker/Calendar.less
View File

@ -81,6 +81,7 @@
line-height: @line-height-base;
&-input-wrap {
height: 34px;
padding: 6px;
border-bottom: 1px solid @border-color-split;
}
@ -90,6 +91,7 @@
width: 100%;
cursor: auto;
outline: 0;
height: 22px;
}
&-week-number {
@ -250,7 +252,7 @@
height: 20px;
text-align: center;
line-height: 20px;
top: 6px;
top: 7px;
margin: 0;
}

30
style/components/datepicker/RangePicker.less
View File

@ -1,11 +1,16 @@
@input-box-height: 35px;
@input-box-height: 34px;
.@{calendar-prefix-cls}-range-picker.ant-input {
padding-right: 26px;
}
.@{calendar-prefix-cls}-range-picker-input {
background-color: transparent;
border: 0;
height: 18px;
line-height: 18px;
width: 44%;
outline: 0;
width: 43%;
&[disabled] {
cursor: not-allowed;
@ -33,23 +38,26 @@
position: absolute;
left: 50%;
width: 20px;
margin-left: -10px;
margin-left: -147px;
text-align: center;
height: @input-box-height;
line-height: @input-box-height;
}
.@{calendar-prefix-cls}-date-input-wrap,
.@{calendar-prefix-cls}-time-picker-wrap {
width: 47%;
&-right .@{calendar-prefix-cls}-date-input-wrap {
margin-left: -133px;
}
.@{calendar-prefix-cls}-time-picker-wrap {
position: absolute;
left: 50%;
&.@{calendar-prefix-cls}-time &-middle {
margin-left: -45px;
}
.@{css-prefix}time-picker-input {
width: 100%;
&.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
margin-left: -30px;
}
&.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-time-picker-wrap {
left: 78px;
}
.@{calendar-prefix-cls}-input-wrap {

26
style/components/datepicker/Time.less
View File

@ -1,20 +1,18 @@
@import "../../mixins/input";
.@{calendar-prefix-cls}-time {
> span {
margin: 0 2px;
.@{calendar-prefix-cls}-input,
.@{timepicker-prefix-cls}-input {
.input;
height: 22px;
width: 96px;
}
~ .@{calendar-prefix-cls}-footer-btn {
display: inline;
text-align: left;
.@{timepicker-prefix-cls}-icon {
display: none;
}
&-picker-wrap {
position: absolute;
left: 108px;
top: 6px;
}
}
.@{calendar-prefix-cls}-time-input {
.input;
margin: 0;
width: 30px;
height: 26px;
padding: 0;
text-align: center;
}

72
style/components/datepicker/TimePanel.less
View File

@ -1,72 +0,0 @@
.@{calendar-prefix-cls}-time-panel {
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #fff;
z-index: 10;
position: absolute;
outline: none;
border-radius: @border-radius-base;
}
.@{calendar-prefix-cls}-time-panel-header {
padding: 0 10px;
height: 34px;
line-height: 34px;
position: relative;
text-align: center;
user-select: none;
border-bottom: 1px solid @border-color-split;
}
.@{calendar-prefix-cls}-time-panel-body {
padding: 2px 10px;
}
.@{calendar-prefix-cls}-time-panel-title {
width: 180px;
font-weight: bold;
display: inline-block;
padding: 4px 5px;
text-align: center;
height: 30px;
line-height: 22px;
border-radius: 4px;
}
.@{calendar-prefix-cls}-time-panel-table {
table-layout: fixed;
width: 100%;
border-collapse: separate;
}
.@{calendar-prefix-cls}-time-panel-cell {
text-align: center;
height: 40px;
vertical-align: middle;
}
.@{calendar-prefix-cls}-time-panel-time {
line-height: 24px;
display: block;
border-radius: 4px;
margin: 0 auto;
color: #666;
transition: background 0.3s ease;
&:hover {
background: tint(@primary-color, 90%);
cursor: pointer;
}
}
.@{calendar-prefix-cls}-time-panel-selected-cell .@{calendar-prefix-cls}-time-panel-time {
background: @primary-color;
color: #fff;
&:hover {
background: @primary-color;
color: #fff;
}
}