组件：时间选择框

时间选择框组件用于让用户选择时间（时:分:秒），支持通过步长控制可选的秒数粒度（如每60秒一个可选点），并可设置禁用/只读状态、占位提示等。它基于 HTML <input type="time"> 元素封装，适用于预约时间、日程安排、提醒设置等需要精确时间选择的场景。

典型使用场景：

预约系统（选择预约时间、服务时间）
日程管理（设置会议时间、提醒时间）
闹钟设置（选择闹钟时间）
表单中的时间字段（上班时间、营业时间）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置时间值	`置值(时间字符串)`	`时间选择框1.置值("14:30:00")`
获取时间值字符串	`取值()`	`变量时间 = 时间选择框1.取值()`
获取小时、分钟、秒	`取小时()` / `取分钟()` / `取秒()`	`变量时 = 时间选择框1.取小时()`
设置步长（秒级）	`步长`	`时间选择框1.步长 = 60`
禁用/启用组件	`禁用`	`时间选择框1.禁用 = 真`
设置只读状态	`只读`	`时间选择框1.只读 = 真`
设置占位提示	`占位提示`	`时间选择框1.占位提示 = "请选择时间"`
设置选择完成回调	`置时间选择完毕回调(回调函数)`	`时间选择框1.置时间选择完毕回调((源对象, 时间) => { ... })`

样式美化参考

时间选择框的外观可通过继承的视图属性进行调整：

整体容器：通过 宽度、高度、背景颜色、边框（如 "1px solid #d9d9d9"）、边框圆角（建议 "6px"）等属性美化。
字体样式：通过 字体大小（建议 "14px"）、文本颜色 控制显示时间文本的外观。
内边距：使用 内边距（如 "8px 12px"）控制输入框内边距。
禁用状态：禁用 = 真 时，输入框变灰且不可交互。
只读状态：只读 = 真 时，输入框不可编辑但仍可聚焦，且样式可能略有不同（取决于浏览器）。

CSS 美化示例（在项目 CSS 文件中定义）：

