How to implement qDate range selection with qInput?

Question

How to allow qDate single range selection in qInput? Below is just an example code of qDate single date selection in qInput. I tried <q-date v-model="date" range> but it won't display the selected range in the input box.

<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

To achieve your goal, note that:

• Use :model-value instead of v-model in <q-input> tag.
• dateRange property must be an object, not string. The object format is:

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

Here is my suggestion:

<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>

You could take a look on my codepen for better visualization: https://codepen.io/hoangdng-the-sans/pen/QWrWNMq?editors=1010