时间选择器

v-time-picker 是独立的组件，可用于许多现有的 Vuetify 组件。它为用户提供了选择时间的可视化表示。

用例

时间选择器默认情况下启用了浅色主题。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-time-picker v-model="picker"></v-time-picker>
  4.   </v-row>
  5. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: null,
  6.       }
  7.     },
  8.   }
  9. </script>

Time pickers（时间选择器） - 图1

API

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

Time pickers（时间选择器） - 图2

实战场

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-row justify="space-around">
  4.       <v-switch v-model="disabled" class="mx-2" label="Disabled"></v-switch>
  5.       <v-switch v-model="readonly" class="mx-2" label="Readonly"></v-switch>
  6.       <v-switch v-model="landscape" class="mx-2" label="Landscape"></v-switch>
  7.       <v-switch v-model="ampmInTitle" class="mx-2" label="AM/PM in title"></v-switch>
  8.       <v-switch v-model="useSeconds" class="mx-2" label="Use seconds"></v-switch>
  9.       <v-switch v-model="fullWidth" class="mx-2" label="Full-width"></v-switch>
  10.       <v-switch v-model="noTitle" class="mx-2" label="No title"></v-switch>
  11.       <v-switch v-model="scrollable" class="mx-2" label="Scrollable"></v-switch>
  12.       <v-btn-toggle v-model="format">
  13.         <v-btn text value="ampm">
  14.           12h
  15.         </v-btn>
  16.         <v-btn text value="24hr">
  17.           24h
  18.         </v-btn>
  19.       </v-btn-toggle>
  20.     </v-row>
  21.     <v-time-picker
  22.       v-model="picker"
  23.       class="mt-2"
  24.       :disabled="disabled"
  25.       :readonly="readonly"
  26.       :landscape="landscape"
  27.       :ampm-in-title="ampmInTitle"
  28.       :use-seconds="useSeconds"
  29.       :format="format"
  30.       :full-width="fullWidth"
  31.       :no-title="noTitle"
  32.       :scrollable="scrollable"
  33.     ></v-time-picker>
  34.   </v-row>
  35. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: null,
  6.         disabled: false,
  7.         readonly: false,
  8.         landscape: false,
  9.         ampmInTitle: false,
  10.         useSeconds: false,
  11.         format: 'ampm',
  12.         fullWidth: false,
  13.         noTitle: false,
  14.         scrollable: false,
  15.       }
  16.     },
  17.   }
  18. </script>

Time pickers（时间选择器） - 图3

示例

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

色彩

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

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-time-picker v-model="e4" color="green lighten-1"></v-time-picker>
  4.     <v-time-picker v-model="e4" color="green lighten-1" header-color="primary"></v-time-picker>
  5.   </v-row>
  6. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         e4: null,
  6.       }
  7.     },
  8.   }
  9. </script>

Time pickers（时间选择器） - 图4

禁用

您无法与禁用的选择器互动。

template script

  1. <template>
  2.   <v-row
  4.     justify="space-around"
  5.     align="center"
  6.   >
  7.     <v-time-picker
  8.       v-model="picker"
  9.       disabled
  10.     ></v-time-picker>
  11.     <v-time-picker
  12.       v-model="picker"
  13.       :landscape="$vuetify.breakpoint.smAndUp"
  14.       disabled
  15.     ></v-time-picker>
  16.   </v-row>
  17. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: null,
  6.       }
  7.     },
  8.   }
  9. </script>

Time pickers（时间选择器） - 图5

只读

只读选择器的行为与禁用的一样，但看起来像默认的。

template script

  1. <template>
  2.   <v-row
  4.     justify="space-around"
  5.     align="center"
  6.   >
  7.     <v-time-picker
  8.       v-model="picker"
  9.       readonly
  10.     ></v-time-picker>
  11.     <v-time-picker
  12.       v-model="picker"
  13.       :landscape="$vuetify.breakpoint.smAndUp"
  14.       readonly
  15.     ></v-time-picker>
  16.   </v-row>
  17. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: null,
  6.       }
  7.     },
  8.   }
  9. </script>

Time pickers（时间选择器） - 图6

24小时格式

时间选择器可以切换到 24 小时格式。注意 format 属性只定义了选择器显示的方式，选择器的值（模型）总是 24 小时格式。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-col class="lg-offset8" md="12" lg="4">
  4.       <v-time-picker v-model="e7" format="24hr"></v-time-picker>
  5.     </v-col>
  6.   </v-row>
  7. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         e7: null,
  6.       }
  7.     },
  8.   }
  9. </script>

Time pickers（时间选择器） - 图7

允许的时间

