日期/月份 选择器

v-date-picker 是独立的组件，可用于许多现有的 Vuetify 组件。它为用户提供了一个选择 日期/月份 的可视化表示。

有关 ISO 8601 和其他标准的更多信息，请访问 ISO（国际标准化组织） 国际标准 官方网页。

用例

日期选择器有两种方向变化：纵向 （默认） 和横向。 默认情况下，它们在日期（对于日期选择器）或月份（对于月选择器）时发出 input 事件，但是使用 reactive 属性，即使单击 年/月 后，它们也可以更新模型。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-date-picker v-model="picker"></v-date-picker>
  4.   </v-row>
  5. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: new Date().toISOString().substr(0, 10),
  6.       }
  7.     },
  8.   }
  9. </script>

Date pickers（日期选择器） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Date pickers（日期选择器） - 图2

实战场

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-col cols="12">
  4.       <v-row justify="space-around">
  5.         <v-switch v-model="landscape" class="ma-4" label="Landscape"></v-switch>
  6.         <v-switch v-model="reactive" class="ma-4" label="Reactive"></v-switch>
  7.         <v-switch v-model="fullWidth" class="ma-4" label="Full width"></v-switch>
  8.         <v-switch v-model="showCurrent" class="ma-4" label="Show current date"></v-switch>
  9.         <v-switch v-model="month" class="ma-4" label="Month picker"></v-switch>
  10.         <v-switch v-model="multiple" class="ma-4" label="Multiple"></v-switch>
  11.         <v-switch v-model="readonly" class="ma-4" label="Readonly"></v-switch>
  12.         <v-switch v-model="disabled" class="ma-4" label="Disabled"></v-switch>
  13.         <v-switch v-model="enableEvents" class="ma-4" label="Events"></v-switch>
  14.       </v-row>
  15.     </v-col>
  17.     <v-date-picker
  18.       v-model="picker"
  19.       :landscape="landscape"
  20.       :reactive="reactive"
  21.       :full-width="fullWidth"
  22.       :show-current="showCurrent"
  23.       :type="month ? 'month' : 'date'"
  24.       :multiple="multiple"
  25.       :readonly="readonly"
  26.       :disabled="disabled"
  27.       :events="enableEvents ? functionEvents : null"
  28.     ></v-date-picker>
  29.   </v-row>
  30. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: new Date().toISOString().substr(0, 10),
  6.         landscape: false,
  7.         reactive: false,
  8.         fullWidth: false,
  9.         showCurrent: true,
  10.         month: false,
  11.         multiple: false,
  12.         readonly: false,
  13.         disabled: false,
  14.         enableEvents: false,
  15.       }
  16.     },
  18.     computed: {
  19.       functionEvents () {
  20.         return this.month ? this.monthFunctionEvents : this.dateFunctionEvents
  21.       },
  22.     },
  24.     methods: {
  25.       dateFunctionEvents (date) {
  26.         const [,, day] = date.split('-')
  27.         if ([12, 17, 28].includes(parseInt(day, 10))) return true
  28.         if ([1, 19, 22].includes(parseInt(day, 10))) return ['red', '#00f']
  29.         return false
  30.       },
  31.       monthFunctionEvents (date) {
  32.         const month = parseInt(date.split('-')[1], 10)
  33.         if ([1, 3, 7].includes(month)) return true
  34.         if ([2, 5, 12].includes(month)) return ['error', 'purple', 'rgba(0, 128, 0, 0.5)']
  35.         return false
  36.       },
  37.     },
  38.   }
  39. </script>

Date pickers（日期选择器） - 图3

示例

下面是一些简单到复杂的例子。

日期选择器 - 颜色

日期选择器颜色可以使用 color 和 header-color 属性设置。如果没有提供 header-color 属性将使用 color 属性值。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-date-picker v-model="picker" color="green lighten-1"></v-date-picker>
  4.     <v-date-picker v-model="picker2" color="green lighten-1" header-color="primary"></v-date-picker>
  5.   </v-row>
  6. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: new Date().toISOString().substr(0, 10),
  6.         picker2: new Date().toISOString().substr(0, 10),
  7.       }
  8.     },
  9.   }
  10. </script>

