jQuery EasyUI中的日期控件DateBox修改方法


Posted in Javascript onNovember 09, 2016

jQuery EasyUI中的日期控件DateBox很好用的,首先需要引入jquery文件,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<div> <input class="easyui-datebox"></input> </div>
</body>
</html>

效果为:

jQuery EasyUI中的日期控件DateBox修改方法 

这里是英文的,如果有要求用中文的,那么需要的改的几个地方,首先是月份的,找到下面的代码:

$.fn.calendar.parseOptions=function(_454){
var t=$(_454);
return $.extend({},$.parser.parseOptions(_454,["width","height",{firstDay:"number",fit:"boolean",border:"boolean"}]));
};
$.fn.calendar.defaults={width:180,height:180,fit:false,border:true,firstDay:0,weeks:["S","M","T","W","T","F","S"],months:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],year:new Date().getFullYear(),month:new Date().getMonth()+1,current:new Date(),onSelect:function(date){
}};
})(jQuery);

改成下面的对应的

$.fn.calendar.parseOptions=function(_454){
var t=$(_454);
return $.extend({},$.parser.parseOptions(_454,["width","height",{firstDay:"number",fit:"boolean",border:"boolean"}]));
};
$.fn.calendar.defaults={width:180,height:180,fit:false,border:true,firstDay:0,weeks:["一", "二", "三", "四", "五", "六", "日"], months:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], year:new Date().getFullYear(),month:new Date().getMonth()+1,current:new Date(),onSelect:function(date){
}};
})(jQuery);

这样就行了,还有一个时间格式的修改,默认的是5/27/2013,即月/日/年的格式,如果换成的2013-05-27这样的,官方也给出了代码,如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DateBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<div class="date">
<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input>
</div>
</body>
<script type="text/javascript">
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
}
function myparser(s){
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
}else{
return new Date();
}
}
</script>
</html>

这样的话,格式怎么变的话,都很好修改的!

以上这篇jQuery EasyUI中的日期控件DateBox修改方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
canvas绘制多边形
Feb 24 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 #Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 #Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 #Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 #Javascript
给easyui datebox扩展一个清空的实例
Nov 09 #Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 #Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 #Javascript
You might like
第十四节--命名空间
2006/11/16 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
JavaScript 乱码问题
2009/08/06 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
实现高性能javascript的注意事项
2019/05/27 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
python学生管理系统的实现
2020/04/05 Python
Python验证码截取识别代码实例
2020/05/16 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
校领导推荐信
2013/11/01 职场文书
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
药学专业大专生的自我评价
2013/12/12 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书