CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
spliite444
spliite444

Reputation: 37

TextField v-on action activate on append-icon

I want to display the calendar by pressing the icon button(append-icon). What's missing from the code below?

                  <v-menu
                    v-model="menu"
                    :close-on-content-click="false"
                    transition="slide-y-transition"
                    offset-y
                  >
                    <template v-slot:activator="{ on }">
                      <v-text-field
                        v-on="on"
                        v-model="test.data"
                        @click.append="on" <!--I want like this-->
                        :append-icon="'mdi-map-marker-off'">
                      </v-text-field>
                    </template>
                    <v-date-picker
                      v-on:dateChanged="getDate"
                      v-model="calendar">
                    </v-date-picker>
                  </v-menu>

Upvotes: 3

Views: 2566

Answers (4)

Heather W
Heather W

Reputation: 51

For anyone still looking for an answer to this, you can use @click:append="on.click" on v-text-field to open the date picker when the appended icon is clicked.

For example:

<v-menu>
  <template #activator="{ on }">
    <v-text-field
      @click:append="on.click" 
      append-icon="mdi-calendar-month" 
      label="Date" 
      readonly 
      v-model="formattedDate"
      v-on="on"
    ></v-text-field>
  </template>
  <v-date-picker 
    v-model="date"
  ></v-date-picker>
</v-menu>

Upvotes: 4

Mohammad Hosseini Parto
Mohammad Hosseini Parto

Reputation: 731

This code is working:

<v-menu
                
                v-model="expStart"
                :close-on-content-click="false"
                offset-y
                outlined
                dense
                min-width="290px"
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-text-field
                    :label="dialogFormField.label"
                    prepend-icon="mdi-calendar"
                    **v-on:click:prepend="expStart=true"**
                    readonly
                    v-bind="attrs"
                    v-on="on"
                    outlined
                    dense
                    
                  ></v-text-field>
                </template>

Upvotes: 0

Ckuessner
Ckuessner

Reputation: 721

You are probably looking for something like this.

In your Vue component:

<template>
 <div id="app">
  <v-app id="inspire">
    <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>
            <v-spacer></v-spacer>
            <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-app>
 </div>
</template>

In your <script>

data: () => ({
    date: new Date().toISOString().substr(0, 10),
    menu: false
  }),

Upvotes: 1

David
David

Reputation: 529

Add @click.append with the method you want to call.

                 <template v-slot:activator="{ on }">
                  <v-text-field
                    v-on="on"
                    v-model="test.data"
                    @click.append="method"
                    :append-icon="'mdi-map-marker-off'">
                  </v-text-field>
                </template>

Upvotes: 0

Related Questions