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

update date-picker demo

pull/165/head
tjz 2018-03-18 22:05:55 +08:00
parent 6933375351
commit 2b9a433db0
8 changed files with 161 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/date-picker/RangePicker.vue
View File

@ -182,13 +182,14 @@ export default {
},
renderFooter (...args) {
const { prefixCls, ranges, renderExtraFooter } = this
const { prefixCls, ranges, $scopedSlots, $slots } = this
const renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter
if (!ranges && !renderExtraFooter) {
return null
}
const customFooter = renderExtraFooter ? (
<div class={`${prefixCls}-footer-extra`} key='extra'>
{renderExtraFooter(...args)}
{typeof renderExtraFooter === 'function' ? renderExtraFooter(...args) : renderExtraFooter}
</div>
) : null
const operations = Object.keys(ranges || {}).map((range) => {

5
components/date-picker/createPicker.js
View File

@ -51,10 +51,11 @@ export default function createPicker (TheCalendar, props) {
},
methods: {
renderFooter (...args) {
const { prefixCls, renderExtraFooter } = this
const { prefixCls, $scopedSlots, $slots } = this
const renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter
return renderExtraFooter ? (
<div class={`${prefixCls}-footer-extra`}>
{renderExtraFooter(...args)}
{typeof renderExtraFooter === 'function' ? renderExtraFooter(...args) : renderExtraFooter}
</div>
) : null
},

49
components/date-picker/demo/disabled.md
View File

@ -1,34 +1,37 @@
---
order: 4
title:
zh-CN: 禁用
en-US: Disabled
---
## zh-CN
<cn>
#### 禁用
选择框的不可用状态。
</cn>
## en-US
<us>
#### Disabled
A disabled state of the `DatePicker`.
</us>
````jsx
import { DatePicker } from 'antd';
import moment from 'moment';
const { MonthPicker, RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
ReactDOM.render(
```html
<template>
<div>
<DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
<a-date-picker :defaultValue="moment('2015-06-06', dateFormat)" disabled />
<br />
<MonthPicker defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
<a-month-picker :defaultValue="moment('2015-06', 'YYYY-MM')" disabled />
<br />
<RangePicker
defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]}
<a-range-picker
:defaultValue="[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]"
disabled
/>
</div>
, mountNode);
````
</template>
<script>
import moment from 'moment';
export default {
data(){
this.dateFormat = 'YYYY-MM-DD'
return {}
},
methods: {
moment,
}
}
</script>
```

57
components/date-picker/demo/extra-footer.md
View File

@ -1,29 +1,42 @@
---
order: 10
title:
zh-CN: 额外的页脚
en-US: Extra Footer
---
## zh-CN
<cn>
#### 额外的页脚
在浮层中加入额外的页脚，以满足某些定制信息的需求。
</cn>
## en-US
<us>
#### Extra Footer
Render extra footer in panel for customized requirements.
</us>
````jsx
import { DatePicker } from 'antd';
const { RangePicker, MonthPicker } = DatePicker;
ReactDOM.render(
```html
<template>
<div>
<DatePicker renderExtraFooter={() => 'extra footer'} />
<DatePicker renderExtraFooter={() => 'extra footer'} showTime />
<RangePicker renderExtraFooter={() => 'extra footer'} />
<RangePicker renderExtraFooter={() => 'extra footer'} showTime />
<MonthPicker renderExtraFooter={() => 'extra footer'} placeholder="Select month" />
<a-date-picker>
<template slot="renderExtraFooter">
extra footer
</template>
</a-date-picker>
<a-date-picker showTime >
<template slot="renderExtraFooter">
extra footer
</template>
</a-date-picker>
<a-range-picker >
<template slot="renderExtraFooter">
extra footer
</template>
</a-range-picker>
<a-range-picker showTime >
<template slot="renderExtraFooter">
extra footer
</template>
</a-range-picker>
<a-month-picker placeholder="Select month" >
<template slot="renderExtraFooter">
extra footer
</template>
</a-month-picker>
</div>
, mountNode);
````
</template>
```

55
components/date-picker/demo/format.md
View File

@ -1,35 +1,40 @@
---
order: 1
title:
zh-CN: 日期格式
en-US: Date Format
---
## zh-CN
<cn>
#### 日期格式
使用 `format` 属性，可以自定义日期显示格式。
</cn>
## en-US
<us>
#### Date Format
We can set the date format by `format`.
</us>
````jsx
import { DatePicker } from 'antd';
import moment from 'moment';
const { MonthPicker, RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';
ReactDOM.render(
```html
<template>
<div>
<DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
<a-date-picker :defaultValue="moment('2015/01/01', dateFormat)" :format="dateFormat" />
<br />
<MonthPicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} />
<a-month-picker :defaultValue="moment('2015/01', monthFormat)" :format="monthFormat" />
<br />
<RangePicker
defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
format={dateFormat}
<a-range-picker
:defaultValue="[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]"
:format="dateFormat"
/>
</div>
, mountNode);
````
</template>
<script>
import moment from 'moment';
export default {
data(){
return {
dateFormat: 'YYYY/MM/DD',
monthFormat: 'YYYY/MM',
}
},
methods: {
moment,
}
}
</script>
```

119
components/date-picker/demo/mode.md
View File

@ -1,82 +1,61 @@
---
order: 11
title:
zh-CN: 受控面板
en-US: Controlled Panels
---
## zh-CN
<cn>
#### 受控面板
通过组合 `mode` 与 `onPanelChange` 控制要展示的面板。
</cn>
## en-US
<us>
#### Controlled Panels
Determing which panel to show with `mode` and `onPanelChange`.
</us>
````jsx
import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;
class ControlledDatePicker extends React.Component {
state = { mode: 'time' };
handleOpenChange = (open) => {
if (open) {
this.setState({ mode: 'time' });
```html
<template>
<div>
<a-date-picker
:mode="mode1"
showTime
@openChange="handleOpenChange1"
@panelChange="handlePanelChange1"
/>
<br />
<a-range-picker
:placeholder="['Start month', 'End month']"
format="YYYY-MM"
:value="value"
:mode="mode2"
@panelChange="handlePanelChange2"
/>
</div>
</template>
<script>
export default {
data(){
return {
mode1: 'time',
mode2: ['month', 'month'],
value: [],
}
}
},
methods: {
handleOpenChange1(open) {
if (open) {
this.mode1 = 'time'
}
},
handlePanelChange = (value, mode) => {
this.setState({ mode });
}
render() {
return (
<DatePicker
mode={this.state.mode}
showTime
onOpenChange={this.handleOpenChange}
onPanelChange={this.handlePanelChange}
/>
);
}
}
class ControlledRangePicker extends React.Component {
state = {
mode: ['month', 'month'],
value: [],
};
handlePanelChange = (value, mode) => {
this.setState({
value,
mode: [
handlePanelChange1(value, mode) {
this.mode1 = mode
},
handlePanelChange2 (value, mode) {
this.value = value
this.mode2 = [
mode[0] === 'date' ? 'month' : mode[0],
mode[1] === 'date' ? 'month' : mode[1],
],
});
}
render() {
const { value, mode } = this.state;
return (
<RangePicker
placeholder={['Start month', 'End month']}
format="YYYY-MM"
value={value}
mode={mode}
onPanelChange={this.handlePanelChange}
/>
);
]
},
}
}
</script>
```
ReactDOM.render(
<div>
<ControlledDatePicker />
<br />
<ControlledRangePicker />
</div>
, mountNode);
````

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

@ -41,7 +41,7 @@ export const SinglePickerProps = () => ({
export const DatePickerProps = () => ({
...PickerProps(), ...SinglePickerProps(),
showTime: PropTypes.oneOfType([PropTypes.shape(TimePickerProps()).loose, PropTypes.bool]),
showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
open: PropTypes.bool,
disabledTime: PropTypes.func,
// onOpenChange?: (status: bool) => void;
@ -54,9 +54,15 @@ export const MonthPickerProps = () => ({
placeholder: PropTypes.string,
monthCellContentRender: PropTypes.func,
})
function isMomentArray (value) {
if (Array.isArray(value)) {
return value.length === 0 || !!value.find((val) => val === undefined || moment.isMoment(val))
}
return false
}
export const RangePickerValue = PropTypes.arrayOf(MomentType)
export const RangePickerPresetRange = PropTypes.oneOfType([RangePickerValue, PropTypes.func])
export const RangePickerValue = PropTypes.custom(isMomentArray)
// export const RangePickerPresetRange = PropTypes.oneOfType([RangePickerValue, PropTypes.func])
export const RangePickerProps = () => ({
...PickerProps(),
@ -66,7 +72,7 @@ export const RangePickerProps = () => ({
// onChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
// onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
// onOk?: (selectedTime: moment.Moment) => void;
showTime: PropTypes.oneOfType([PropTypes.shape(TimePickerProps()).loose, PropTypes.bool]),
showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
ranges: PropTypes.objectOf(String),
placeholder: PropTypes.arrayOf(String),
mode: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(String)]),

6
components/date-picker/wrapPicker.js
View File

@ -131,7 +131,11 @@ export default function wrapPicker (Picker, props, defaultFormat) {
return (
<Picker
{...pickerProps}
/>
>
<template slot='renderExtraFooter'>
{this.$slots.renderExtraFooter}
</template>
</Picker>
)
},
},