时间选择器

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

用例

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

template script

<template>
  <v-row justify="center">
    <v-time-picker v-model="picker"></v-time-picker>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        picker: null,
      }
    },
  }
</script>

API

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

实战场

template script

<template>
  <v-row align="center">
    <v-row justify="space-around">
      <v-switch v-model="disabled" class="mx-2" label="Disabled"></v-switch>
      <v-switch v-model="readonly" class="mx-2" label="Readonly"></v-switch>
      <v-switch v-model="landscape" class="mx-2" label="Landscape"></v-switch>
      <v-switch v-model="ampmInTitle" class="mx-2" label="AM/PM in title"></v-switch>
      <v-switch v-model="useSeconds" class="mx-2" label="Use seconds"></v-switch>
      <v-switch v-model="fullWidth" class="mx-2" label="Full-width"></v-switch>
      <v-switch v-model="noTitle" class="mx-2" label="No title"></v-switch>
      <v-switch v-model="scrollable" class="mx-2" label="Scrollable"></v-switch>
      <v-btn-toggle v-model="format">
        <v-btn text value="ampm">
          12h
        </v-btn>
        <v-btn text value="24hr">
          24h
        </v-btn>
      </v-btn-toggle>
    </v-row>
    <v-time-picker
      v-model="picker"
      class="mt-2"
      :disabled="disabled"
      :readonly="readonly"
      :landscape="landscape"
      :ampm-in-title="ampmInTitle"
      :use-seconds="useSeconds"
      :format="format"
      :full-width="fullWidth"
      :no-title="noTitle"
      :scrollable="scrollable"
    ></v-time-picker>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        picker: null,
        disabled: false,
        readonly: false,
        landscape: false,
        ampmInTitle: false,
        useSeconds: false,
        format: 'ampm',
        fullWidth: false,
        noTitle: false,
        scrollable: false,
      }
    },
  }
</script>

示例

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

色彩

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

template script

<template>
  <v-row justify="space-around">
    <v-time-picker v-model="e4" color="green lighten-1"></v-time-picker>
    <v-time-picker v-model="e4" color="green lighten-1" header-color="primary"></v-time-picker>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        e4: null,
      }
    },
  }
</script>

禁用

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

template script

<template>
  <v-row
    justify="space-around"
    align="center"
  >
    <v-time-picker
      v-model="picker"
      disabled
    ></v-time-picker>
    <v-time-picker
      v-model="picker"
      :landscape="$vuetify.breakpoint.smAndUp"
      disabled
    ></v-time-picker>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        picker: null,
      }
    },
  }
</script>

只读

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

template script

<template>
  <v-row
    justify="space-around"
    align="center"
  >
    <v-time-picker
      v-model="picker"
      readonly
    ></v-time-picker>
    <v-time-picker
      v-model="picker"
      :landscape="$vuetify.breakpoint.smAndUp"
      readonly
    ></v-time-picker>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        picker: null,
      }
    },
  }
</script>

24小时格式

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

template script

<template>
  <v-row justify="space-around">
    <v-col class="lg-offset8" md="12" lg="4">
      <v-time-picker v-model="e7" format="24hr"></v-time-picker>
    </v-col>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        e7: null,
      }
    },
  }
</script>

允许的时间

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

template script

<template>
  <v-row justify="space-around">
    <v-time-picker
      v-model="time"
      :allowed-hours="allowedHours"
      :allowed-minutes="allowedMinutes"
      class="mt-4"
      format="24hr"
      scrollable
      min="9:30"
      max="22:15"
    ></v-time-picker>
    <v-time-picker
      v-model="timeStep"
      :allowed-minutes="allowedStep"
      class="mt-4"
      format="24hr"
    ></v-time-picker>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        time: '11:15',
        timeStep: '10:10',
      }
    },
    methods: {
      allowedHours: v => v % 2,
      allowedMinutes: v => v >= 10 && v <= 50,
      allowedStep: m => m % 10 === 0,
    },
  }
</script>

设置选择器的宽度

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

template script

