日期时间输入

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

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

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

安装

编辑/quasar.conf.js：

framework: {
  components: ['QDatetime']
}

基本用法

<!-- 只是日期 -->
<q-datetime v-model="model" type="date" />

<!-- 只是时间 -->
<q-datetime v-model="model" type="time" />

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

国际化

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

Vue属性

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

Vue属性 类型 说明
type 字符串 “date”、“time”或“datetime”之一。默认是date。
clearable 布尔 如果设置为“true”，则该组件向用户提供可操作的图标以移除当前选择。
minimal Boolean (v0.15.9+) 不显示头部.
readonly 布尔 如果设置为“true”，组件将显示为只读。
min 字符串 可选的最小值。与日期时间模型具有相同的格式。
max 字符串 可选的最大值。与日期时间模型具有相同的格式。
default-view 字符串 ‘year’、 ‘month’、 ‘day’、 ‘hour’、 ‘minute’之一。
default-value 字符串/数字/日期 当模型尚未设置时，选择器的默认日期/时间。
display-value 字符串 要在输入框上显示的文本。取代’占位符’。
first-day-of-week 数字 0-6,0-周日，1-周一，….
hide-underline 布尔 隐藏底部边框。
popover 布尔 无论平台如何，始终使用弹出框进行显示。
modal 布尔 无论平台如何，始终以模态框显示。
format 字符串 显示格式章节下的处理JS日期页面所述的格式。
format-model 字符串 模型的数据类型（特别是当用undefined或null开始时很有用）。 ‘auto’、’date’、’number’、 ‘string’之一。
format24h 布尔 覆盖默认的i18n设置。使用Materia选择器的24小时时间而不是默认的AM/PM系统。
placeholder 字符串 未设置模型（空）时使用输入框的占位符文本。
ok-label 字符串 接受输入的按钮文本（当使用模态框时）。
cancel-label 字符串 取消输入(不改变)的按钮文本（当使用模态框时）。

通用输入框属性：

属性 类型 说明
prefix 字符串 应在文本字段之前显示的文本。
suffix 字符串 应在文本字段后显示的文本。
float-label 字符串 一旦输入字段获得焦点，文本标签将“浮动”到输入字段上方。
stack-label 字符串 将显示在输入字段上方并且是静态的文本标签。
color 字符串 一个来自Quasar调色板的颜色。
inverted 布尔 反转模式。颜色应用于背景。
inverted-light 布尔 浅色的反转模式。颜色应用于背景。
dark 布尔 QInput是否在黑暗的背景下呈现？
align 字符串 ‘left’、 ‘center’ 或 ‘right’中的一个，用于确定文本字段内的文本对齐。
disable 布尔 如果设置为true，则文本字段被禁用，用户无法输入任何内容。
hide-underline 布尔 隐藏底部边框。
error 布尔 如果设置为true，则会更改输入字段颜色以显示出现错误。
warning 布尔 与error相同，更改输入字段颜色以显示警告。
before 对象数组 在文本字段左侧的图标按钮。阅读下面的更多细节。
after 对象数组 在文本字段右侧的图标按钮。阅读下面的更多细节。

懒惰输入

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

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

图标按钮

本部分引用before和after属性，它们可以将额外按钮作为图标添加到文本字段中。这是两个属性的结构：

{
  // 必需的图标
  icon: String,
  // 当点击/轻按图标时
  // 调用的必需函数
  handler: Function,

  // 可选的。 如果模型有一个值
  // 则显示图标按钮
  content: Boolean,

  // 可选的。 如果文本字段标有错误
  // 则显示图标按钮
  error: Boolean
}

例子:

<!--
  当QInput发生错误时（通过“error”属性）
  显示一个图标按钮（icon设为“warning“）
-->
<q-datetime
  v-model="date"
  :error="error"
  :after="[
    {
      icon: 'warning',
      error: true,
      handler () {
        // do something...
      }
    }
  ]"
/>

<!--
  当模型具有非空值时
  显示一个图标按钮（icon设为“arrow_forward“）
-->
<q-datetime
  v-model="date"
  :after="[
    {
      icon: 'arrow_forward',
      content: true,
      handler () {
        // do something...
      }
    }
  ]"
/>

Vue方法

Vue方法 说明
show() 显示选择日期和/或时间的弹出窗口（在桌面上）和对话框（在手机上）。 返回一个Promise。
hide() 隐藏选择日期和/或时间的弹出窗口（在桌面上）和对话框（在手机上）并在隐藏后执行功能。 返回一个Promise。
toggle() 切换弹出框或模态框。
clear() 将模型设置为空字符串（删除当前值）。

Vue事件

Vue事件 说明
@input（newVal） 模型值更改立即触发。
@change（newVal） 模型值延迟更改时触发。
@clear(clearVal) 清除模型时触发。
@blur 当模态/弹出框关闭触发。
@focus 当模态/弹出框打开时触发。

模型

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 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 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 v-model="model" type="time" />
    </q-item-main>
  </q-item>
  <q-item>
    <q-item-side icon="update" />
    <q-item-main>
      <q-datetime 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 v-model="model" type="datetime" />
    </q-item-main>
  </q-item>
</q-list>
选项组 日期时间选择器