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 相关文章推荐
jQuery的运行机制和设计理念分析
Apr 05 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 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
咖啡与牛奶
2021/03/03 冲泡冲煮
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Django框架模板介绍
2019/01/15 Python
python语言基本语句用法总结
2019/06/11 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书