.my-time-input {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    transition: border-color 0.3s;
}
.my-time-input:focus {
    border-color: #1890ff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.my-time-input:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}
.my-time-input::placeholder {
    color: #bfbfbf;
}

在代码中应用样式类：时间选择框1.添加样式类("my-time-input")

基础示例

创建一个时间选择框，默认值为 18:30:00，步长为 60 秒（即只能选择整分钟），选择后输出时间。

变量 时间选择框1 = 创建 时间选择框()
时间选择框1.左边 = 50
时间选择框1.顶边 = 50
时间选择框1.宽度 = 160
时间选择框1.高度 = 36
时间选择框1.边框 = "1px solid #d9d9d9"
时间选择框1.边框圆角 = "6px"
时间选择框1.内边距 = "8px 12px"
时间选择框1.字体大小 = "14px"
时间选择框1.置值("18:30:00")
时间选择框1.步长 = 60  ' 每分钟一步

时间选择框1.置时间选择完毕回调((源对象, 时间字符串) => {
    弹出提示("选择的时间：" + 时间字符串)
})

添加组件(时间选择框1)

综合示例：会议预约时间选择

本示例构建一个会议预约表单，包含日期、开始时间、结束时间选择框，以及会议主题输入，提交时校验时间是否合理（开始时间必须早于结束时间）。

' ========== 创建表单容器 ==========
变量 表单容器 = 创建 绝对布局()
表单容器.左边 = 30
表单容器.顶边 = 30
表单容器.宽度 = 400
表单容器.背景颜色 = "#ffffff"
表单容器.边框 = "1px solid #e8e8e8"
表单容器.边框圆角 = "12px"
表单容器.内边距 = "24px"
添加组件(表单容器)

' 标题
变量 标题 = 创建 标签()
标题.文本 = "📅 预约会议"
标题.字体大小 = "20px"
标题.字体粗细 = "bold"
标题.文本颜色 = "#333"
标题.内边距 = "0 0 16px 0"
表单容器.添加组件(标题)

' 会议主题
变量 主题标签 = 创建 标签()
主题标签.文本 = "会议主题"
主题标签.字体大小 = "14px"
主题标签.文本颜色 = "#666"
主题标签.内边距 = "8px 0 4px"
表单容器.添加组件(主题标签)

变量 主题输入 = 创建 单行输入框()
主题输入.宽度 = 352
主题输入.高度 = 36
主题输入.提示文本 = "请输入会议主题"
主题输入.边框 = "1px solid #d9d9d9"
主题输入.边框圆角 = "6px"
主题输入.内边距 = "8px 12px"
表单容器.添加组件(主题输入)

' 开始时间
变量 开始标签 = 创建 标签()
开始标签.文本 = "开始时间"
开始标签.字体大小 = "14px"
开始标签.文本颜色 = "#666"
开始标签.内边距 = "12px 0 4px"
表单容器.添加组件(开始标签)

变量 开始时间框 = 创建 时间选择框()
开始时间框.宽度 = 352
开始时间框.高度 = 36
开始时间框.边框 = "1px solid #d9d9d9"
开始时间框.边框圆角 = "6px"
开始时间框.内边距 = "8px 12px"
开始时间框.字体大小 = "14px"
开始时间框.步长 = 60  ' 整分钟
开始时间框.置值("09:00:00")
开始时间框.占位提示 = "选择开始时间"
表单容器.添加组件(开始时间框)

' 结束时间
变量 结束标签 = 创建 标签()
结束标签.文本 = "结束时间"
结束标签.字体大小 = "14px"
结束标签.文本颜色 = "#666"
结束标签.内边距 = "12px 0 4px"
表单容器.添加组件(结束标签)

变量 结束时间框 = 创建 时间选择框()
结束时间框.宽度 = 352
结束时间框.高度 = 36
结束时间框.边框 = "1px solid #d9d9d9"
结束时间框.边框圆角 = "6px"
结束时间框.内边距 = "8px 12px"
结束时间框.字体大小 = "14px"
结束时间框.步长 = 60
结束时间框.置值("10:00:00")
结束时间框.占位提示 = "选择结束时间"
表单容器.添加组件(结束时间框)

' 提交按钮
变量 提交按钮 = 创建 按钮()
提交按钮.文本 = "预约"
提交按钮.宽度 = 352
提交按钮.高度 = 44
提交按钮.背景颜色 = "#1890ff"
提交按钮.文本颜色 = "#ffffff"
提交按钮.边框圆角 = "6px"
提交按钮.字体大小 = "16px"
提交按钮.内边距 = "16px 0 0"
表单容器.添加组件(提交按钮)

' 错误提示
变量 错误标签 = 创建 标签()
错误标签.文本 = ""
错误标签.字体大小 = "14px"
错误标签.文本颜色 = "#ff4d4f"
错误标签.内边距 = "8px 0 0"
错误标签.可视 = "hidden"
表单容器.添加组件(错误标签)

' ========== 提交校验 ==========
提交按钮.置被单击回调((源对象, 事件对象) => {
    变量 主题 = 删首尾空(主题输入.内容)
    变量 开始 = 开始时间框.取值()
    变量 结束 = 结束时间框.取值()
    
    如果(主题 == "")
        错误标签.文本 = "请输入会议主题"
        错误标签.可视 = "visible"
        主题输入.获取焦点()
        返回
    结束 如果
    如果(开始 == "" 或 结束 == "")
        错误标签.文本 = "请选择完整的时间"
        错误标签.可视 = "visible"
        返回
    结束 如果
    
    ' 比较时间（简单字符串比较，格式 HH:mm:ss 可直接比较）
    如果(开始 >= 结束)
        错误标签.文本 = "结束时间必须晚于开始时间"
        错误标签.可视 = "visible"
        返回
    结束 如果
    
    错误标签.可视 = "hidden"
    弹出提示("预约成功！会议：" + 主题 + " 从 " + 开始 + " 到 " + 结束)
    
    ' 清空表单（模拟提交后重置）
    主题输入.内容 = ""
    开始时间框.置值("09:00:00")
    结束时间框.置值("10:00:00")
})

' ========== 当时间改变时，隐藏错误提示 ==========
开始时间框.置时间选择完毕回调((源对象, 时间字符串) => {
    错误标签.可视 = "hidden"
})

结束时间框.置时间选择完毕回调((源对象, 时间字符串) => {
    错误标签.可视 = "hidden"
})

属性详解

禁用

类型： 逻辑型
说明： 设置或获取是否禁用组件。禁用后，用户无法点击输入框或通过键盘修改时间，样式变灰（由浏览器控制）。默认 假。

只读

类型： 逻辑型
说明： 设置或获取是否为只读模式。只读模式下，用户可以看到时间值，但无法修改（输入框不可编辑）。与禁用的区别在于，只读状态样式通常不变（非灰色），且输入框仍然可以获得焦点。默认 假。

步长

类型： 数值型
说明： 设置或获取秒级步长，决定了时间选择器在分钟或秒上的粒度。常用取值：
- 1：秒级步长，用户可精确到秒。
- 60：分钟级步长，秒数固定为 00。
- 3600：小时级步长，分钟和秒固定为 00。默认 60（分钟级）。此属性影响用户点击增减按钮或拖动时的变化量，也限制可选时间点。

占位提示

类型： 文本型
说明： 设置或获取输入框为空时显示的占位提示文本，如 "请选择时间"。当用户选择时间后，占位文本消失。

函数详解

置值(时间字符串)

功能： 设置时间选择框的当前值。
参数： 时间字符串，格式必须为 HH:mm 或 HH:mm:ss（24小时制），例如 "14:30" 或 "14:30:00"。若省略秒部分，默认为 00。
返回值： 无。
示例： 时间选择框1.置值("08:30:00")

取值()

功能： 获取当前选择的时间字符串，格式固定为 HH:mm:ss（24小时制）。
返回值： 文本型，如 "14:30:00"；若未选择任何时间，返回空字符串 ""。
示例： 变量时间 = 时间选择框1.取值()

取小时()

功能： 获取当前时间的小时部分（0~23）。
返回值： 数值型，若未选择时间返回 -1 或 0（浏览器行为不同，建议先判断 取值() 是否为空）。
示例： 变量时 = 时间选择框1.取小时()

取分钟()

功能： 获取当前时间的分钟部分（0~59）。
返回值： 数值型。
示例： 变量分 = 时间选择框1.取分钟()

取秒()

功能： 获取当前时间的秒部分（0~59）。
返回值： 数值型。
示例： 变量秒 = 时间选择框1.取秒()

置时间选择完毕回调(回调函数)

功能： 设置当用户完成时间选择（即输入框失去焦点或用户按回车确认）时的回调函数。
参数： 回调函数，格式为 (源对象, 时间字符串) => { ... }。
- 源对象：时间选择框组件本身。
- 时间字符串：当前选择的时间（格式 HH:mm:ss）。
返回值： 无。

示例：

时间选择框1.置时间选择完毕回调((源对象, 时间) => {
    调试输出("选择了时间：" + 时间)
})

事件说明

时间选择完毕(源对象, 时间字符串)

功能： 与 置时间选择完毕回调 等效，适用于设计文件（.spldg）中定义的组件。