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图像处理—平滑处理实现原理
Dec 28 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
js实现简单的随机点名器
Sep 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判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
js跳转页面方法总结
2014/01/29 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
JS作用域深度解析
2016/12/29 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
python3简单实现微信爬虫
2015/04/09 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python调用百度语音识别api
2018/08/30 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
django-filter和普通查询的例子
2019/08/12 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
公司年会演讲稿范文
2014/01/11 职场文书
音乐器材管理制度
2014/01/31 职场文书
售后服务承诺书模板
2014/05/21 职场文书
文秘应届生求职信
2014/07/05 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
工作检讨书范文
2015/01/23 职场文书
党员年度个人总结
2015/02/14 职场文书
销售会议开幕词
2016/03/04 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技