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

1.1 KiB

#### 选择功能 一个通用的日历面板,支持年/月切换。 #### Selectable Calendar A basic calendar component with Year/Month switch.
<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>