add date-picker
tjz
parent
bfb2bccb5c
commit
d4d6dbfb1d
|
|
@ -1,42 +1,47 @@
|
|||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 预设范围
|
||||
en-US: Presetted Ranges
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
<cn>
|
||||
#### 预设范围
|
||||
RangePicker 可以设置常用的 预设范围 提高用户体验。
|
||||
</cn>
|
||||
|
||||
## en-US
|
||||
|
||||
<us>
|
||||
#### Presetted Ranges
|
||||
We can set presetted ranges to RangePicker to improve user experience.
|
||||
</us>
|
||||
|
||||
````jsx
|
||||
import { DatePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
const RangePicker = DatePicker.RangePicker;
|
||||
|
||||
function onChange(dates, dateStrings) {
|
||||
console.log('From: ', dates[0], ', to: ', dates[1]);
|
||||
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<RangePicker
|
||||
ranges={{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }}
|
||||
onChange={onChange}
|
||||
<a-range-picker
|
||||
:ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
|
||||
@change="onChange"
|
||||
/>
|
||||
<br />
|
||||
<RangePicker
|
||||
ranges={{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }}
|
||||
<a-range-picker
|
||||
:ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
|
||||
showTime
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
onChange={onChange}
|
||||
@change="onChange"
|
||||
/>
|
||||
</div>,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
dateFormat: 'YYYY/MM/DD',
|
||||
monthFormat: 'YYYY/MM',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
onChange(dates, dateStrings) {
|
||||
console.log('From: ', dates[0], ', to: ', dates[1]);
|
||||
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,53 +1,40 @@
|
|||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 三种大小
|
||||
en-US: Three Sizes
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
<cn>
|
||||
#### 三种大小
|
||||
三种大小的输入框，若不设置，则为 `default`。
|
||||
</cn>
|
||||
|
||||
## en-US
|
||||
|
||||
<us>
|
||||
#### Three Sizes
|
||||
The input box comes in three sizes. `default` will be used if `size` is omitted.
|
||||
</us>
|
||||
|
||||
|
||||
````jsx
|
||||
import { DatePicker, Radio } from 'antd';
|
||||
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
|
||||
|
||||
class PickerSizesDemo extends React.Component {
|
||||
state = {
|
||||
size: 'default',
|
||||
};
|
||||
|
||||
handleSizeChange = (e) => {
|
||||
this.setState({ size: e.target.value });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { size } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Radio.Group value={size} onChange={this.handleSizeChange}>
|
||||
<Radio.Button value="large">Large</Radio.Button>
|
||||
<Radio.Button value="default">Default</Radio.Button>
|
||||
<Radio.Button value="small">Small</Radio.Button>
|
||||
</Radio.Group>
|
||||
<br /><br />
|
||||
<DatePicker size={size} />
|
||||
<br />
|
||||
<MonthPicker size={size} placeholder="Select Month" />
|
||||
<br />
|
||||
<RangePicker size={size} />
|
||||
<br />
|
||||
<WeekPicker size={size} placeholder="Select Week" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-radio-group v-model="size">
|
||||
<a-radio-button value="large">Large</a-radio-button>
|
||||
<a-radio-button value="default">Default</a-radio-button>
|
||||
<a-radio-button value="small">Small</a-radio-button>
|
||||
</a-radio-group>
|
||||
<br /><br />
|
||||
<a-date-picker :size="size" />
|
||||
<br />
|
||||
<a-month-picker :size="size" placeholder="Select Month" />
|
||||
<br />
|
||||
<a-range-picker :size="size" />
|
||||
<br />
|
||||
<a-week-picker :size="size" placeholder="Select Week" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
size: 'default',
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
ReactDOM.render(<PickerSizesDemo />, mountNode);
|
||||
````
|
||||
</script>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,99 +1,81 @@
|
|||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 自定义日期范围选择
|
||||
en-US: Customized Range Picker
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
<cn>
|
||||
#### 自定义日期范围选择
|
||||
当 `RangePicker` 无法满足业务需求时，可以使用两个 `DatePicker` 实现类似的功能。
|
||||
> * 通过设置 `disabledDate` 方法，来约束开始和结束日期。
|
||||
> * 通过 `open` `onOpenChange` 来优化交互。
|
||||
|
||||
## en-US
|
||||
通过设置 `disabledDate` 方法，来约束开始和结束日期。
|
||||
通过 `open` `onOpenChange` 来优化交互。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Customized Range Picker
|
||||
When `RangePicker` does not satisfied your requirements, try to implement similar functionality with two `DatePicker`.
|
||||
> * Use the `disabledDate` property to limit the start and end dates.
|
||||
> * Improve user experience with `open` and `onOpenChange`.
|
||||
Use the `disabledDate` property to limit the start and end dates.
|
||||
Improve user experience with `open` and `onOpenChange`.
|
||||
</us>
|
||||
|
||||
````jsx
|
||||
import { DatePicker } from 'antd';
|
||||
|
||||
class DateRange extends React.Component {
|
||||
state = {
|
||||
startValue: null,
|
||||
endValue: null,
|
||||
endOpen: false,
|
||||
};
|
||||
|
||||
disabledStartDate = (startValue) => {
|
||||
const endValue = this.state.endValue;
|
||||
if (!startValue || !endValue) {
|
||||
return false;
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-date-picker
|
||||
:disabledDate="disabledStartDate"
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
:value="startValue"
|
||||
placeholder="Start"
|
||||
@change="onStartChange"
|
||||
@openChange="handleStartOpenChange"
|
||||
/>
|
||||
<a-date-picker
|
||||
:disabledDate="disabledEndDate"
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
:value="endValue"
|
||||
placeholder="End"
|
||||
@change="onEndChange"
|
||||
:open="endOpen"
|
||||
@openChange="handleEndOpenChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
startValue: null,
|
||||
endValue: null,
|
||||
endOpen: false,
|
||||
}
|
||||
return startValue.valueOf() > endValue.valueOf();
|
||||
}
|
||||
|
||||
disabledEndDate = (endValue) => {
|
||||
const startValue = this.state.startValue;
|
||||
if (!endValue || !startValue) {
|
||||
return false;
|
||||
}
|
||||
return endValue.valueOf() <= startValue.valueOf();
|
||||
}
|
||||
|
||||
onChange = (field, value) => {
|
||||
this.setState({
|
||||
[field]: value,
|
||||
});
|
||||
}
|
||||
|
||||
onStartChange = (value) => {
|
||||
this.onChange('startValue', value);
|
||||
}
|
||||
|
||||
onEndChange = (value) => {
|
||||
this.onChange('endValue', value);
|
||||
}
|
||||
|
||||
handleStartOpenChange = (open) => {
|
||||
if (!open) {
|
||||
this.setState({ endOpen: true });
|
||||
}
|
||||
}
|
||||
|
||||
handleEndOpenChange = (open) => {
|
||||
this.setState({ endOpen: open });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { startValue, endValue, endOpen } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<DatePicker
|
||||
disabledDate={this.disabledStartDate}
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value={startValue}
|
||||
placeholder="Start"
|
||||
onChange={this.onStartChange}
|
||||
onOpenChange={this.handleStartOpenChange}
|
||||
/>
|
||||
<DatePicker
|
||||
disabledDate={this.disabledEndDate}
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value={endValue}
|
||||
placeholder="End"
|
||||
onChange={this.onEndChange}
|
||||
open={endOpen}
|
||||
onOpenChange={this.handleEndOpenChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
disabledStartDate (startValue) {
|
||||
const endValue = this.endValue
|
||||
if (!startValue || !endValue) {
|
||||
return false
|
||||
}
|
||||
return startValue.valueOf() > endValue.valueOf()
|
||||
},
|
||||
disabledEndDate (endValue) {
|
||||
const startValue = this.startValue
|
||||
if (!endValue || !startValue) {
|
||||
return false
|
||||
}
|
||||
return endValue.valueOf() <= startValue.valueOf()
|
||||
},
|
||||
onStartChange (value) {
|
||||
this.startValue = value
|
||||
},
|
||||
onEndChange (value) {
|
||||
this.endValue = value
|
||||
},
|
||||
handleStartOpenChange (open) {
|
||||
if (!open) {
|
||||
this.endOpen = true
|
||||
}
|
||||
},
|
||||
handleEndOpenChange (open) {
|
||||
this.endOpen = open
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
ReactDOM.render(<DateRange />, mountNode);
|
||||
````
|
||||
</script>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import * as moment from 'moment'
|
||||
import { TimePickerProps } from '../time-picker'
|
||||
// import { TimePickerProps } from '../time-picker'
|
||||
import PropTypes from '../_util/vue-types'
|
||||
|
||||
export const MomentType = {
|
||||
|
|
@ -73,7 +73,7 @@ export const RangePickerProps = () => ({
|
|||
// onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
|
||||
// onOk?: (selectedTime: moment.Moment) => void;
|
||||
showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
|
||||
ranges: PropTypes.objectOf(String),
|
||||
ranges: PropTypes.object,
|
||||
placeholder: PropTypes.arrayOf(String),
|
||||
mode: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(String)]),
|
||||
disabledTime: PropTypes.func,
|
||||
|
|
|
|||
Loading…
Reference in New Issue