DatePicker

FineUI. DatePicker

new DatePicker(options)

Description:
Examples
日期格式规则请参考：FineUI.parseDate

创建基础日期选择器，format定义日期格式：

FineUI.create({
	type: 'DatePicker', renderTo: document.body, fieldLabel: '日期', format: 'yyyy-MM-dd'
});

使用minValue和maxValue限制可选范围：

FineUI.create({
	type: 'DatePicker', renderTo: document.body, fieldLabel: '出生日期',
	minValue: '1900-01-01', maxValue: '2024-12-31'
});

使用showTime: true同时选择日期和时间：

FineUI.create({
	type: 'DatePicker', renderTo: document.body, fieldLabel: '日期时间',
	format: 'yyyy-MM-dd HH:mm:ss', showTime: true
});

使用displayType: 'month'仅选择年月，或 'year'仅选择年份：

FineUI.create({
	type: 'DatePicker', renderTo: document.body, fieldLabel: '月份', format: 'yyyy-MM', displayType: 'month'
});

使用displayType: 'dayrange'选择日期范围：

FineUI.create({
	type: 'DatePicker', renderTo: document.body, fieldLabel: '日期范围', displayType: 'dayrange'
});
Parameters:
Name Type Description
options Object

初始参数

Properties
Name Type Default Description
format string 'yyyy-MM-dd'

日期格式字符串
minValue string ''

最小值
maxValue string ''

最大值
displayType string 'day'

显示类型（可选项为：day, year, month, time, dayrange, yearrange, monthrange, timerange）
rangeSeparator string '

' - 日期范围的分隔符
showTime boolean false

是否显示时间
showMinute boolean true

是否显示分钟
showSecond boolean true

是否显示秒钟
stackDateTime boolean false

层叠显示日期面板和时间面板（默认为false，仅当displayType=day和showTime=true时有效）
showTodayButton boolean true

是否显示今天按钮（默认为true，仅当displayType=day时有效）
showConfirmButton boolean false

点击确定按钮才会触发选择事件
clearIcon boolean false

是否自动显示清空图标
enableClickAction boolean true

点击输入框是否触发默认行为
type string 'DatePicker'

控件类型

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

getEncodedText(text) → {string}

Description:

  • 获取编码后的字符串

Inherited From:
Parameters:
Name Type Description
text string

原始字符串
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>

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

hidePopEl()

Description:

  • 隐藏弹出框

Overrides:

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

showPopEl()

Description:

  • 显示弹出框

Events

beforehide

Description:

  • 隐藏控件之前触发（返回false则取消隐藏操作）

Inherited From:

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:

  • 点击清空图标时触发

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:

  • 选中日期时触发

show

Description:

  • 显示控件时触发

Inherited From:

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

事件对象