ElementPlus UI: DatePicker范围从/到目前为止总是相同的

Question

我正在使用Vue3+ElementPlus UI。我需要在我的页面上有一个日期范围组件(截止/截止日期)。我加了一个如下：

<template>
   <el-date-picker
      v-model="dates"
      type="daterange"
      range-separator="To"
      unlink-panels
      start-placeholder="Start date"
      end-placeholder="End date"
      value-format="yyyy-MM-dd"
      >
    </el-date-picker>
</template>

<script lang="ts">
import { defineComponent, ref,computed, reactive, provide, toRef, onMounted } from 'vue'
import { ElDatePicker } from 'element-plus'

export default defineComponent({
  name: 'Home',
  setup: function () {

    const dates = ref(['2021-01-01', '2021-01-31']);

     return {
         dates
     }
  }
})
</script>

最初，当我为"dates“设置初始值时，就可以了。但是，当我在from框或to框中更改日期时，两个日期都更改为相同的值，即都显示"2021-03-05“。我是不是用错了？顺便说一句，即使在它的办公室网站上，“从”和“到”的日期也是一起更改的。

Answer 1

我也有过同样的问题。你必须利用事件。这些是我的密码

 <div class="block">
<span class="demonstration">Date Range<br/></span>
<el-date-picker
  v-model="value2"
  type="datetimerange"
  :shortcuts="shortcuts"
  range-separator="To"
  start-placeholder="Start date"
  end-placeholder="End date"
  value-format="YYYY-MM-DD"
  @change="datePicked($event)"
  />
 </div>
 <script setup>
 import { ref } from 'vue'
 import store from '../store';
  
const value2 = ref('')
const datePicked=(event)=>{console.log('The first date is'+event[0]+" 
 and the second date is"+event[1])}
 </script>

最终成功了吗？V模型将输入作为一个组件来处理。我被一个类似的问题困扰了几个小时。像我一样使用事件或方法