日期时间选择器

DatetimePicker组件提供了一种输入日期和时间或两者的方法。 还有一个版本可用： 日期时间输入.

在demo中您会注意到iOS和Material日期时间选择器的外观和行为完全不同，就像它们的原生对象一样。

对于辅助函数、错误消息占位符等许多其他功能，可与QField 很好地协作。

安装

编辑/quasar.conf.js：

framework: {
  components: ['QDatetimePicker']
}

基本用法

<!-- 仅日期 -->
<q-datetime-picker v-model="model" type="date" />

<!-- 仅时间 -->
<q-datetime-picker v-model="model" type="time" />

<!-- 日期 & 时间 -->
<q-datetime-picker v-model="model" type="datetime" />

国际化

默认情况下，通过Quasar I18n关注日期和月份名称。如果您的语言包缺失，请为其提供PR。

Vue属性

支持v-model，它必须是一个字符串，数字或日期对象。

Vue属性 类型 说明
type 字符串 date, time or datetime之一。默认是date。
readonly 布尔 如果设置为“true”，组件将显示为只读。
disable 布尔 如果设置为“true”，则组件被禁用，用户不能更改模型。
minimal Boolean (v0.15.9+) 不显示头部.
min 字符串 可选的最小值。与日期时间模型具有相同的格式。
max 字符串 可选的最大值。与日期时间模型具有相同的格式。
default-view 字符串 ‘year’、 ‘month’、 ‘day’、 ‘hour’、 ‘minute’之一。
default-value 字符串/数字/日期 当模型尚未设置时，选择器的默认日期/时间。
display-value 字符串 要在输入框上显示的文本。取代’占位符’。
first-day-of-week 数字 0-6,0-周日，1-周一，….
format-model 字符串 模型的数据类型（特别是当用undefined或null开始时很有用）。 ‘auto’、 ‘date’、 ‘number’、 ‘string’之一。
color 字符串 一个来自Quasar调色板的颜色。
dark 布尔 组件在黑暗的背景下呈现？
format24h 布尔 覆盖默认的i18n设置。使用Materia选择器的24小时时间而不是默认的AM/PM系统。

懒惰输入

Vue很快会为组件上的v-model提供.lazy修饰符，但在此之前，您可以使用更长的等效形式：

<q-datetime-picker
  type="date"
  :value="model"
  @change="val => { model = val }"
/>

Vue方法

Vue方法 说明
setYear(val) 设置年。
setMonth(val) 设置月份。
setDay(val) 设置天。
setHour(val) 设置小时。
setMinute(val) 设置分钟。
setView(val) 设置视图。 ‘year’、 ‘month’、 ‘day’、 ‘hour’、 ‘minute’之一。请注意，根据type属性，有些可能不可用。
clear() 将模型设置为空字符串（删除当前值）。

Vue事件

Vue事件 说明
@input(newVal) 模型值更改时即时触发。
@change(newVal) 模型值延迟更改时触发。

模型

Quasar使用它自己的日期实用程序来处理组件模型中的日期值。

重要
该模型（绑定到v-model的变量）必须为空（未定义）或以有效ISO 8601日期时间值形式的字符串，如“2016-10-24T10：40：14.674Z”。它也可以是这个字符串的一个较短的派生词，如“2016-10-24”或“2016-10-24T10：40”。该值也可以是Unix时间戳（包括毫秒），例如1477298414674。最后但并非最不重要的，它也可以是Javascript Date对象的一个​​实例，比如new Date（）。

有关Quasar如何处理日期的更多信息，请参阅处理JS日期文档页面。

以下是设置模型值的几个示例：

<template>
  <q-datetime-picker v-model="model" type="datetime" />
</template>

<script>
// ....
export default {
  data () {
    return {
      model: undefined // 空值
      // OR
      model: new Date() //如“在这个时刻”
      // OR
      model: 1477298414674 // Unix时间戳，毫秒
      // OR
      model: '2016-10-24T10:40:14.674Z' // 完全符合ISO 8601标准
      // OR
      model: `2016-10-24` // 任何有效的ISO 8601日期时间值的衍生都可以工作，
                          // 如“2016-10-24T10：40：14”
      // OR
      model: `2016-10-24T10:40`, // 时间必须包含ISO 8601值
                                 // 一个Unix时间戳也可以工作
    }
  },
  // ...
}
</script>

着色

使用 color 和 inverted/inverted-light属性来控制颜色。

<q-datetime
  color="amber-7"
  float-label="Float Label"
  v-model="model"
  type="date"
/>

<q-datetime
  inverted
  color="primary"
  float-label="Float Label"
  v-model="model"
  type="date"
/>

另外，如果QDatetime显示在黑色背景上，请添加dark属性。

<q-datetime-picker dark color="secondary" />

列表中的用法

<q-list>
  <q-list-header>Date or Time</q-list-header>
  <q-item>
    <q-item-side icon="access_time" />
    <q-item-main>
      <q-datetime-picker v-model="model" type="time" />
    </q-item-main>
  </q-item>
  <q-item>
    <q-item-side icon="update" />
    <q-item-main>
      <q-datetime-picker v-model="model" type="date" />
    </q-item-main>
  </q-item>
  <q-item-separator />
  <q-list-header>Date & Time</q-list-header>
  <q-item>
    <q-item-side icon="notifications" />
    <q-item-main>
      <q-datetime-picker v-model="model" type="datetime" />
    </q-item-main>
  </q-item>
</q-list>
日期时间输入 选择框