Quasar: How to show datePicker when trigger @click event?

[zinwalin]

    <q-input
          ref="date"
          filled
          v-model="bookingForm.date"
          label="Appointment Date"
          lazy-rules
          :rules="[ val => val !== null && val !== '' || 'Please select a date']"
          @click="showDatepicker"
        >
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy ref="qDateProxy">
                <q-date
                  v-model="bookingForm.date"
                  :options="optionsValidDates"
                  @input="closeDatePickerDialog"
                />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>

[rstoenescu]

<q-input @click="$refs.qDateProxy.show()"

[zinwalin]

<q-input @click="$refs.qDateProxy.show()"

It works, thanks. BTW, how to make DatePicker uneditable, so user can only select date from picker, can't type date manually.

[rstoenescu]

Use only the QIcon part, without the input.

[zinwalin]

Use only the QIcon part, without the input.

we still need space to show date selected, like https://amsul.ca/pickadate.js/date/

[rstoenescu]

If you have specific use-cases, use QField to build your own https://v1.quasar-framework.org/vue-components/field

[zinwalin]

If you have specific use-cases, use QField to build your own https://v1.quasar-framework.org/vue-components/field

For QField, any @click or @touch event?

[realtebo]

Could you point me to documentation about using the poup proxy?

It's very complicated.. I hope in future we could simply use an input of type date to have the calendar popup for free