Date pickers（日期选择器） - 图4

日期选择器 - 允许的日期

您可以使用数组、对象和函数指定允许的日期。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-date-picker
  4.       v-model="date"
  5.       :allowed-dates="allowedDates"
  6.       class="mt-4"
  7.       min="2016-06-15"
  8.       max="2018-03-20"
  9.     ></v-date-picker>
  10.   </v-row>
  11. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       date: '2018-03-02',
  5.     }),
  7.     methods: {
  8.       allowedDates: val => parseInt(val.split('-')[2], 10) % 2 === 0,
  9.     },
  10.   }
  11. </script>

Date pickers（日期选择器） - 图5

日期选择器 - 设置选择器宽度

您可以指定选择器的宽度或使其完全宽度。

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-date-picker
  4.       v-model="date"
  5.       width="290"
  6.       class="mt-4"
  7.     ></v-date-picker>
  8.     <v-date-picker
  9.       v-model="date"
  10.       full-width
  11.       :landscape="$vuetify.breakpoint.smAndUp"
  12.       class="mt-4"
  13.     ></v-date-picker>
  14.   </v-row>
  15. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       date: new Date().toISOString().substr(0, 10),
  5.     }),
  6.   }
  7. </script>

Date pickers（日期选择器） - 图6

日期选择器 - 对显示的 月/年 变化做出反应

您可以观看 pickerDate，它是显示的 月份/年份（取决于选择器类型和活动视图），以便在更改时执行一些操作。

template script

  1. <template>
  2.   <v-row>
  3.     <v-col cols="12" sm="6" class="my-2 px-1">
  4.       <v-date-picker
  5.         ref="picker"
  6.         v-model="date"
  7.         :picker-date.sync="pickerDate"
  8.         full-width
  9.       ></v-date-picker>
  10.     </v-col>
  11.     <v-col cols="12" sm="6" class="my-2 px-1">
  12.       <div class="title">Month news ({{ pickerDate || 'change month...' }})</div>
  13.       <div class="subheading">Change month to see other news</div>
  14.       <ul class="ma-4">
  15.         <li v-for="note in notes" :key="note">{{ note }}</li>
  16.       </ul>
  17.     </v-col>
  18.   </v-row>
  19. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       date: new Date().toISOString().substr(0, 10),
  5.       pickerDate: null,
  6.       notes: [],
  7.       allNotes: [
  8.         'President met with prime minister',
  9.         'New power plant opened',
  10.         'Rocket launch announced',
  11.         'Global warming discussion cancelled',
  12.         'Company changed its location',
  13.       ],
  14.     }),
  15.     watch: {
  16.       pickerDate (val) {
  17.         this.notes = [
  18.           this.allNotes[Math.floor(Math.random() * 5)],
  19.           this.allNotes[Math.floor(Math.random() * 5)],
  20.           this.allNotes[Math.floor(Math.random() * 5)],
  21.         ].filter((value, index, self) => self.indexOf(value) === index)
  22.       },
  23.     },
  24.   }
  25. </script>

Date pickers（日期选择器） - 图7

日期选择器 - 国际化

日期选择器通过 JavaScript Date 对象支持国际化。 使用 locale 属性指定 BCP 47 语言标签，然后使用first-day-of-week 属性设置一周的第一天。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-date-picker
  4.       v-model="picker"
  5.       :first-day-of-week="0"
  6.       locale="zh-cn"
  7.     ></v-date-picker>
  8.     <v-date-picker
  9.       v-model="picker"
  10.       :first-day-of-week="1"
  11.       locale="sv-se"
  12.     ></v-date-picker>
  13.   </v-row>
  14. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: new Date().toISOString().substr(0, 10),
  6.       }
  7.     },
  8.   }
  9. </script>

