功能需求: 自定义扩展,将原先的datebox控件按钮进行自定义的扩展:

1.问题:
对原先的时间按钮控件进行更改扩展,新增 “一刻钟” “半小时” “一小时” 选项。
获取原先的 datebox 对象的原型,进行扩展。 2.首先获取原先的datebox控件的原型
function initDataButton(){
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(0, 2, {
text: '一刻钟后',
handler: function(target){
var opts=$.data(target,"datetimebox").options;
var date=_addm(target,"M",15);
_b52(target,opts.formatter.call(target,date));
}
},{
text: '半小时后',
handler: function(target){
var opts=$.data(target,"datetimebox").options;
var date=_addm(target,"M",30);
_b52(target,opts.formatter.call(target,date));
}
},{
text: '一小时后',
handler: function(target){
var opts=$.data(target,"datetimebox").options;
var date=_addm(target,"H",1);
_b52(target,opts.formatter.call(target,date));
}
},{
text: '确定',
handler: function(target){
_b53(target);
}
});
$('#startTime').datebox({
buttons: buttons
});
$('#endTime').datebox({
buttons: buttons
});
} 3.jQuery源码中的js代码: function _addm(_b4f,f,n){
var c=$(_b4f).datetimebox("calendar");
var t=$(_b4f).datetimebox("spinner");
var date=c.calendar("options").current;
var h=t.timespinner("getHours");
if(f=="H"){
h+=n;
}
var m=t.timespinner("getMinutes");
var x=m%10;
if(x>0&&x<5){//1,2,3,4
m-=x;
}else if(x>5&&x<10){//6,7,8,9
m+=(10-x);
}
if(f=="M"){
m+=n;
}
var s=0;//t.timespinner("getSeconds");
return new Date(date.getFullYear(),date.getMonth(),date.getDate(),h,m,s);
}; function _b52(_b55,_b56,_b57){
var opts=$.data(_b55,"datetimebox").options;
$(_b55).combo("setValue",_b56);
if(!_b57){
if(_b56){
var date=opts.parser.call(_b55,_b56);
$(_b55).combo("setText",opts.formatter.call(_b55,date));
$(_b55).combo("setValue",opts.formatter.call(_b55,date));
}else{
$(_b55).combo("setText",_b56);
}
}
var date=opts.parser.call(_b55,_b56);
$(_b55).datetimebox("calendar").calendar("moveTo",date);
$(_b55).datetimebox("spinner").timespinner("setValue",_b58(date));
function _b58(date){
function _b59(_b5a){
return (_b5a<10?"0":"")+_b5a;
};
var tt=[_b59(date.getHours()),_b59(date.getMinutes())];
if(opts.showSeconds){
tt.push(_b59(date.getSeconds()));
}
return tt.join($(_b55).datetimebox("spinner").timespinner("options").separator);
};
}; function _b53(_b54){
var opts=$.data(_b54,"datetimebox").options;
var date=_b4e(_b54);
_b52(_b54,opts.formatter.call(_b54,date));
$(_b54).combo("hidePanel");
}; function _b4e(_b4f){
var c=$(_b4f).datetimebox("calendar");
var t=$(_b4f).datetimebox("spinner");
var date=c.calendar("options").current;
return new Date(date.getFullYear(),date.getMonth(),date.getDate(),t.timespinner("getHours"),t.timespinner("getMinutes"),t.timespinner("getSeconds"));
};

修改之前:

修改之后:

扩展 jQuery datebox控件按钮的更多相关文章

  1. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

  2. 给EasyUI的DateBox控件添加清除button

     EasyUI中间DateBox控制甚至没有被清除button.例如下面的附图: 真是不可思议,对于要求日期格式必须选择的情况下,不能清空日期,很不方便.      尽管能够通过手工改动EasyU ...

  3. jquery 分页控件2

    jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...

  4. jquery 分页控件1

    jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...

  5. jQuery树形控件zTree使用小结

    作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...

  6. jQuery操作控件

    在项目中添加前台控件radio,操作两个div的显示和隐藏,其实是一个很简单的问题,但是费了老大劲才完成,也就是jQuery操作控件的一些基础知识.方法有三种,简单介绍: 1.给元素设置style属性 ...

  7. 精确到秒的JQuery日期控件

    项目中需要用到精确到秒的日期控件,到网上搜了一下,发现有一个JQuery控件可以实现该功能---TimerPicker.但是官网上没有提供该控件的完整Demo,而且没有提供汉化包,所以自己汉化了一下, ...

  8. Jquery获得控件值的方法

    一 Jquery获得服务器控件值的方法 由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<a ...

  9. android 让一个控件按钮居于底部的几种方法

    android 让一个控件按钮居于底部的几种方法1.采用linearlayout布局:android:layout_height="0dp" <!-- 这里不能设置fill_ ...

随机推荐

  1. Eclipse中部署ES源码运行

    https://stackoverflow.com/questions/40924671/how-to-build-elasticsearch-source-code-using-gradle Gra ...

  2. Linux下服务器搭建

    一.安装前准备工作 yum -y install gcc   yum -y install gcc-c++   yum -y install make yum -y install ncurses-d ...

  3. 用matplotlib绘制漫画风格的图表

    自从有了计算机,便很少有人手工绘制图表了.计算机绘制出的图表横平竖直,可以随意使用各种颜色,也完全不用担心画错需要重来的问题. 但有没有一种感觉,看多了工整的图表,变得有些审美疲劳.在各行各业逐渐过渡 ...

  4. MSSQL为单独数据库创建登录账户

    如果要为一个数据库创建一个独立的账号需要这个数据库为包含数据库 当前(非包含)的数据库所面临的问题在描述什么是包含数据库之前,先了解一下为什么会出现包含数据库.当前的数据库有一些问题,如下:1.在数据 ...

  5. Ubuntu 16.04 LTS安装Docker并使用加速器

    参考优酷:http://v.youku.com/v_show/id_XMTkxOTYwODcxNg==.html?spm=a2h0k.8191407.0.0&from=s1.8-1-1.2 首 ...

  6. sonarQube安装及本机扫描C#项目

    因项目需要,需要使用sonarQube对代码进行扫描并查看,因对sonarQube不熟悉,所以先在本机搭建测试环境. 参考了张老师的博客:http://www.cnblogs.com/danzhang ...

  7. HDU 3339 In Action【最短路+01背包模板/主要是建模看谁是容量、价值】

     Since 1945, when the first nuclear bomb was exploded by the Manhattan Project team in the US, the n ...

  8. JavaWeb中常见的乱码处理(亲测)

    常见编码方式: ISO-8859-1  西欧码 GB2312  简体中文码 GBK   大五码 UTF-8 全球码(推荐) 1.页面(HTML,JSP,Servlet) <%@ page lan ...

  9. 洛谷——P1958 上学路线_NOI导刊2009普及(6)

    P1958 上学路线_NOI导刊2009普及(6) 题目描述 你所在城市的街道好像一个棋盘,有a条南北方向的街道和b条东西方向的街道.南北方向的a条街道从西到东依次编号为l到a,而东西方向的b条街道从 ...

  10. Linux含交互的自动登录脚本

    近来经常要通过ssh登录服务器,每次输入命令和密码很麻烦,查资料发现有两种解决,一种是本地创建密钥直接登录,另一种是写个脚本. 这里介绍第二种方法,第一种资料也很多,但是觉得没啥意思. 先上脚本: # ...