DateTime

日期时间输入框。

<DateTime label="三月份某一刻" format="yyyy-MM-dd HH:mm" begin="2020-03-01 00:00" end="2020-03-31 59:59">{{datetime}}</DateTime>
属性名称说明是否支持变量默认值
标签内容既是日期时间输入框内容,也是用来提交的值。看到的格式和提交的格式与 format 属性定义的保持一致。
name(string)提交的数据为日期时间输入框当前的内容,格式由 format属性定义。
disabled禁用日期时间输入框,true 或 false。false
placeholder当日期时间输入框没有内容的时候,显示的占位符。如果设置了 label,不需要设置 placeholder。
label标签,显示在输入框左上角的位置。当输入框没有内容的时候,会和 placeholder 显示冲突,所以通常和 placeholder 二选一。
format日期时间格式。
prefixIcon显示一个前置图标
suffixIcon显示一个后置图标
picker弹出日期时间选择器。可选的内容包括 “date”(只有日期选择器)、“time”(只有时间选择器)、“date time”(日期和时间选择器都有)“date time”
begin限制最早可选日期,在这之前的日期不可选。格式需要与 format 属性定义的一致。特殊值 now,表示当前时间。1970-01-01
end限制最晚可选日期,在这之后的日期不可选。格式需要与 format 属性定义的一致。特殊值 now,表示当前时间。3000-01-01

format 属性

  • 支持的格式
    参考国际定义,大多数语言都支持的格式,下面是一些例子:
yyyy-MM-dd HH:mm:ss.S a => 2020-02-29 17:16:03.599 PM
如果你能一眼认出上面的格式,那想必你应该比较熟悉常用的规则了。

如果存在不想被解析的字符串,用单引号包含起来:
year in yyyy => 2020ePMr in 2020 // 其中 y 和 a 被替换了
'year in' yyyy => year in 2020   // 双引号里面的内容将原样输出

输出单引号则使用单引号转义:
'' => ' // 输出一个单引号
' =>    // 没有任何字符显示
  • 只要某部分值,不要的值不需要定义出来
HH // 只想要小时的值
MMM/dd // 最终得到类似 Dec/10 的格式,只有月份和日期
  • 所见即所提交
    用户看到的也是最终提交的时间格式。

  • 时间选择只支持到分钟级别

begin/end 和当前时间的顺序

如果给组件传入了一个值,又定义了 begin 或 end 或两者,则需要注意这几个值之间的时间先后顺序:
begin < value < end

  • 如果顺序不准确(时间先后顺序冲突,没有交集,即没有合适的日期可以给用户选择),则该组件将无法弹出日期选择器和时间选择器。
  • 另外,使用 begin/end 需要带上年份,比如 2020-03-10,如果仅写 03-10 默认年份是 1970,可能会出现日期冲突无法选择的情况。