<template>
  <v-row align="center">
    <v-time-picker
      v-model="time"
      type="month"
      width="290"
      class="ml-4"
    ></v-time-picker>
    <v-col class="pa-0 mx-4 mt-4 mt-sm-0">
      <v-time-picker
        v-model="time"
        :landscape="$vuetify.breakpoint.mdAndUp"
        full-width
        type="month"
      ></v-time-picker>
    </v-col>
  </v-row>
</template>

<script>
  export default {
    data: () => ({
      time: '11:15',
    }),
  }
</script>

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

<template>
  <v-row
    justify="space-around"
    align="center"
  >
    <v-time-picker
      v-model="picker"
      ampm-in-title
    ></v-time-picker>
    <v-time-picker
      v-model="picker"
      :landscape="$vuetify.breakpoint.smAndUp"
      ampm-in-title
    ></v-time-picker>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        picker: null,
      }
    },
  }
</script>

无标题

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

template script

<template>
  <v-row
    justify="space-around"
  >
    <v-time-picker
      v-model="picker"
      no-title
    ></v-time-picker>
    <v-time-picker
      v-model="picker"
      :landscape="$vuetify.breakpoint.smAndUp"
      no-title
    ></v-time-picker>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        picker: null,
      }
    },
  }
</script>

秒数

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

template script

<template>
  <v-row
    justify="space-around"
    align="center"
  >
    <v-time-picker
      v-model="picker"
      use-seconds
    ></v-time-picker>
    <v-time-picker
      v-model="picker"
      :landscape="$vuetify.breakpoint.smAndUp"
      use-seconds
    ></v-time-picker>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        picker: null,
      }
    },
  }
</script>

可滚动

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

template script

<template>
  <v-row justify="space-around" align="center">
    <v-time-picker v-model="picker" scrollable></v-time-picker>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        picker: null,
      }
    },
  }
</script>

在对话框和菜单

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

template script

<template>
  <v-row>
    <v-col cols="11" sm="5">
      <v-menu
        ref="menu"
        v-model="menu2"
        :close-on-content-click="false"
        :nudge-right="40"
        :return-value.sync="time"
        transition="scale-transition"
        offset-y
        max-width="290px"
        min-width="290px"
      >
        <template v-slot:activator="{ on }">
          <v-text-field
            v-model="time"
            label="Picker in menu"
            prepend-icon="access_time"
            readonly
            v-on="on"
          ></v-text-field>
        </template>
        <v-time-picker
          v-if="menu2"
          v-model="time"
          full-width
          @click:minute="$refs.menu.save(time)"
        ></v-time-picker>
      </v-menu>
    </v-col>
    <v-spacer></v-spacer>
    <v-col cols="11" sm="5">
      <v-dialog
        ref="dialog"
        v-model="modal2"
        :return-value.sync="time"
        persistent
        width="290px"
      >
        <template v-slot:activator="{ on }">
          <v-text-field
            v-model="time"
            label="Picker in dialog"
            prepend-icon="access_time"
            readonly
            v-on="on"
          ></v-text-field>
        </template>
        <v-time-picker
          v-if="modal2"
          v-model="time"
          full-width
        >
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="modal2 = false">Cancel</v-btn>
          <v-btn text color="primary" @click="$refs.dialog.save(time)">OK</v-btn>
        </v-time-picker>
      </v-dialog>
    </v-col>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        time: null,
        menu2: false,
        modal2: false,
      }
    },
  }
</script>

范围

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

template script

<template>
  <div>
    <h1>Plan your event:</h1>
    <v-row justify="space-around" align="center">
      <v-col style="width: 290px; flex: 0 1 auto;">
        <h2>Start:</h2>
        <v-time-picker v-model="start" :max="end"></v-time-picker>
      </v-col>
      <v-col style="width: 290px; flex: 0 1 auto;">
        <h2>End:</h2>
        <v-time-picker v-model="end" :min="start"></v-time-picker>
      </v-col>
    </v-row>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        start: null,
        end: null,
      }
    },
  }
</script>