TimePicker

FineUI. TimePicker

时间选择控件。从预设时间间隔生成下拉列表(区别于 FineUI.DatePicker 的 displayType='time':TimePicker 是固定步长的下拉,DatePicker time 模式是滚轮选择)。

相关在线示例

Constructor

new TimePicker(options)

Examples

创建时间选择器,increment设置时间间隔(分钟):

FineUI.create({
	type: 'TimePicker', renderTo: document.body, fieldLabel: '时间', increment: 30
});

使用minValuemaxValue限制时间范围(仅营业时间):

FineUI.create({
	type: 'TimePicker', renderTo: document.body, fieldLabel: '预约时间',
	minValue: '09:00', maxValue: '18:00', increment: 60
});
Parameters:
Name Type Description
options Object

初始参数

Properties
Name Type Default Description
minValue string ''

最小值

maxValue string ''

最大值

increment number 30

每个可选项间隔的分钟数

editable boolean true

是否可编辑(覆盖 FineUI.DropDownList 的设置)

type string 'TimePicker'

控件类型

Extends

Members

bodyEl :jQuery

Description:
  • 字段主体对应的jQuery节点对象

Inherited From:

字段主体对应的jQuery节点对象

Type:
  • jQuery

el :jQuery

Description:
  • 控件对应的jQuery节点对象

Inherited From:

控件对应的jQuery节点对象

Type:
  • jQuery

items :Object

Description:
  • 子控件列表

Inherited From:

子控件列表

Type:
  • Object

Methods

add(value)

Description:
  • 添加新的子控件到当前控件(追加到子项末尾)

Inherited From:
Examples

向菜单末尾追加一个分隔符和一个新菜单项('-'MenuSeparator 的快捷字符串形式):

// 假设 menu1 当前 items 为:[菜单1, 菜单2]
FineUI.ui.menu1.add([
    '-',
    { type: 'MenuItem', text: '新菜单项', iconFont: 'plus' }
]);
// 追加后 items 顺序:[菜单1, 菜单2, ----, 新菜单项]

动态在工具栏末尾追加一个按钮:

FineUI.ui.toolbar1.add({
    type: 'Button', text: '导出', iconFont: 'download',
    handler: function () {
        FineUI.alert('导出');
    }
});
Parameters:
Name Type Description
value Object | Array.<Object>

控件实例(或控件实例数组,一次添加多个,按数组顺序追加)

blur()

Description:
  • 取消焦点

Inherited From:

clearDirty()

Description:
  • 清空已改变状态(接受当前值为新的初始值;提交服务端成功后调用,isDirty随后返回 false)

Inherited From:
Example

保存成功后清除单字段脏标记(更常用form.clearDirty()一次性清整表):

$.ajax({
    url: '/api/save', method: 'POST', dataType: 'json',
    success: function () {
        FineUI.ui.tbxName.clearDirty();
    }
});

clearInvalid()

Description:
  • 清空无效标记

Inherited From:

clearValue()

Description:
  • 清空值(重置为空字符串/null;常用于"重置某字段"或"清空搜索条件"按钮,但不会改变字段的"初始值"——reset会恢复到初始值)

Inherited From:
Example

清空所有筛选字段:

['tbxKeyword', 'datepickerFrom', 'datepickerTo'].forEach(function (id) {
    FineUI.ui[id].clearValue();
});

disable()

Description:
  • 禁用控件

Inherited From:

doLayout(startFormTopmostComonentopt)

Description:
  • 执行布局操作

Inherited From:
Parameters:
Name Type Attributes Default Description
startFormTopmostComonent boolean <optional>
false

从最顶层的控件开始布局

enable()

Description:
  • 启用控件

Inherited From:

focus(selectTextopt, delayMillisecondsopt)

Description:
  • 设置焦点(典型场景:服务端校验出错回显时聚焦到第一个错误字段)

Inherited From:
Example

校验失败后聚焦:

if (FineUI.ui.tbxUserName.getValue() === 'admin') {
    FineUI.ui.tbxUserName.markInvalid('admin 是保留字');
    FineUI.ui.tbxUserName.focus(true, 200);  // 选中文本,延迟 200ms 等动画
}
Parameters:
Name Type Attributes Default Description
selectText boolean <optional>
false

是否同时选中文本(适用于TextBox系列)

delayMilliseconds number <optional>
0

设置焦点前延迟的毫秒数(用于动画完成后再聚焦)

getAttr(key) → {string}

Description:
  • 获取节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键

Returns:

节点属性值

Type
string

getEncodedText(text) → {string}

Description:
  • 获取编码后的字符串

Inherited From:
Parameters:
Name Type Description
text string

原始字符串

Returns:

编码后的字符串

Type
string

getFieldLabel() → {string}

Description:
  • 获取字段标签

Inherited From:
Returns:

字段标签

Type
string

getFormFields() → {Array.<FineUI.Field>}

Description:
  • 获取容器内(深度遍历)所有表单字段实例(FineUI.Field的子类,如TextBox/NumberBox/DatePicker等)

Inherited From:
Example

遍历表单全部字段,序列化为 name → value 的对象(用于自定义 ajax 提交;字段未声明name时改用id):

var values = {};
FineUI.ui.form1.getFormFields().forEach(function (field) {
    values[field.name || field.id] = field.getValue();
});
// values 形如:{ tbxUserName: 'FineUIPro', numberAge: 30, ... }
Returns:

表单字段数组

Type
Array.<FineUI.Field>

getHeight() → {number}

Description:
  • 获取控件高度

Inherited From:
Returns:

高度

Type
number

getItem(value) → {FineUI.Component}

Description:
  • 获取子控件(按索引/标识符/匹配函数查找;通常配合items无显式 id 的场景,比按FineUI.ui[id]更精准)

Inherited From:
Examples

按索引取第一个子控件:

var firstChild = FineUI.ui.toolbar1.getItem(0);

按 id 取子控件:

var btn = FineUI.ui.toolbar1.getItem('btnSave');

按匹配函数找第一个匹配的子控件(函数对每项返回 true 即匹配):

var btn = FineUI.ui.toolbar1.getItem(function (item) {
    return item.type === 'Button' && item.text === '保存';
});
Parameters:
Name Type Description
value number | string | function

子控件索引、标识符或者匹配函数

Returns:

子控件实例

Type
FineUI.Component

getText() → {string}

Description:
  • 获取显示文本

Inherited From:
Returns:

显示文本

Type
string

getTextByValue(value) → {string}

Description:
  • 获取值对应的显示文本

Inherited From:
Parameters:
Name Type Description
value string

Returns:

值对应的显示文本

Type
string

getTooltip() → {string}

Description:
  • 获取提示信息

Inherited From:
Returns:

提示信息

Type
string

getValue() → {string|Array.<string>}

Description:
  • 获取下拉列表的值

Inherited From:
Returns:

下拉列表的值

Type
string | Array.<string>

getValueByText(text) → {string}

Description:
  • 获取显示文本对应的值

Inherited From:
Parameters:
Name Type Description
text string

显示文本

Returns:

显示文本对应的值

Type
string

getWidth() → {number}

Description:
  • 获取控件宽度

Inherited From:
Returns:

宽度

Type
number

hide()

Description:
  • 隐藏控件(默认通过 CSS display:none 隐藏;可通过hiddenMode选择 visibility/offsets 模式以保留布局空间)

Inherited From:
Example

根据权限隐藏按钮:

if (!currentUser.canEdit) {
    FineUI.ui.btnEdit.hide();
}

hideLoading()

Description:
  • 隐藏加载动画

Inherited From:

hidePopEl()

Description:
  • 隐藏弹出框

Inherited From:

hideTrigger()

Description:
  • 隐藏触发按钮

Inherited From:

hideTrigger1()

Description:
  • 隐藏第一个触发按钮

Inherited From:

hideTrigger2()

Description:
  • 隐藏第二个触发按钮

Inherited From:

insert(insertIndex, value)

Description:
  • 插入新的子控件到当前控件

Inherited From:
Examples

向菜单的开头插入一个新菜单项和一个分隔符('-'MenuSeparator 的快捷字符串形式):

// 假设 menu1 当前 items 为:[菜单1, 菜单2, 菜单3]
FineUI.ui.menu1.insert(0, [
    { type: 'MenuItem', text: '新增', iconFont: 'plus' },
    '-'
]);
// 插入后 items 顺序:[新增, ----, 菜单1, 菜单2, 菜单3]

在工具栏第 2 项位置插入一个分隔符和一个新按钮(Toolbar 中的'-'ToolbarSeparator 的快捷字符串形式):

FineUI.ui.toolbar1.insert(2, [
    '-',
    { type: 'Button', text: '新增', iconFont: 'plus' }
]);
Parameters:
Name Type Description
insertIndex number

插入的位置(从 0 开始;如果 ≥ 当前子项数量,则追加到末尾)

value Object | Array.<Object>

控件实例(或控件实例数组,一次插入多个,按数组顺序)

isDirty() → {boolean}

Description:
  • 字段值是否已经改变(与初始值/上次clearDirty时的值比较)

Inherited From:
Example

关闭页面前提示未保存:

window.addEventListener('beforeunload', function (event) {
    if (FineUI.ui.tbxName.isDirty()) {
        event.preventDefault();
        event.returnValue = '';
    }
});
Returns:

字段值是否已经改变

Type
boolean

isDisabled() → {boolean}

Description:
  • 是否禁用

Inherited From:
Returns:

是否禁用

Type
boolean

isFocused() → {boolean}

Description:
  • 是否焦点元素

Inherited From:
Returns:

是否焦点元素

Type
boolean

isTriggerVisible(triggerNumber) → {boolean}

Description:
  • 触发按钮是否可见

Inherited From:
Parameters:
Name Type Description
triggerNumber number

触发按钮序号(1或者2,从左开始计数)

Returns:

是否可见

Type
boolean

isType(value) → {boolean}

Description:
  • 检测当前实例是否指定的控件类型

Inherited From:
Example
grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true
Parameters:
Name Type Description
value Object

控件类型

Returns:

如果当前实例是指定的控件类型,返回true;否则返回false

Type
boolean

isUserInput() → {boolean}

Description:
  • 是否为用户自行输入值

Inherited From:
Returns:

是否为用户自行输入值

Type
boolean

isValid(onlyFirstInvalidFieldopt) → {Array.<Object>}

Description:
  • 容器内的表单字段是否有效(会同时触发各字段的校验提示显示;常配合ButtonvalidateForm属性自动调用)

Inherited From:
Examples

提交按钮显式校验(不依赖validateForm属性):

FineUI.create({
    type: 'Button', text: '提交',
    handler: function () {
        var result = FineUI.ui.form1.isValid();
        if (result[0]) {
            // 校验通过 → 提交逻辑
        } else {
            // result[1] 是第一个无效字段,可聚焦提示
            result[1].focus();
        }
    }
});

仅检查"是否有效"(推荐的更常用方式:让 Button 的validateForm自动校验,handler 仅在通过时执行):

FineUI.create({
    type: 'Button', text: '提交', validateForm: 'form1',
    handler: function () {
        // 走到这里说明 form1 已校验通过
    }
});
Parameters:
Name Type Attributes Default Description
onlyFirstInvalidField boolean <optional>
false

是否仅返回第一个无效的字段

Returns:

校验结果数组:第一项是布尔值(是否全部有效),其后是无效字段实例([isValid, firstInvalidField, secondInvalidField, ...])

Type
Array.<Object>

isVisible() → {boolean}

Description:
  • 是否可见

Inherited From:
Returns:

是否可见

Type
boolean

loadData(data, valueopt)