Date pickers（日期选择器） - 图8

日期选择器 - 图标

您可以覆盖选择器中使用的默认图标。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-date-picker
  4.       v-model="picker"
  5.       year-icon="mdi-calendar-blank"
  6.       prev-icon="mdi-skip-previous"
  7.       next-icon="mdi-skip-next"
  8.     ></v-date-picker>
  9.   </v-row>
  10. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: new Date().toISOString().substr(0, 10),
  6.       }
  7.     },
  8.   }
  9. </script>

Date pickers（日期选择器） - 图9

日期选择器 - 只读

可以通过添加 readonly 属性来禁用选择新日期。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-date-picker v-model="date" readonly></v-date-picker>
  4.   </v-row>
  5. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         date: new Date().toISOString().substr(0, 10),
  6.       }
  7.     },
  8.   }
  9. </script>

Date pickers（日期选择器） - 图10

日期选择器 - 当前日期指示器

默认情况下，使用轮廓按钮显示当前日期 - show-current 属性可让您删除边框或选择其他日期作为当前日期显示。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-date-picker v-model="date1" :show-current="false"></v-date-picker>
  4.     <v-date-picker v-model="date2" show-current="2013-07-13"></v-date-picker>
  5.   </v-row>
  6. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         date1: new Date().toISOString().substr(0, 10),
  6.         date2: '2013-07-29',
  7.       }
  8.     },
  9.   }
  10. </script>

Date pickers（日期选择器） - 图11

月份选择器

月份选择器有两种方向变化：纵向 （默认） 和横向。

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-checkbox v-model="landscape" label="Landscape"></v-checkbox>
  4.     <v-date-picker v-model="picker" :landscape="landscape" type="month"></v-date-picker>
  5.   </v-row>
  6. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: new Date().toISOString().substr(0, 7),
  6.         landscape: false,
  7.       }
  8.     },
  9.   }
  10. </script>

Date pickers（日期选择器） - 图12

月份选择器 - 颜色

月份选择器颜色可以使用 color 和 header-color 属性设置。如果没有提供 header-color 属性将使用 color 属性值。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-date-picker v-model="picker" type="month" color="green lighten-1"></v-date-picker>
  4.     <v-date-picker v-model="picker2" type="month" color="green lighten-1" header-color="primary"></v-date-picker>
  5.   </v-row>
  6. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: new Date().toISOString().substr(0, 7),
  6.         picker2: new Date().toISOString().substr(0, 7),
  7.       }
  8.     },
  9.   }
  10. </script>

Date pickers（日期选择器） - 图13

月份选择器 - 允许月份

您可以使用数组、对象或函数指定允许的月份。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-date-picker
  4.       v-model="date"
  5.       :allowed-dates="allowedMonths"
  6.       type="month"
  7.       class="mt-4"
  8.       min="2017-06"
  9.       max="2019-10"
  10.     ></v-date-picker>
  11.   </v-row>
  12. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         date: '2017-12',
  6.       }
  7.     },
  9.     methods: {
  10.       allowedMonths: val => parseInt(val.split('-')[1], 10) % 2 === 0,
  11.     },
  12.   }
  13. </script>

Date pickers（日期选择器） - 图14

月份选择器 - 多选

月份选择器现在可以使用 multiple 属性选择多个月。如果使用 multiple ，则月份选择器的模型是一个数组。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-date-picker
  4.       v-model="months"
  5.       type="month"
  6.       multiple
  7.     ></v-date-picker>
  8.   </v-row>
  9. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       months: ['2018-09', '2018-10'],
  5.     }),
  6.   }
  7. </script>

Date pickers（日期选择器） - 图15

月份选择器 - 设置选择器宽度

您可以指定选择器的宽度或使其完全宽度。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-date-picker
  4.       v-model="date"
  5.       type="month"
  6.       width="290"
  7.       class="mt-4"
  8.     ></v-date-picker>
  9.     <v-date-picker
  10.       v-model="date"
  11.       full-width
  12.       :landscape="$vuetify.breakpoint.smAndUp"
  13.       type="month"
  14.       class="mt-4"
  15.     ></v-date-picker>
  16.   </v-row>
  17. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       date: new Date().toISOString().substr(0, 7),
  5.     }),
  6.   }
  7. </script>

