github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add date-picker

pull/165/head
tjz 2018-03-19 23:05:49 +08:00
parent bfb2bccb5c
commit d4d6dbfb1d
4 changed files with 146 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
components/date-picker/demo/presetted-ranges.md
View File

@ -1,42 +1,47 @@
---
order: 8
title:
zh-CN: 预设范围
en-US: Presetted Ranges
---
## zh-CN
<cn>
#### 预设范围
RangePicker 可以设置常用的 预设范围 提高用户体验。 RangePicker 可以设置常用的 预设范围 提高用户体验。
</cn>
## en-US <us>
#### Presetted Ranges
We can set presetted ranges to RangePicker to improve user experience. We can set presetted ranges to RangePicker to improve user experience.
</us>
````jsx ```html
import { DatePicker } from 'antd'; <template>
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(
<div> <div>
<RangePicker <a-range-picker
ranges={{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }} :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
onChange={onChange} @change="onChange"
/> />
<br /> <br />
<RangePicker <a-range-picker
ranges={{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }} :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
showTime showTime
format="YYYY/MM/DD HH:mm:ss" format="YYYY/MM/DD HH:mm:ss"
onChange={onChange} @change="onChange"
/> />
</div>, </div>
mountNode </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>
```

81
components/date-picker/demo/size.md
View File

@ -1,53 +1,40 @@
---
order: 2
title:
zh-CN: 三种大小
en-US: Three Sizes
---
## zh-CN
<cn>
#### 三种大小
三种大小的输入框，若不设置，则为 `default`。 三种大小的输入框，若不设置，则为 `default`。
</cn>
## en-US <us>
#### Three Sizes
The input box comes in three sizes. `default` will be used if `size` is omitted. The input box comes in three sizes. `default` will be used if `size` is omitted.
</us>
```html
````jsx <template>
import { DatePicker, Radio } from 'antd'; <div>
const { MonthPicker, RangePicker, WeekPicker } = DatePicker; <a-radio-group v-model="size">
<a-radio-button value="large">Large</a-radio-button>
class PickerSizesDemo extends React.Component { <a-radio-button value="default">Default</a-radio-button>
state = { <a-radio-button value="small">Small</a-radio-button>
size: 'default', </a-radio-group>
}; <br /><br />
<a-date-picker :size="size" />
handleSizeChange = (e) => { <br />
this.setState({ size: e.target.value }); <a-month-picker :size="size" placeholder="Select Month" />
} <br />
<a-range-picker :size="size" />
render() { <br />
const { size } = this.state; <a-week-picker :size="size" placeholder="Select Week" />
return ( </div>
<div> </template>
<Radio.Group value={size} onChange={this.handleSizeChange}> <script>
<Radio.Button value="large">Large</Radio.Button> import moment from 'moment';
<Radio.Button value="default">Default</Radio.Button> export default {
<Radio.Button value="small">Small</Radio.Button> data(){
</Radio.Group> return {
<br /><br /> size: 'default',
<DatePicker size={size} /> }
<br /> },
<MonthPicker size={size} placeholder="Select Month" />
<br />
<RangePicker size={size} />
<br />
<WeekPicker size={size} placeholder="Select Week" />
</div>
);
}
} }
</script>
ReactDOM.render(<PickerSizesDemo />, mountNode); ```
````

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

@ -1,99 +1,81 @@
---
order: 6
title:
zh-CN: 自定义日期范围选择
en-US: Customized Range Picker
---
## zh-CN
<cn>
#### 自定义日期范围选择
当 `RangePicker` 无法满足业务需求时，可以使用两个 `DatePicker` 实现类似的功能。 当 `RangePicker` 无法满足业务需求时，可以使用两个 `DatePicker` 实现类似的功能。
> * 通过设置 `disabledDate` 方法，来约束开始和结束日期。 通过设置 `disabledDate` 方法，来约束开始和结束日期。
> * 通过 `open` `onOpenChange` 来优化交互。 通过 `open` `onOpenChange` 来优化交互。
</cn>
## en-US
<us>
#### Customized Range Picker
When `RangePicker` does not satisfied your requirements, try to implement similar functionality with two `DatePicker`. 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. Use the `disabledDate` property to limit the start and end dates.
> * Improve user experience with `open` and `onOpenChange`. Improve user experience with `open` and `onOpenChange`.
</us>
````jsx ```html
import { DatePicker } from 'antd'; <template>
<div>
class DateRange extends React.Component { <a-date-picker
state = { :disabledDate="disabledStartDate"
startValue: null, showTime
endValue: null, format="YYYY-MM-DD HH:mm:ss"
endOpen: false, :value="startValue"
}; placeholder="Start"
@change="onStartChange"
disabledStartDate = (startValue) => { @openChange="handleStartOpenChange"
const endValue = this.state.endValue; />
if (!startValue || !endValue) { <a-date-picker
return false; :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(); },
} methods: {
disabledStartDate (startValue) {
disabledEndDate = (endValue) => { const endValue = this.endValue
const startValue = this.state.startValue; if (!startValue || !endValue) {
if (!endValue || !startValue) { return false
return false; }
} return startValue.valueOf() > endValue.valueOf()
return endValue.valueOf() <= startValue.valueOf(); },
} disabledEndDate (endValue) {
const startValue = this.startValue
onChange = (field, value) => { if (!endValue || !startValue) {
this.setState({ return false
[field]: value, }
}); return endValue.valueOf() <= startValue.valueOf()
} },
onStartChange (value) {
onStartChange = (value) => { this.startValue = value
this.onChange('startValue', value); },
} onEndChange (value) {
this.endValue = value
onEndChange = (value) => { },
this.onChange('endValue', value); handleStartOpenChange (open) {
} if (!open) {
this.endOpen = true
handleStartOpenChange = (open) => { }
if (!open) { },
this.setState({ endOpen: true }); handleEndOpenChange (open) {
} this.endOpen = open
} },
},
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>
);
}
} }
</script>
ReactDOM.render(<DateRange />, mountNode); ```
````

4
components/date-picker/interface.js
View File

@ -1,5 +1,5 @@
import * as moment from 'moment' import * as moment from 'moment'
import { TimePickerProps } from '../time-picker' // import { TimePickerProps } from '../time-picker'
import PropTypes from '../_util/vue-types' import PropTypes from '../_util/vue-types'
export const MomentType = { export const MomentType = {
@ -73,7 +73,7 @@ export const RangePickerProps = () => ({
// onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void; // onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
// onOk?: (selectedTime: moment.Moment) => void; // onOk?: (selectedTime: moment.Moment) => void;
showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]), showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
ranges: PropTypes.objectOf(String), ranges: PropTypes.object,
placeholder: PropTypes.arrayOf(String), placeholder: PropTypes.arrayOf(String),
mode: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(String)]), mode: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(String)]),
disabledTime: PropTypes.func, disabledTime: PropTypes.func,