在vuetify.js中将标头设置为DatePicker

Question

你好，我想在一个v-date-选择器组件上设置一个头。我怎么能做到这一点？

My idea is set a header over the component

Answer 1

你可以像这样试一下：

      <div>
        <v-menu
          lazy
          :close-on-content-click="false"
          v-model="menu"
          transition="scale-transition"
          offset-y
          full-width
          :nudge-right="40"
          max-width="290px"
          min-width="290px"
        >
          <v-text-field
            slot="activator"
            label="Picker in menu"
            v-model="date"
            prepend-icon="event"
            readonly
          ></v-text-field>
          <v-date-picker v-model="date" no-title scrollable actions>
            <template 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>
     </div>

<scirpt>

 name: "YourClassName",
        props: {},
        components: {},
        data() {
            return {
                date: null,
                menu: false,
                modal: false
            };
        },
</script>

希望这会有帮助=)

编辑:顺便说一句，我强烈推荐Vuetify，你可以在你的前端搜索你需要的组件。看这里：Vuetify Date-Picker

Answer 2

您可以使用selected-items-text属性来设置标题文本。看这里：Vuetify v-date-picker API