Skip to content

日期时间输入框 datetimefield 组件

datetimefield组件是一种用户界面元素,用于允许用户选择特定的日期和时间。它通常用于需要精确到时、分、秒的时间选择场景。

功能描述

  1. 允许用户选择特定的日期和时间,精确到秒。
  2. 提供日历界面和时间选择器,用户可以通过点击选择器来选择日期和时间。
  3. 根据用户当前的日期时间填充默认值,方便用户选择或直接使用当前时间。
  4. 对用户输入的日期时间进行格式验证,确保输入的日期时间符合指定的格式要求。

示例显示

事件

调用组件的事件,同上button组件

事件名称说明参数和示例
focus获取焦点时触发datetimefield1_focus(){}
blur失去焦点触发datetimefield1_blur(){}
change更改时触发datetimefield1_change(){}
input输入时触发datetimefield1_input(){}

方法

方法名称说明参数和示例
------

属性

属性名称说明示例
reference设置组件的refsrefs:datetimefield1
modal设置开始值(必填项,否则运行时组件切换没反应)bind:{value:'{dataTime}'}
hidden隐藏或显示组件,默认为falsehidden:false
fieldLabel标签名fieldLabel:'NewDate'
required组件是否必填,默认为falserequired:false
weight权重的宽度,6中选择,1、2、3、4、5、6,默认为1weight:1
labelWidth标签宽度,默认为autolabelWidth:80
size设置组件的尺寸大小,三种选项large(大)、default(中)、small(小),默认为falsesize:default
validateOnRuleChange是否立刻校验,默认为falsevalidateOnRuleChange:false
showMessage是否显示错误,默认为falseshowMessage:false
inlineMessage是否显示内敛错误,默认为falseinlineMessage:false
startPlaceholder开始日期占位字符,默认为空startPlaceholder:''
endPlaceholder结束日期占位字符,空endPlaceholder:''
maxlength最大长度,默认为空maxlength:''
valueFormat日期格式,默认为YYYY-MM-DD HH:mm:ssvalueFormat:''
disabled是否禁用组件,默认为falsedisabled:false
readonly是否允许只读,默认为falsereadonly:false
marginTop距上的内边距,默认为0paddingTop:5
marginRight距右的内边距,默认为0paddingRight:5
marginBottom距下的内边距,默认为0paddingBottom:5
marginLeft距左的内边距,默认为0paddingLeft:5
cssBackgroundColor设置整个组件的背景色,默认为nonecssBackgroundColor:"#722ed1"
labelBackgroundColor设置组件label的背景色,默认为nonelabelBackgroundColor: '#eb2f96'
labelSize设置组件label的文字大小,默认为14pxlabelSize: '12px'
labelColor设置组件label的文字颜色,默认为'#606266'labelColor: '#fbadd2'
isLabelBlod是否设置label的字题为粗体,默认为falseisLabelBlod:true
valueBackgroundColor设置组件value的背景色,默认为nonevalueBackgroundColor: '#eb2f96'
valueSize设置组件value的文字大小,默认为14pxvalueSize: '12px'
valueColor设置组件value的文字颜色,默认为'#606266'valueColor: '#fbadd2'