Description:
  • 加载数据(会替换下拉项;常用于级联下拉:在父下拉change事件中调用子下拉的loadData

Inherited From:
Examples

省市县级联:选择省份后刷新城市下拉项:

FineUI.create({
    type: 'DropDownList', id: 'ddlSheng',
    data: [['bj', '北京'], ['shanghai', '上海'], ['guangdong', '广东']],
    listeners: {
        change: function () {
            var province = this.getValue();
            var cityData = getCitiesByProvince(province);
            FineUI.ui.ddlCity.loadData(cityData, '-1');  // 第二个参数指定默认选中
        }
    }
});

仅替换下拉项,不预设选中:

FineUI.ui.ddlCategory.loadData([
    ['fruit', '水果'],
    ['vegetable', '蔬菜']
]);
Parameters:
Name Type Attributes Description
data Array.<Object>

数据

value string | Array.<string> <optional>

选中的值(默认选中项)

markInvalid(errorMsg)

Description:
  • 将字段标记为无效

Inherited From:
Parameters:
Name Type Description
errorMsg string

错误提示消息

off(eventNames, fnopt)

Description:
  • 移除事件

Inherited From:
Examples

移除特定回调:

function onMyClick() { ... }
FineUI.ui.btn1.on('click', onMyClick);
// 后续解绑:
FineUI.ui.btn1.off('click', onMyClick);

移除某事件下的全部回调(不传 fn 参数):

FineUI.ui.btn1.off('click');
Parameters:
Name Type Attributes Description
eventNames string

事件名称(可以空格分割多个事件名称)

fn F_Component_on <optional>

之前注册的事件处理函数(留空则移除该事件的所有回调)

on(eventNames, fn)

Description:
  • 注册事件(运行时绑定;与配置参数listeners的初始绑定等价,但可在控件创建后动态追加)

Inherited From:
Examples

初始绑定形态:在FineUI.create时通过listeners配置项一次性声明:

FineUI.create({
    type: 'Button', renderTo: document.body, text: '按钮',
    listeners: {
        click: function (event) {
            FineUI.alert('button clicked');
        },
        // 同一个 listeners 内可以同时声明多个事件
        beforeclick: function (event) {
            // 返回 false 可阻止 click 事件
        }
    }
});

运行时绑定形态:控件创建后通过on()追加,效果与上面的listeners等价:

FineUI.ui.btn1.on('click', function (event) {
    FineUI.alert('button clicked');
});

on()一次绑定多个事件(事件名之间空格分隔):

FineUI.ui.tbxName.on('focus blur', function () {
    console.log('focus 或 blur 触发');
});
Parameters:
Name Type Description
eventNames string

事件名称(可以空格分割多个事件名称)

fn F_Component_on

触发事件时执行的函数

remove()

Description:
  • 从父控件中移除当前控件并销毁其 DOM(不可恢复;移除后 FineUI.ui[id] 也会清除)。触发 remove 事件可用于清理外部资源。

Inherited From:
Example

动态添加 + 移除子控件:

var btn = FineUI.create({
    type: 'Button', text: '临时按钮', renderTo: document.body
});
// 5 秒后移除
setTimeout(function () {
    btn.remove();
}, 5000);

removeAttr(key)

Description:
  • 删除节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键

removeTooltip()

Description:
  • 删除提示信息

Inherited From:

reset()

Description:
  • 重置字段

Inherited From:

setAttr(key, value)

Description:
  • 设置节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键

value string

节点属性值

setAttrs(attrs)

Description:
  • 设置节点属性

Inherited From:
Parameters:
Name Type Description
attrs Object

节点属性对象

setDisabled(disabled)

Description:
  • 设置控件的禁用状态

Inherited From:
Parameters:
Name Type Description
disabled boolean

是否禁用

setEditable(editable)

Description:
  • 设置是否可编辑

Inherited From:
Parameters:
Name Type Description
editable boolean

是否可编辑

setEmptyText(emptyText)

Description:
  • 设置空白文本

Inherited From:
Parameters:
Name Type Description
emptyText string

空白文本

setEnabled(enabled)

Description:
  • 设置控件的启用状态

Inherited From:
Parameters:
Name Type Description
enabled boolean

是否启用

setFieldLabel(label)

Description:
  • 设置字段标签

Inherited From:
Parameters:
Name Type Description
label string

字段标签

setHeight(height)

Description:
  • 设置控件高度

Inherited From:
Parameters:
Name Type Description
height number

高度

setHidden(hidden)

Description:
  • 设置控件的隐藏状态

Inherited From:
Parameters:
Name Type Description
hidden boolean

是否隐藏

setMaxLength(maxLength)

Description:
  • 设置最大长度

Inherited From:
Parameters:
Name Type Description
maxLength number

最大长度

setMinLength(minLength)

Description:
  • 设置最小长度

Inherited From:
Parameters:
Name Type Description
minLength number

最小长度

setReadonly(readonly)

Description:
  • 设置只读(只读字段仍能聚焦/复制文本,但不能修改;与disable区别:只读字段仍参与表单提交)

Inherited From:
Example

根据下拉框选择切换某字段是否只读:

FineUI.ui.ddlMode.on('change', function () {
    FineUI.ui.tbxAmount.setReadonly(this.getValue() === 'auto');
});
Parameters:
Name Type Description
readonly boolean

只读状态

setRedStar(redStar)

Description:
  • 设置是否显示红色星号

Inherited From:
Parameters:
Name Type Description
redStar boolean

是否显示红色星号

setRegex(regex)

Description:
  • 设置正则表达式

Inherited From:
Parameters:
Name Type Description
regex Regex

正则表达式

setRegexPattern(regexPattern)

Description:
  • 设置正则表达式规则

Inherited From:
Parameters:
Name Type Description
regexPattern string

正则表达式规则

setRequired(required)

Description:
  • 设置是否必填

Inherited From:
Parameters:
Name Type Description
required boolean

是否必填

setSize(width, height)

Description:
  • 设置控件尺寸(同时设置宽高;等价于setWidth + setHeight但只触发一次布局)

Inherited From:
Example

响应窗口 resize 调整面板尺寸:

$(window).on('resize', function () {
    FineUI.ui.panel1.setSize($(window).width() - 20, $(window).height() - 40);
});
Parameters:
Name Type Description
width number

宽度

height number

高度

setText(text, forceNoValidate)

Description:
  • 设置显示文本

Inherited From:
Parameters:
Name Type Description
text string

显示文本

forceNoValidate boolean

是否验证

setTooltip(tooltip)

Description:
  • 设置提示信息

Inherited From:
Parameters:
Name Type Description
tooltip string

提示信息

setTriggerVisible(triggerNumber, visible)

Description:
  • 设置触发按钮的显示状态

Inherited From:
Parameters:
Name Type Description
triggerNumber number

触发按钮序号(1或者2,从左开始计数)

visible boolean

显示状态

setValue(value, forceNoValidate)

Description:
  • 设置下拉列表的值

Inherited From:
Parameters:
Name Type Description
value string | Array.<string>

下拉列表的值

forceNoValidate boolean

是否验证

setVisible(visible)

Description:
  • 设置控件的显示状态

Inherited From:
Parameters:
Name Type Description
visible boolean

是否可见

setWidth(width)

Description:
  • 设置控件宽度

Inherited From:
Parameters:
Name Type Description
width number

宽度

show()

Description:
  • 显示控件(与hide对应)

Inherited From:
Example

根据下拉列表的选中项,联动显示某区块:

FineUI.ui.ddlType.on('change', function () {
    if (this.getValue() === 'advanced') {
        FineUI.ui.pnlAdvanced.show();
    } else {
        FineUI.ui.pnlAdvanced.hide();
    }
});

showLoading(opacity, container)

Description:
  • 显示加载动画

Inherited From:
Parameters:
Name Type Description
opacity number

透明度(默认值:0.65)

container jQuery

显示动画的目标元素(留空则为内容元素)

showPopEl()

Description:
  • 显示弹出框

Inherited From:

showTrigger()

Description:
  • 显示触发按钮

Inherited From:

showTrigger1()

Description:
  • 显示第一个触发按钮

Inherited From:

showTrigger2()

Description:
  • 显示第二个触发按钮

Inherited From:

toggleEnabled()

Description:
  • 切换启用状态

Inherited From:

toggleVisible()

Description:
  • 切换显示状态

Inherited From:

trigger(eventName, args)

Description:
  • 触发事件

Inherited From:
Parameters:
Name Type Description
eventName string

事件名称

args Object

事件参数

triggerDefaultAction()

Description:
  • 触发缺省动作

Inherited From:

validate() → {boolean}

Description:
  • 验证字段的有效性(会触发字段的校验提示显示;适用于针对单个字段做主动校验,例如失焦/外部触发;批量校验请用FineUI.ui.form1.isValid()

Inherited From:
Example

失焦时主动校验单字段:

FineUI.create({
    type: 'TextBox', fieldLabel: '邮箱', regex: /^[\w.]+@[\w.]+$/, regexMessage: '邮箱格式不正确',
    listeners: {
        blur: function () {
            this.validate();
        }
    }
});
Returns:

是否有效

Type
boolean

Events

beforehide

Description:
  • 隐藏控件之前触发(返回false则取消隐藏操作)

Inherited From:

beforeselect

Description:
  • 选中列表项之前触发(返回false则取消选中操作)

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

selectedValue string

即将选中的值

originalValue string

原来的值

beforeshow

Description:
  • 显示控件之前触发(返回false则取消显示操作)

Inherited From:

blur

Description:
  • 输入框失去焦点时触发(常用于失焦校验或失焦联动)

Inherited From:
Example

失焦触发字段校验(仅校验当前字段,不影响整表):

FineUI.create({
    type: 'TextBox', fieldLabel: '邮箱', regex: /^[\w.]+@[\w.]+$/,
    listeners: {
        blur: function () {
            this.validate();
        }
    }
});
Parameters:
Name Type Description
event jQuery.Event

事件对象

change

Description:
  • 输入框值改变时触发(失焦或回车后;继承到所有 TextBox 派生类如NumberBox/DatePicker/DropDownList

Inherited From:
Example

响应值变化做联动:

FineUI.create({
    type: 'TextBox', fieldLabel: '关键字',
    listeners: {
        change: function () {
            FineUI.ui.grid1.loadDataUrl('/api/search', { q: this.getValue() });
        }
    }
});
Parameters:
Name Type Description
event jQuery.Event

事件对象

cleariconclick

Description:
  • 点击清空图标时触发

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

enter

Description:
  • 输入框获取焦点并按下 ENTER 键时触发(常用于"搜索框回车提交"或"密码框回车登录")

Inherited From:
Example

搜索框回车触发搜索(也可改用配置属性enterClickControl声明式实现):

FineUI.create({
    type: 'TextBox', fieldLabel: '关键字',
    listeners: {
        enter: function () {
            FineUI.ui.btnSearch.click();
        }
    }
});
Parameters:
Name Type Description
event jQuery.Event

事件对象

focus

Description:
  • 输入框获取焦点时触发

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

hide

Description:
  • 隐藏控件时触发

Inherited From:

layout

Description:
  • 布局控件时触发

Inherited From:

remove

Description:
  • 移除控件时触发(调用 remove() 时,控件 DOM 被销毁之前触发;可用于清理外部资源 / 解绑全局事件)

Inherited From:

render

Description:
  • 渲染控件时触发

Inherited From:

select

Description:
  • 选中列表项时触发

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

selectedValue string

选中的值

originalValue string

原来的值

show

Description:
  • 显示控件时触发

Inherited From:

tagclose

Description:
  • 关闭某个标签时触发(仅在启用多选标签模式时有效)

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

tagValue string

关闭标签的值

tagText string

关闭标签的显示文本

trigger1click

Description:
  • 点击第一个触发图标时触发

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

trigger2click

Description:
  • 点击第二个触发图标时触发

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

triggerclick

Description:
  • 点击触发图标时触发

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象