VueDate Picker问题

时间:2018-03-08 09:53:26

标签: vue.js vuetify.js

有没有办法在没有点击OK按钮的情况下用vuetify选择datepicker中的日期。当我选择日期时,我需要它自动关闭并将其保存到文本字段。 Vuetify版本为0.16

<v-flex xs11 sm3>     
  <v-dialog
    persistent
    v-model="startmodal"
    lazy
    full-width
    max-width="290px"
  >
    <v-text-field
      slot="activator"
      label="Start Date"
      v-model="startdate"
      prepend-icon="event"         
      required
    ></v-text-field>
    <v-date-picker v-model="startdate" scrollable actions>
      <template slot-scope="{ save, cancel }">
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat color="primary" @click="cancel">Cancel</v-btn>
          <v-btn flat color="primary" @click="save">OK</v-btn>
        </v-card-actions>
      </template>
    </v-date-picker>
  </v-dialog>
</v-flex>

**

1 个答案:

答案 0 :(得分:2)

将日期选择器包装到菜单中并添加::: close-on-content-click =“true”

以下是一个例子:

             <v-menu
                    lazy
                    offset-y
                    full-width
                    :close-on-content-click="true"
                    v-model="menu"
                    transition="scale-transition"
                    :nudge-right="40"
                    max-width="290px"
                    min-width="290px"
                    >
                        <v-text-field
                        slot="activator"
                        label="Activation Date"
                        required
                        v-model="selectedDate"
                        prepend-icon="event"
                        readonly
                        ></v-text-field>
                        <v-date-picker
                            show-current
                            class="mt-3"
                            v-model="selectedDate"
                        >
                        <template slot-scope="{ save, cancel }">
                            <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn flat color="primary" @click="cancel">Cancel</v-btn>
                            <v-btn flat color="primary" @click="save">OK</v-btn>
                            </v-card-actions>
                        </template>
                     </v-date-picker>
                </v-menu>