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 相关文章推荐
JS实现图片翻书效果示例代码
Sep 09 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
JavaScript实现简单图片切换
Apr 29 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
PHP脚本的10个技巧(5)
2006/10/09 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php header()函数使用说明
2008/07/10 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
PHP模板解析类实例
2015/07/09 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
Vue头像处理方案小结
2018/07/26 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
浅谈Python __init__.py的作用
2020/10/28 Python
基于Python实现粒子滤波效果
2020/12/01 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
css3中transition属性详解
2014/09/02 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
大学生演讲稿范文
2014/01/11 职场文书
学年自我鉴定
2014/01/16 职场文书
销售主管岗位职责
2014/02/08 职场文书
车辆工程专业求职信
2014/06/14 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
世界遗产导游词
2015/02/13 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
反邪教学习心得体会
2016/01/15 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
python tkinter模块的简单使用
2021/04/07 Python
Python实现简单的猜单词
2021/06/15 Python
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js