Skip to content

DatePicker 日期选择器

用于选择或输入日期

基础用法

以日期为基本单位,基础的日期选择控件

[
  {
    type: "date",
    name: "date",
    text: "日期选择器"
  }
]
显示配置

禁用状态

通过 disabled 属性禁用日期选择器

[
  {
    type: "date",
    name: "date",
    text: "日期选择器",
    disabled: () => true
  }
]
显示配置

占位符

通过 placeholder 属性设置输入框占位文本

[
  {
    type: "date",
    name: "date",
    text: "日期选择器",
    placeholder: "请选择日期"
  }
]
显示配置

日期格式

使用format指定输入框的格式;使用valueFormat指定绑定值的格式。

默认情况下,组件的 format 默认值为 YYYY/MM/DDvalueFormat 默认值为 YYYY/MM/DD。以下为可用的格式化字串,以 UTC 2017年1月2日 03:04:05 为例:

WARNING

请注意大小写

格式含义备注举例
YYYY2017
M不补01
MM01
D不补02
DD02
H小时24小时制;不补03
HH小时24小时制03
h小时12小时制,须和 Aa 使用;不补03
hh小时12小时制,须和 Aa 使用03
m分钟不补04
mm分钟04
s不补05
ss05
xJS时间戳组件绑定值为number类型1483326245000
[MM]不需要格式化字符使用方括号标识不需要格式化的字符 (如 [A] [MM])MM

设置 valueFormattimestamp,绑定值将返回时间戳格式

[
  {
    type: "date",
    name: "date",
    text: "日期选择器",
    format: "YYYY-MM-DD",
    valueFormat: "x"
  }
]
显示配置

Attributes

参数说明类型可选值默认值
name绑定值的字段名string
text表单标签string
placeholder输入框占位文本string
disabled是否禁用boolean / FilterFunctionfalse
format显示在输入框中的格式string日期格式YYYY/MM/DD
valueFormat绑定值的格式。不指定则绑定值为 Date 对象string日期格式YYYY/MM/DD
onChange值变化时触发的函数OnChangeHandler

TypeScript 定义

typescript
interface DateConfig extends FormItem, Input {
  type: 'date';
  format?: 'YYYY-MM-dd HH:mm:ss' | string;
  valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
}

Powered by 腾讯视频会员平台技术中心