如何用qInput实现qDate范围选择？

Question

如何允许 qInput 中的 qDate 单范围选择？下面是 qInput 中 qDate 单个日期选择的示例代码。我尝试过<q-date v-model="date" range>，但它不会在输入框中显示所选范围。

<div id="q-app">
  <div class="q-pa-md" style="max-width: 300px">
      <q-input filled v-model="date" mask="date" :rules="['date']">
        <template v-slot:append>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy>
              <q-date v-model="date" ></q-date>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
    </div>
</div>

<script>
new Vue({
  el: '#q-app',
  data () {
    return {
      date: '2019/02/01'
    }
  }
})

Answer 1

为了实现您的目标，请注意：

• 使用:model-value而不是v-modelin<q-input>标签。
• dateRange属性必须是对象，而不是字符串。对象格式为：

{
  from: "YYYY-MM-DD",
  to: "YYYY-MM-DD"
}

这是我的建议：

<template>
     <q-input filled :model-value="`${dateRange.from} - ${dateRange.to}`">
      <template v-slot:append>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
            <q-date v-model="dateRange" range>
              <div class="row items-center justify-end">
                <q-btn v-close-popup label="Close" color="primary" flat />
              </div>
            </q-date>
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const dateRange = ref({from: '2022/01/01', to: '2022/01/05'})
    return {
      dateRange
    }
  }
}
</script>

您可以查看我的 codepen 以获得更好的可视化效果：https://codepen.io/hoangdng-the-sans/pen/QWrWNMq ?editors=1010