日期时间输入

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 }"
/>

图标按钮

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

{
// 必需的图标
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>

更多示例

着色

使用 colorinverted/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>