Date pickers（日期选择器） - 图16

Vuetify Discord

Get help with an issue, report a bug or connect with other developers on Discord

ads by Vuetify

](https://community.vuetifyjs.com?ref=vuetifyjs.com)

月份选择器 - 国际化

月份选择器支持通过 JavaScript 日期对象进行国际化。 使用 locale prop, 指定一个 BCP 47 语言标记, 然后使用 first day of week 属性, 设置星期的第一天。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-date-picker
  4.       v-model="picker"
  5.       type="month"
  6.       locale="th"
  7.     ></v-date-picker>
  8.     <v-date-picker
  9.       v-model="picker"
  10.       type="month"
  11.       locale="sv-se"
  12.     ></v-date-picker>
  13.   </v-row>
  14. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: new Date().toISOString().substr(0, 7),
  6.       }
  7.     },
  8.   }
  9. </script>

Date pickers（日期选择器） - 图17

月份选择器 - 图标

您可以覆盖选择器中使用的默认图标。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-date-picker
  4.       v-model="picker"
  5.       type="month"
  6.       year-icon="mdi-calendar-blank"
  7.       prev-icon="mdi-skip-previous"
  8.       next-icon="mdi-skip-next"
  9.     ></v-date-picker>
  10.   </v-row>
  11. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: new Date().toISOString().substr(0, 7),
  6.       }
  7.     },
  8.   }
  9. </script>

Date pickers（日期选择器） - 图18

月份选择器 - 只读

可以通过添加 readonly 属性来禁用选择新日期。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-date-picker v-model="date" type="month" readonly></v-date-picker>
  4.   </v-row>
  5. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         date: new Date().toISOString().substr(0, 7),
  6.       }
  7.     },
  8.   }
  9. </script>

Date pickers（日期选择器） - 图19

月份选择器 - 当前月份指示器

默认情况下，使用轮廓按钮显示当前月份 - * show-current** 属性可让您删除边框或选择要显示为当前月份的其他月份。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-date-picker v-model="month1" :show-current="false" type="month"></v-date-picker>
  4.     <v-date-picker v-model="month2" type="month" show-current="2013-07"></v-date-picker>
  5.   </v-row>
  6. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         month1: new Date().toISOString().substr(0, 7),
  6.         month2: '2013-09',
  7.       }
  8.     },
  9.   }
  10. </script>

Date pickers（日期选择器） - 图20

日期选择器 - 在对话框和菜单中

将选择器集成到 v-text-field 中时，建议使用 readonly 属性。 这样可以防止移动键盘触发。 为了节省垂直空间，您还可以隐藏选择器标题。

选择器提供了一个插槽，您可以使用它来保存和取消功能。 这将保留一个旧值，如果用户取消，则可以替换该旧值。

