How can I display datepicker when click button in vuetify?

Question

My script like this :

===========--=========--=============--===============

<template> 
  <v-card
    max-width="1200"
    class="mx-auto"
  >
      <v-row>
        <v-col cols="12" sm="6" md="4">
          <v-menu
            ref="menu"
            v-model="menu"
            :close-on-content-click="false"
            :return-value.sync="date"
            transition="scale-transition"
            offset-y
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                v-model="date"
                label="Picker in menu"
                prepend-icon="event"
                readonly
                v-on="on"
              ></v-text-field>
            </template>
            <v-date-picker v-model="date" no-title scrollable>
              <div class="flex-grow-1"></div>
              <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
              <v-btn text color="primary" @click="$refs.menu.save(date)">OK</v-btn>
            </v-date-picker>
          </v-menu>
        </v-col>
      </v-row>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      date: new Date().toISOString().substr(0, 10),
      menu: false,
      modal: false,
      menu2: false,
    }),
  }
</script>

The result like this :

it works. but I want to change that. I want the datepicker to appear when clicking a button like this :

How can I do it?

brenzy · Accepted Answer · 2019-11-27 20:24:45Z

1

In your script, replace

<v-text-field
   v-model="date"
   label="Picker in menu"
   prepend-icon="event"
   readonly
   v-on="on"></v-text-field>

with

<v-btn v-on="on">CALL DATEPICKER</v-btn>

answered Nov 27, 2019 at 20:24

brenzy

1,98611 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bad_coder · Accepted Answer · 2021-09-05 00:21:18Z

0

You may try this solution.

<v-text-field
v-model="date"
label="Picker in menu"
prepend-icon="event"
readonly
>
 <template v-slot:append-outer>
  <v-btn
  icon
  color="indigo"
  v-bind="attrs"
  v-on="on"
  >
   <v-icon>mdi-calendar</v-icon>
  </v-btn>
 </template>

</v-text-field>

Note: You may need to add attrs here <template v-slot:activator="{ on }">

edited Sep 5, 2021 at 0:21

bad_coder

13.2k20 gold badges59 silver badges95 bronze badges

answered Sep 4, 2021 at 22:17

darebucad

13 bronze badges

Collectives™ on Stack Overflow

How can I display datepicker when click button in vuetify?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related