ant-design-vue/components/calendar/demo/select.md

51 lines
1.1 KiB
Markdown
Raw Normal View History

2018-03-14 14:00:43 +00:00
<cn>
#### 选择功能
2018-03-13 14:40:13 +00:00
一个通用的日历面板,支持年/月切换。
2018-03-14 14:00:43 +00:00
</cn>
2018-03-13 14:40:13 +00:00
2018-03-14 14:00:43 +00:00
<us>
#### Selectable Calendar
2018-03-13 14:40:13 +00:00
A basic calendar component with Year/Month switch.
2018-03-14 14:00:43 +00:00
</us>
2018-03-13 14:40:13 +00:00
2019-10-09 10:32:23 +00:00
```tpl
2018-03-14 14:00:43 +00:00
<template>
<div>
2019-09-28 12:45:07 +00:00
<a-alert
:message="`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`"
/>
<div
:style="{ display: 'inline-block', width: '500px', border: '1px solid #d9d9d9', borderRadius: '4px' }"
>
2018-03-14 14:00:43 +00:00
<a-calendar :value="value" @select="onSelect" @panelChange="onPanelChange" />
</div>
2019-09-28 12:45:07 +00:00
<div
:style="{ display: 'inline-block', width: '500px',marginLeft: '20px', border: '1px solid #d9d9d9', borderRadius: '4px' }"
>
2018-03-14 14:03:53 +00:00
<a-calendar v-model="value1" />
2018-03-14 14:00:43 +00:00
</div>
</div>
</template>
<script>
2019-09-28 12:45:07 +00:00
import moment from 'moment';
export default {
data() {
return {
value: moment('2017-01-25'),
selectedValue: moment('2017-01-25'),
value1: moment('2017-01-25'),
};
2018-03-14 14:00:43 +00:00
},
2019-09-28 12:45:07 +00:00
methods: {
onSelect(value) {
this.value = value;
this.selectedValue = value;
},
onPanelChange(value) {
this.value = value;
},
},
};
2018-03-14 14:00:43 +00:00
</script>
```