template script

  1. <template>
  2.   <v-row>
  3.     <v-col cols="12" sm="6" md="4">
  4.       <v-menu
  5.         ref="menu"
  6.         v-model="menu"
  7.         :close-on-content-click="false"
  8.         :return-value.sync="date"
  9.         transition="scale-transition"
  10.         offset-y
  11.         min-width="290px"
  12.       >
  13.         <template v-slot:activator="{ on }">
  14.           <v-text-field
  15.             v-model="date"
  16.             label="Picker in menu"
  17.             prepend-icon="event"
  18.             readonly
  19.             v-on="on"
  20.           ></v-text-field>
  21.         </template>
  22.         <v-date-picker v-model="date" no-title scrollable>
  23.           <v-spacer></v-spacer>
  24.           <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
  25.           <v-btn text color="primary" @click="$refs.menu.save(date)">OK</v-btn>
  26.         </v-date-picker>
  27.       </v-menu>
  28.     </v-col>
  29.     <v-spacer></v-spacer>
  30.     <v-col cols="12" sm="6" md="4">
  31.       <v-dialog
  32.         ref="dialog"
  33.         v-model="modal"
  34.         :return-value.sync="date"
  35.         persistent
  36.         width="290px"
  37.       >
  38.         <template v-slot:activator="{ on }">
  39.           <v-text-field
  40.             v-model="date"
  41.             label="Picker in dialog"
  42.             prepend-icon="event"
  43.             readonly
  44.             v-on="on"
  45.           ></v-text-field>
  46.         </template>
  47.         <v-date-picker v-model="date" scrollable>
  48.           <v-spacer></v-spacer>
  49.           <v-btn text color="primary" @click="modal = false">Cancel</v-btn>
  50.           <v-btn text color="primary" @click="$refs.dialog.save(date)">OK</v-btn>
  51.         </v-date-picker>
  52.       </v-dialog>
  53.     </v-col>
  54.     <v-col cols="12" sm="6" md="4">
  55.       <v-menu
  56.         v-model="menu2"
  57.         :close-on-content-click="false"
  58.         :nudge-right="40"
  59.         transition="scale-transition"
  60.         offset-y
  61.         min-width="290px"
  62.       >
  63.         <template v-slot:activator="{ on }">
  64.           <v-text-field
  65.             v-model="date"
  66.             label="Picker without buttons"
  67.             prepend-icon="event"
  68.             readonly
  69.             v-on="on"
  70.           ></v-text-field>
  71.         </template>
  72.         <v-date-picker v-model="date" @input="menu2 = false"></v-date-picker>
  73.       </v-menu>
  74.     </v-col>
  75.     <v-spacer></v-spacer>
  76.   </v-row>
  77. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       date: new Date().toISOString().substr(0, 10),
  5.       menu: false,
  6.       modal: false,
  7.       menu2: false,
  8.     }),
  9.   }
  10. </script>

Date pickers（日期选择器） - 图21

日期选择器 - 格式化日期

如果您需要以自定义格式显示日期（不同于YYYY-MM-DD），您需要使用格式化函数。

template script

  1. <template>
  2.   <v-container>
  3.     <v-row>
  4.       <v-col cols="12" lg="6">
  5.         <v-menu
  6.           ref="menu1"
  7.           v-model="menu1"
  8.           :close-on-content-click="false"
  9.           transition="scale-transition"
  10.           offset-y
  11.           max-width="290px"
  12.           min-width="290px"
  13.         >
  14.           <template v-slot:activator="{ on }">
  15.             <v-text-field
  16.               v-model="dateFormatted"
  17.               label="Date"
  18.               hint="MM/DD/YYYY format"
  19.               persistent-hint
  20.               prepend-icon="event"
  21.               @blur="date = parseDate(dateFormatted)"
  22.               v-on="on"
  23.             ></v-text-field>
  24.           </template>
  25.           <v-date-picker v-model="date" no-title @input="menu1 = false"></v-date-picker>
  26.         </v-menu>
  27.         <p>Date in ISO format: <strong>{{ date }}</strong></p>
  28.       </v-col>
  30.       <v-col cols="12" lg="6">
  31.         <v-menu
  32.           v-model="menu2"
  33.           :close-on-content-click="false"
  34.           transition="scale-transition"
  35.           offset-y
  36.           max-width="290px"
  37.           min-width="290px"
  38.         >
  39.           <template v-slot:activator="{ on }">
  40.             <v-text-field
  41.               v-model="computedDateFormatted"
  42.               label="Date (read only text field)"
  43.               hint="MM/DD/YYYY format"
  44.               persistent-hint
  45.               prepend-icon="event"
  46.               readonly
  47.               v-on="on"
  48.             ></v-text-field>
  49.           </template>
  50.           <v-date-picker v-model="date" no-title @input="menu2 = false"></v-date-picker>
  51.         </v-menu>
  52.         <p>Date in ISO format: <strong>{{ date }}</strong></p>
  53.       </v-col>
  54.     </v-row>
  55.   </v-container>
  56. </template>
  1. <script>
  2.   export default {
  3.     data: vm => ({
  4.       date: new Date().toISOString().substr(0, 10),
  5.       dateFormatted: vm.formatDate(new Date().toISOString().substr(0, 10)),
  6.       menu1: false,
  7.       menu2: false,
  8.     }),
  10.     computed: {
  11.       computedDateFormatted () {
  12.         return this.formatDate(this.date)
  13.       },
  14.     },
  16.     watch: {
  17.       date (val) {
  18.         this.dateFormatted = this.formatDate(this.date)
  19.       },
  20.     },
  22.     methods: {
  23.       formatDate (date) {
  24.         if (!date) return null
  26.         const [year, month, day] = date.split('-')
  27.         return `${month}/${day}/${year}`
  28.       },
  29.       parseDate (date) {
  30.         if (!date) return null
  32.         const [month, day, year] = date.split('/')
  33.         return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
  34.       },
  35.     },
  36.   }
  37. </script>

Date pickers（日期选择器） - 图22

日期选择器 - 使用外部库格式化日期

也可以使用外部库（例如 Moment.js 或 date-fns）格式化日期

template script

  1. <template>
  2.   <v-container>
  3.     <v-row>
  4.       <v-col cols="12" lg="6">
  5.         <v-menu
  6.           v-model="menu1"
  7.           :close-on-content-click="false"
  8.           max-width="290"
  9.         >
  10.           <template v-slot:activator="{ on }">
  11.             <v-text-field
  12.               :value="computedDateFormattedMomentjs"
  13.               clearable
  14.               label="Formatted with Moment.js"
  15.               readonly
  16.               v-on="on"
  17.               @click:clear="date = null"
  18.             ></v-text-field>
  19.           </template>
  20.           <v-date-picker
  21.             v-model="date"
  22.             @change="menu1 = false"
  23.           ></v-date-picker>
  24.         </v-menu>
  25.       </v-col>
  27.       <v-col cols="12" lg="6">
  28.         <v-menu
  29.           v-model="menu2"
  30.           :close-on-content-click="false"
  31.           max-width="290"
  32.         >
  33.           <template v-slot:activator="{ on }">
  34.             <v-text-field
  35.               :value="computedDateFormattedDatefns"
  36.               clearable
  37.               label="Formatted with datefns"
  38.               readonly
  39.               v-on="on"
  40.               @click:clear="date = null"
  41.             ></v-text-field>
  42.           </template>
  43.           <v-date-picker
  44.             v-model="date"
  45.             @change="menu2 = false"
  46.           ></v-date-picker>
  47.         </v-menu>
  48.       </v-col>
  49.     </v-row>
  50.   </v-container>
  51. </template>
  1. <script>
  2.   import moment from 'moment'
  3.   import { format, parseISO } from 'date-fns'
  5.   export default {
  6.     data: () => ({
  7.       // https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments
  8.       date: parseISO(new Date().toISOString().substr(0, 10)),
  9.       menu1: false,
  10.       menu2: false,
  11.     }),
  13.     computed: {
  14.       computedDateFormattedMomentjs () {
  15.         return this.date ? moment(this.date).format('dddd, MMMM Do YYYY') : ''
  16.       },
  17.       computedDateFormattedDatefns () {
  18.         return this.date ? format(this.date, 'EEEE, MMMM do yyyy') : ''
  19.       },
  20.     },
  21.   }
  22. </script>

Date pickers（日期选择器） - 图23

日期选择器 - 多个选项

日期选择器使用 multiple 属性可以选择多个日期。如果使用 multiple，那么日期选择器期望它的模型是一个数组。