您可以使用数组，对象和函数指定允许的时间。 您还可以指定时间 步长/精度/间隔 - 例如 10 分钟。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-time-picker
  4.       v-model="time"
  5.       :allowed-hours="allowedHours"
  6.       :allowed-minutes="allowedMinutes"
  7.       class="mt-4"
  8.       format="24hr"
  9.       scrollable
  10.       min="9:30"
  11.       max="22:15"
  12.     ></v-time-picker>
  13.     <v-time-picker
  14.       v-model="timeStep"
  15.       :allowed-minutes="allowedStep"
  16.       class="mt-4"
  17.       format="24hr"
  18.     ></v-time-picker>
  19.   </v-row>
  20. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         time: '11:15',
  6.         timeStep: '10:10',
  7.       }
  8.     },
  9.     methods: {
  10.       allowedHours: v => v % 2,
  11.       allowedMinutes: v => v >= 10 && v <= 50,
  12.       allowedStep: m => m % 10 === 0,
  13.     },
  14.   }
  15. </script>

Time pickers（时间选择器） - 图8

设置选择器的宽度

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

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-time-picker
  4.       v-model="time"
  5.       type="month"
  6.       width="290"
  7.       class="ml-4"
  8.     ></v-time-picker>
  9.     <v-col class="pa-0 mx-4 mt-4 mt-sm-0">
  10.       <v-time-picker
  11.         v-model="time"
  12.         :landscape="$vuetify.breakpoint.mdAndUp"
  13.         full-width
  14.         type="month"
  15.       ></v-time-picker>
  16.     </v-col>
  17.   </v-row>
  18. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       time: '11:15',
  5.     }),
  6.   }
  7. </script>

Time pickers（时间选择器） - 图9

Light Vuetify Stickers

Stick them to your car, laptop or favorite mug. They are made from a durable vinyl with a laminate that is weather-proof against rain, sun, wind and snow, and even dishwasher safe.

ads by Vuetify

](https://store.vuetifyjs.com/product/vuetify-light-sticker?ref=vuetifyjs.com)

标题中的 AM/PM 开关

您可以移动 AM/PM 切换到选择器的标题。

template script

  1. <template>
  2.   <v-row
  4.     justify="space-around"
  5.     align="center"
  6.   >
  7.     <v-time-picker
  8.       v-model="picker"
  9.       ampm-in-title
  10.     ></v-time-picker>
  11.     <v-time-picker
  12.       v-model="picker"
  13.       :landscape="$vuetify.breakpoint.smAndUp"
  14.       ampm-in-title
  15.     ></v-time-picker>
  16.   </v-row>
  17. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: null,
  6.       }
  7.     },
  8.   }
  9. </script>

Time pickers（时间选择器） - 图10

无标题

您可以删除选择器的标题。

template script

  1. <template>
  2.   <v-row
  4.     justify="space-around"
  5.   >
  6.     <v-time-picker
  7.       v-model="picker"
  8.       no-title
  9.     ></v-time-picker>
  10.     <v-time-picker
  11.       v-model="picker"
  12.       :landscape="$vuetify.breakpoint.smAndUp"
  13.       no-title
  14.     ></v-time-picker>
  15.   </v-row>
  16. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: null,
  6.       }
  7.     },
  8.   }
  9. </script>

Time pickers（时间选择器） - 图11

秒数

时间选择器可以输入秒数。

template script

  1. <template>
  2.   <v-row
  4.     justify="space-around"
  5.     align="center"
  6.   >
  7.     <v-time-picker
  8.       v-model="picker"
  9.       use-seconds
  10.     ></v-time-picker>
  11.     <v-time-picker
  12.       v-model="picker"
  13.       :landscape="$vuetify.breakpoint.smAndUp"
  14.       use-seconds
  15.     ></v-time-picker>
  16.   </v-row>
  17. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: null,
  6.       }
  7.     },
  8.   }
  9. </script>

Time pickers（时间选择器） - 图12

可滚动

您可以使用鼠标滚轮编辑时间选择器的值。

template script

  1. <template>
  2.   <v-row justify="space-around" align="center">
  3.     <v-time-picker v-model="picker" scrollable></v-time-picker>
  4.   </v-row>
  5. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         picker: null,
  6.       }
  7.     },
  8.   }
  9. </script>

Time pickers（时间选择器） - 图13

在对话框和菜单

由于选择器的灵活性，您可以真正按照自己的意愿进行输入。

template script

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

Time pickers（时间选择器） - 图14

范围

这是使用 min 和 max 属性将选择器连接在一起的示例。

template script

  1. <template>
  2.   <div>
  3.     <h1>Plan your event:</h1>
  4.     <v-row justify="space-around" align="center">
  5.       <v-col style="width: 290px; flex: 0 1 auto;">
  6.         <h2>Start:</h2>
  7.         <v-time-picker v-model="start" :max="end"></v-time-picker>
  8.       </v-col>
  9.       <v-col style="width: 290px; flex: 0 1 auto;">
  10.         <h2>End:</h2>
  11.         <v-time-picker v-model="end" :min="start"></v-time-picker>
  12.       </v-col>
  13.     </v-row>
  14.   </div>
  15. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         start: null,
  6.         end: null,
  7.       }
  8.     },
  9.   }
  10. </script>

Time pickers（时间选择器） - 图15