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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
JavaScript 事件系统
Jul 22 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
百度地图api如何使用
Aug 03 Javascript
javascript中 try catch用法
Aug 16 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 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的array_multisort()使用方法介绍
2012/05/16 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
Python3 max()函数基础用法
2019/02/19 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
老师的检讨书
2014/02/23 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
档案信息化建设方案
2014/05/16 职场文书
诚信承诺书模板
2014/05/26 职场文书
学校节能减排方案
2014/06/13 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
python playwrigh框架入门安装使用
2022/07/23 Python