template script

  1. <template>
  2.   <v-row>
  3.     <v-col cols="12" sm="6">
  4.       <v-date-picker
  5.         v-model="dates"
  6.         multiple
  7.       ></v-date-picker>
  8.     </v-col>
  9.     <v-col cols="12" sm="6">
  10.       <v-menu
  11.         ref="menu"
  12.         v-model="menu"
  13.         :close-on-content-click="false"
  14.         :return-value.sync="dates"
  15.         transition="scale-transition"
  16.         offset-y
  17.         min-width="290px"
  18.       >
  19.         <template v-slot:activator="{ on }">
  20.           <v-combobox
  21.             v-model="dates"
  22.             multiple
  23.             chips
  24.             small-chips
  25.             label="Multiple picker in menu"
  26.             prepend-icon="event"
  27.             readonly
  28.             v-on="on"
  29.           ></v-combobox>
  30.         </template>
  31.         <v-date-picker v-model="dates" multiple no-title scrollable>
  32.           <v-spacer></v-spacer>
  33.           <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
  34.           <v-btn text color="primary" @click="$refs.menu.save(dates)">OK</v-btn>
  35.         </v-date-picker>
  36.       </v-menu>
  37.     </v-col>
  38.   </v-row>
  39. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       dates: ['2018-09-15', '2018-09-20'],
  5.       menu: false,
  6.     }),
  7.   }
  8. </script>

Date pickers（日期选择器） - 图24

日期选择器 - 范围

日期选择器可以使用 range 属性选择日期范围。 当使用 range 属性时，日期选择器它的模型为长度为 2 的数组或为空。

template script

  1. <template>
  2.   <v-row>
  3.     <v-col cols="12" sm="6">
  4.       <v-date-picker v-model="dates" range></v-date-picker>
  5.     </v-col>
  6.     <v-col cols="12" sm="6">
  7.       <v-text-field v-model="dateRangeText" label="Date range" prepend-icon="event" readonly></v-text-field>
  8.       model: {{ dates }}
  9.     </v-col>
  10.   </v-row>
  11. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       dates: ['2019-09-10', '2019-09-20'],
  5.     }),
  6.     computed: {
  7.       dateRangeText () {
  8.         return this.dates.join(' ~ ')
  9.       },
  10.     },
  11.   }
  12. </script>

Date pickers（日期选择器） - 图25

日期选择器 - 生日选择器

默认情况下，从年份选择器开始，限制日期范围并在选择日期后关闭选择器菜单，使之成为理想的生日选择器。

template script

  1. <template>
  2.   <v-menu
  3.     ref="menu"
  4.     v-model="menu"
  5.     :close-on-content-click="false"
  6.     transition="scale-transition"
  7.     offset-y
  8.     min-width="290px"
  9.   >
  10.     <template v-slot:activator="{ on }">
  11.       <v-text-field
  12.         v-model="date"
  13.         label="Birthday date"
  14.         prepend-icon="event"
  15.         readonly
  16.         v-on="on"
  17.       ></v-text-field>
  18.     </template>
  19.     <v-date-picker
  20.       ref="picker"
  21.       v-model="date"
  22.       :max="new Date().toISOString().substr(0, 10)"
  23.       min="1950-01-01"
  24.       @change="save"
  25.     ></v-date-picker>
  26.   </v-menu>
  27. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       date: null,
  5.       menu: false,
  6.     }),
  7.     watch: {
  8.       menu (val) {
  9.         val && setTimeout(() => (this.$refs.picker.activePicker = 'YEAR'))
  10.       },
  11.     },
  12.     methods: {
  13.       save (date) {
  14.         this.$refs.menu.save(date)
  15.       },
  16.     },
  17.   }
  18. </script>

Date pickers（日期选择器） - 图26

日期选择器 - 事件

您可以使用数组，对象或函数指定事件。 要更改事件的默认颜色，请使用 event-color 属性。 如果您想显示多个事件指示器，则您的事件函数或对象可以返回颜色（material 或 css）数组。

