2.5 参数控件自定义事件（5.8之后版本释放该功能）

概述

在参数控件中自定义事件可以控制其他参数控件，如在下拉框中包含年、年月、年月日、年月日时分秒等，当选择年月时，对应的日历控件由年月日模式切换到年月模式。

1.参数控件自定义事件介绍

在参数管理中增加参数，点击事件设置可以对该类型控件自定义事件内容，事件内容用Javascript代码编辑。

文本框可以添加编辑前，编辑后和编辑结束事件；

下拉框可以添加编辑后，关闭下拉菜单时和打开下拉菜单时事件；

下拉复选框可以添加编辑后，关闭下拉菜单时和打开下拉菜单时事件；

单选按钮可以添加编辑后事件；

复选按钮可以添加编辑后事件；

日历可以添加编辑后事件；

下拉树可以添加编辑后和点击事件；

2.参数控件自定义事件实现联动案例

在下拉框中添加年、年月、年月日、年月日时分秒等选项，在下拉框中添加编辑后事件实现日历控件切换模式。

修改日历代码如下：

//日历控件id为datejjj（date+参数标识），日历控件中input的id为参数标识
$("#datejjj").attr('data-date-format','yyyy-mm');
$("#datejjj").attr('data-link-format','yyyy-mm');
var separators = "yyyy-mm".replace(/t|hh?|HH?|p|P|z|Z|ii?|ss?|dd?|DD?|mm?|MM?|yy(?:yy)?/g, '\0').split('\0');
var parts = "yyyy-mm".match(/t|hh?|HH?|p|P|z|Z|ii?|ss?|dd?|DD?|mm?|MM?|yy(?:yy)?/g);
$("#datejjj").data('datetimepicker').format= {separators: separators, parts: parts};
$("#datejjj").data('datetimepicker').linkFormat= {separators: separators, parts: parts};
//清空日历控件中input原来选值
$("#jjj").val("");
//设置日历最大视图为年 年-5 月-4 日-3 时-2 分-1 秒-0
$("#datejjj").data('datetimepicker').maxView=5;
//设置日历最小视图为月
$("#datejjj").data('datetimepicker').minView=4;
//设置日历初始视图为月
$("#datejjj").data('datetimepicker').startViewMode=4;
//设置日历视图为月
$("#datejjj").data('datetimepicker').viewMode=4;
//设置日历选取视图为月
$("#datejjj").data('datetimepicker').viewSelect=4;
//把所有日历模式div隐藏，打开月模式div显示
$("#datejjj").data('datetimepicker').picker.find('>div').hide().filter('.datetimepicker-seconds').css('display', 'none');
$("#datejjj").data('datetimepicker').picker.find('>div').hide().filter('.datetimepicker-minutes').css('display', 'none');
$("#datejjj").data('datetimepicker').picker.find('>div').hide().filter('.datetimepicker-hours').css('display', 'none');
$("#datejjj").data('datetimepicker').picker.find('>div').hide().filter('.datetimepicker-days').css('display', 'none');
$("#datejjj").data('datetimepicker').picker.find('>div').hide().filter('.datetimepicker-months').css('display', 'none');
$("#datejjj").data('datetimepicker').picker.find('>div').hide().filter('.datetimepicker-years').css('display', 'none');
$("#datejjj").data('datetimepicker').picker.find('>div').hide().filter('.datetimepicker-months').css('display', 'block');