ant-design-vue/components/date-picker/demo/mode.md

<cn>
#### 受控面板
通过组合 `mode` 与 `onPanelChange` 控制要展示的面板。
</cn>

<us>
#### Controlled Panels
Determing which panel to show with `mode` and `onPanelChange`.
</us>

```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"
      @change="handleChange"
    />
  </div>
</template>
<script>
export default {
  data(){
    return {
      mode1: 'time',
      mode2: ['month', 'month'],
      value: [],
    }
  },
  methods: {
    handleOpenChange1(open) {
      if (open) {
        this.mode1 = 'time'
      }
    },
    handleChange(value){
      this.value = value
    },
    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],
      ]
    },
  }
}
</script>
```