示例

注意

• 前端回显时间如果有时区要求，后端返回前端必须是时间字符串 类似 2023/9/7 23:59:59 字符串，不能传UTC 时间戳，会有时区偏移 问题！

任意时间点

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <form layout="horizontal">
        <item
            node='time-picker'
            type='base'
            label='时刻选择'
            name='base'
            placeholder='时-分-秒'
        />
    </form>
</page>

export default XPage({

});

任意时间范围

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <form layout="horizontal">
        <item node='time-picker'
              type='range'
              label='时刻范围选择'
              name='range'
              placeholder='请选择'
        />
        <item node='time-picker'
              type='range'
              label='时刻选择 自定义步长和设置可选范围'
              name='range'
              placeholder='请选择'
              step='02:02:04'
              :picker-options="{
                            selectableRange:['8:30:00 - 20:30:00']
                        }" />
    </form>
</page>

export default XPage({
    data: {
        
    },
});

通过step 控制 时分秒选择

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <form layout="horizontal">
        <item
            node='time-picker'
            type='base'
            label='选择时分'
            name='base'
            step='01:01:00'
            placeholder='时-分'
        />
        <item
            node='time-picker'
            type='base'
            label='选择小时'
            name='base'
            step='01:00:00'
            placeholder='时'
        />
    </form>
</page>

export default XPage({
   
});

时区

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <form layout="horizontal">
        <item
            node='time-picker'
            type='base'
            label='时间选择'
            name='base'
            time-zone='UTC+8'
        />
        <item
            node='time-picker'
            type='range'
            label='时间范围选择'
            name='range'
            time-zone='UTC+8'
        />
    </form>
</page>

export default XPage({
    data:{
       
    }
});

Attributes

参数	说明	类型	可选值	默认值	端	版本
name	名称(原生属性)	String	--	--	PC/Mobile	--
value	绑定值	Date/Array	--	--	PC/Mobile	--
type	类型	String	base/range	base	PC/Mobile	--
format	时间格式	String	小时：HH，分：mm，秒：ss，AM/PM A	HH:mm:ss	PC/Mobile	--
disabled	禁用	Boolean	--	false	PC/Mobile	--
placeholder	占位符	String	--	--	PC/Mobile	--
end-placeholder	结束日期占位	String	--	--	PC/Mobile	--
step	设置时分秒步长 (注意步长不能为0)	String	小时步长(1-23)：分钟步长(1-59)：秒步长(1-59)	'01:01:01'	PC/Mobile	--
picker-options	当前时间日期选择器特有的选项参考下表	Object	见[Picker Options](###Picker Options)	{}	PC/Mobile	--
timeZone	时区展示(仅当存在time 选择时显示)	String	自定义字符串	-	PC/Mobile	--

Picker Options

参数	说明	类型	可选值	默认值
selectableRange	可选时间段，例如['18:30:00 - 20:30:00']	Array	—	—

Events

名称	说明	回调参数	端
changed	值改变后触发	(value)
confirm	值改变后触发	(value)	Mobile

format&value-format

使用format指定输入框的格式；使用value-format指定绑定值的格式。

默认情况下，组件接受并返回Date对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：

格式	含义	备注	举例
yyyy	年		2017
M	月	不补0	1
MM	月		01
W	周	仅周选择器的 format 可用；不补0	1
WW	周	仅周选择器的 format 可用	01
d	日	不补0	2
dd	日		02
H	小时	24小时制；不补0	3
HH	小时	24小时制	03
h	小时	12小时制，须和 A 或 a 使用；不补0	3
hh	小时	12小时制，须和 A 或 a 使用	03
m	分钟	不补0	4
mm	分钟		04
s	秒	不补0	5
ss	秒		05
A	AM/PM	仅 format 可用，大写	AM
a	am/pm	仅 format 可用，小写	am
timestamp	时间戳	仅 valueFormat 可用，小写
[MM]	使用[]包裹不需要格式化字符	使用方括号标识不需要格式化的字符 (如 [A][MM])	MM