Calendar

FineUI. Calendar

日历控件。区别于 FineUI.DatePicker（带触发输入框），Calendar 是独立的日历面板，常作为弹出层或内嵌使用。

相关在线示例：

Constructor

new Calendar(options)

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

创建独立日历控件（区别于FineUI.DatePicker，不依赖输入框，直接展开显示）：

FineUI.create({
	type: 'Calendar', renderTo: document.body, value: new Date()
});

使用showTime: true同时显示时间选择面板：

FineUI.create({
	type: 'Calendar', renderTo: document.body, showTime: true, format: 'yyyy-MM-dd HH:mm:ss'
});

使用displayType: 'dayrange'选择日期范围，showConfirmButton: true需点击确定才触发select事件：

FineUI.create({
	type: 'Calendar', renderTo: document.body, displayType: 'dayrange', showConfirmButton: true,
	listeners: {
		select: function (event) {
			FineUI.alert('选中范围：' + this.getValue());
		}
	}
});
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 '

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

是否允许范围选择（dayrange/yearrange/monthrange）的左右两个面板独立切换月份/年份（默认关闭，即左右面板联动、强制相邻）
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

点击确定按钮才会触发选择事件
type string 'Calendar'

控件类型

Extends

Members

el :jQuery

Description:

  • 控件对应的jQuery节点对象

Inherited From:

控件对应的jQuery节点对象

Type:
  • jQuery

Methods

disable()

Description:

  • 禁用控件（按钮变灰、表单字段不可输入；可用isDisabled查询当前状态）

Inherited From:
Example

提交期间禁用按钮，避免重复提交（用 jQuery 的 $.ajax）：

FineUI.create({
    type: 'Button', text: '提交',
    handler: function () {
        var me = this;
        me.disable();
        $.ajax({
            url: '/api/save', method: 'POST', dataType: 'json',
            complete: function () {
                me.enable();
            }
        });
    }
});

doLayout(startFormTopmostComonentopt)

Description:

  • 执行布局操作

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

从最顶层的控件开始布局

enable()

Description:

  • 启用控件（与disable对应）

Inherited From:

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

getHeight() → {number}

Description:

  • 获取控件高度

Inherited From:
Returns:

高度

Type
number

getText() → {string}

Description:

  • 获取选中日期字符串

Returns:

选中日期字符串

Type
string

getTooltip() → {string}

Description:

  • 获取提示信息

Inherited From:
Returns:

提示信息

Type
string

getValue(onlyDatePartopt) → {Date|Array.<Date>}

Description:

  • 获取选中日期（返回 Date 对象；displayType: 'dayrange'等范围模式下返回 [Date, Date] 数组）

Examples

获取日期对象：

var d = FineUI.ui.calendar1.getValue();
// 例如：Sat May 22 2026 10:30:00 GMT+0800

范围模式取起止两端：

var range = FineUI.ui.calendar1.getValue();
// 例如：[Date1, Date2]
Parameters:
Name Type Attributes Description
onlyDatePart boolean <optional>

仅取年月日，忽略时分秒
Returns:

选中日期

Type
Date | Array.<Date>

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();
}

isDisabled() → {boolean}

Description:

  • 是否禁用

Inherited From:
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

isVisible() → {boolean}

Description:

  • 是否可见

Inherited From:
Returns:

是否可见

Type
boolean

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:

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

是否禁用

setEnabled(enabled)

Description:

  • 设置控件的启用状态

Inherited From:
Parameters:
Name Type Description
enabled boolean

是否启用

setHeight(height)

Description:

  • 设置控件高度

Inherited From:
Parameters:
Name Type Description
height number

高度

setHidden(hidden)

Description:

  • 设置控件的隐藏状态

Inherited From:
Parameters:
Name Type Description
hidden boolean

是否隐藏

setMaxValue(maxValue)

Description:

  • 设置最大日期（动态约束可选范围；超出范围的日期会被禁用，无法点选）

Example

限制只能选择今天之前的日期：

FineUI.ui.calendar1.setMaxValue(FineUI.formatDate(new Date(), 'yyyy-MM-dd'));
Parameters:
Name Type Description
maxValue string

日期字符串

setMinValue(minValue)

Description:

  • 设置最小日期（与setMaxValue对应）

Parameters:
Name Type Description
minValue string

日期字符串

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)

Description:

  • 设置选中日期

Parameters:
Name Type Description
text string

日期字符串

setTooltip(tooltip)

Description:

  • 设置提示信息

Inherited From:
Parameters:
Name Type Description
tooltip string

提示信息

setValue(val)

Description:

  • 设置选中日期（接受 Date 对象或符合format的日期字符串；范围模式接受 [start, end] 数组）

Examples

设置日期：

FineUI.ui.calendar1.setValue('2026-05-22');
FineUI.ui.calendar1.setValue(new Date());

设置日期范围（displayType: 'dayrange'）：

FineUI.ui.calendar1.setValue(['2026-05-01', '2026-05-31']);
Parameters:
Name Type Description
val string | Date | Array

日期对象/日期字符串/范围数组

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();
    }
});

toggleEnabled()

Description:

  • 切换启用状态

Inherited From:

toggleVisible()

Description:

  • 切换显示状态

Inherited From:

trigger(eventName, args)

Description:

  • 触发事件

Inherited From:
Parameters:
Name Type Description
eventName string

事件名称
args Object

事件参数

Events

beforehide

Description:

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

Inherited From:

beforeshow

Description:

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

Inherited From:

hide

Description:

  • 隐藏控件时触发

Inherited From:

layout

Description:

  • 布局控件时触发

Inherited From:

remove

Description:

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

Inherited From:

render

Description:

  • 渲染控件时触发

Inherited From:

select

Description:

  • 选中日期时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

show

Description:

  • 显示控件时触发

Inherited From: