在 vuetify.js 中将 Header 设置为 DatePicker

Posted 2023-02-23

【中文标题】在 vuetify.js 中将 Header 设置为 DatePicker

【英文标题】：Set a Header to a DatePicker in vuetify.js

【发布时间】：2020-04-09 01:20:21

【问题描述】：

您好，我想在 v-date-picker 组件上设置一个标题。我该怎么做？

My idea is set a header over the component

【问题讨论】：

到目前为止你尝试过什么代码？请编辑您的问题并添加它。

【参考方案1】：

你可以这样试试：

      <div>
        <v-menu
          lazy
          :close-on-content-click="false"
          v-model="menu"
          transition="scale-transition"
          offset-y
          full-width
          :nudge-right="40"
          max-
          min-
        >
          <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

【讨论】：

我正在查看文档，但找不到任何关于我想要做什么的信息。让我再解释一下。我想在日期选择器上方（日历上方）放置一个标题或说明我在哪里的文本，例如“开始”。谢谢。

所以像 Start ?

【参考方案2】：

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