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

46 lines
1.1 KiB
Markdown

<cn>
#### ้€‰ๆ‹ฉๅŠŸ่ƒฝ
ไธ€ไธช้€š็”จ็š„ๆ—ฅๅކ้ขๆฟ๏ผŒๆ”ฏๆŒๅนด/ๆœˆๅˆ‡ๆขใ€‚
</cn>
<us>
#### Selectable Calendar
A basic calendar component with Year/Month switch.
</us>
```html
<template>
<div>
<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' }">
<a-calendar :value="value" @select="onSelect" @panelChange="onPanelChange" />
</div>
<div :style="{ display: 'inline-block', width: '500px',marginLeft: '20px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
<a-calendar v-model="value1" />
</div>
</div>
</template>
<script>
import moment from 'moment';
export default {
data() {
return {
value: moment('2017-01-25'),
selectedValue: moment('2017-01-25'),
value1: moment('2017-01-25'),
}
},
methods: {
onSelect(value) {
this.value = value
this.selectedValue = value
},
onPanelChange (value) {
this.value = value
}
}
}
</script>
```