template script

  1. <template>
  2.   <v-row justify="space-between">
  3.     <div>
  4.       <div class="subheading">Defined by array</div>
  5.       <v-date-picker
  6.         v-model="date1"
  7.         :events="arrayEvents"
  8.         event-color="green lighten-1"
  9.       ></v-date-picker>
  10.     </div>
  11.     <div>
  12.       <div class="subheading">Defined by function</div>
  13.       <v-date-picker
  14.         v-model="date2"
  15.         :event-color="date => date[9] % 2 ? 'red' : 'yellow'"
  16.         :events="functionEvents"
  17.       ></v-date-picker>
  18.     </div>
  19.   </v-row>
  20. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       arrayEvents: null,
  5.       date1: new Date().toISOString().substr(0, 10),
  6.       date2: new Date().toISOString().substr(0, 10),
  7.     }),
  9.     mounted () {
  10.       this.arrayEvents = [...Array(6)].map(() => {
  11.         const day = Math.floor(Math.random() * 30)
  12.         const d = new Date()
  13.         d.setDate(day)
  14.         return d.toISOString().substr(0, 10)
  15.       })
  16.     },
  18.     methods: {
  19.       functionEvents (date) {
  20.         const [,, day] = date.split('-')
  21.         if ([12, 17, 28].includes(parseInt(day, 10))) return true
  22.         if ([1, 19, 22].includes(parseInt(day, 10))) return ['red', '#00f']
  23.         return false
  24.       },
  25.     },
  26.   }
  27. </script>

Date pickers（日期选择器） - 图27

月份选择器 - 在对话框和菜单

将选择器集成到 v-text-field 中时，建议使用 readonly 属性。 这样可以防止移动键盘触发。 为了节省垂直空间，您还可以隐藏选择器标题。

选择器提供了一个插槽，您可以使用它来保存和取消功能。 这将保留一个旧值，如果用户取消，则可以替换该旧值。

template script

  1. <template>
  2.   <v-row>
  3.     <v-col cols="11" sm="5">
  4.       <v-menu
  5.         ref="menu"
  6.         v-model="menu"
  7.         :close-on-content-click="false"
  8.         :return-value.sync="date"
  9.         transition="scale-transition"
  10.         offset-y
  11.         max-width="290px"
  12.         min-width="290px"
  13.       >
  14.         <template v-slot:activator="{ on }">
  15.           <v-text-field
  16.             v-model="date"
  17.             label="Picker in menu"
  18.             prepend-icon="event"
  19.             readonly
  20.             v-on="on"
  21.           ></v-text-field>
  22.         </template>
  23.         <v-date-picker
  24.           v-model="date"
  25.           type="month"
  26.           no-title
  27.           scrollable
  28.         >
  29.           <v-spacer></v-spacer>
  30.           <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
  31.           <v-btn text color="primary" @click="$refs.menu.save(date)">OK</v-btn>
  32.         </v-date-picker>
  33.       </v-menu>
  34.     </v-col>
  35.     <v-spacer></v-spacer>
  36.     <v-col cols="11" sm="5">
  37.       <v-dialog
  38.         ref="dialog"
  39.         v-model="modal"
  40.         :return-value.sync="date"
  41.         persistent
  42.         width="290px"
  43.       >
  44.         <template v-slot:activator="{ on }">
  45.           <v-text-field
  46.             v-model="date"
  47.             label="Picker in dialog"
  48.             prepend-icon="event"
  49.             readonly
  50.             v-on="on"
  51.           ></v-text-field>
  52.         </template>
  53.         <v-date-picker v-model="date" type="month" scrollable>
  54.           <v-spacer></v-spacer>
  55.           <v-btn text color="primary" @click="modal = false">Cancel</v-btn>
  56.           <v-btn text color="primary" @click="$refs.dialog.save(date)">OK</v-btn>
  57.         </v-date-picker>
  58.       </v-dialog>
  59.     </v-col>
  60.   </v-row>
  61. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       date: new Date().toISOString().substr(0, 7),
  5.       menu: false,
  6.       modal: false,
  7.     }),
  8.   }
  9. </script>

Date pickers（日期选择器） - 图28