EasyUI修改DateBox和DateTimeBox的默认日期格式示例


Posted in Javascript onJanuary 18, 2017

最近整理Easyui控件的时候,对Easyui的DateBox控件和DateTimeBox控件进行了梳理,而我之所以将EasyUI的DateBox控件和DateTimeBox控件放在一起,归为一类,是因为这两个控件没有什么区别,如果你非得说这两个控件有区别,也无非是DateTimeBox控件后面除了基本的年月日之外带上了小时或者分钟或者秒什么的,更何况,这两个控件在进行日期格式化时所采用的方法也是一样的。

DateBox介绍:

Demo实例参看:http://www.jeasyui.com/demo/main/index.php?plugin=DateBox&theme=default&dir=ltr&pitem=

属性方法介绍参看: http://www.jeasyui.com/documentation/index.php#

DateTimeBox介绍:

Demo实例参看:http://www.jeasyui.com/demo/main/index.php?plugin=DateTimeBox&theme=default&dir=ltr&pitem=   

属性方法介绍参看:http://www.jeasyui.com/documentation/index.php#

控件的默认格式:

 DateBox控件默认的日期格式是:                           DateTimeBox控件默认日期格式是:

EasyUI修改DateBox和DateTimeBox的默认日期格式示例                  EasyUI修改DateBox和DateTimeBox的默认日期格式示例         

 这种显示的格式都是:mm/dd/yyyy,对于我们中国人来说,并不适合我们的习惯,同时,他们夹带了“Today”、“Ok”、“Close”等字样,如果就这么给用户使用,虽然说当前这个社会,我们需要面向国际,但软件的使用者还是我们自己中国客户,所以说问题就来了~~~~~

问题一:英文改中文

解决方法:引入easyui-lang-zh_CN.js

注意:

第一:Easyui引用js时,要先引入jQuery.min.js、其次是jquery.easyui.min.js,最后是easyui-lang-zh_CN.js,存在顺序关系。

第二:引入easyui-lang-zh_CN.js后,相应的提示信息也会改变,同时改变了这两个控件的日期默认显示格式,为:yyyy-mm-dd,效果如下:                               

EasyUI修改DateBox和DateTimeBox的默认日期格式示例                                

EasyUI修改DateBox和DateTimeBox的默认日期格式示例

问题二:日期格式改正

这两个控件在修改日期格式上都可以采用以下两种方法,我现在已以DateTimeBox为例,说明他们是如何实现的。

方法一:split函数+正则表达式

定义日期格式: 
 <input class="easyui-datetimebox" data-options="formatter:ww4,parser:w4" style="width:200px;"> yyyy年mm月dd日hh点</input> 
 <script type="text/javascript"> 
  function ww4(date){ 
   var y = date.getFullYear(); 
   var m = date.getMonth()+1; 
   var d = date.getDate(); 
   var h = date.getHours(); 
   return y+'年'+(m<10?('0'+m):m)+'月'+(d<10?('0'+d):d)+'日'+(h<10?('0'+h):h)+'点'; 
    
  } 
  function w4(s){ 
   var reg=/[\u4e00-\u9fa5]/ //利用正则表达式分隔 
   var ss = (s.split(reg)); 
   var y = parseInt(ss[0],10); 
   var m = parseInt(ss[1],10); 
   var d = parseInt(ss[2],10); 
   var h = parseInt(ss[3],10); 
   if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h)){ 
    return new Date(y,m-1,d,h); 
   } else { 
    return new Date(); 
   } 
  } 
 </script>

显示效果如下:

EasyUI修改DateBox和DateTimeBox的默认日期格式示例                 

方法二:substring函数

定义日期格式: 
 <input class="easyui-datetimebox" data-options="formatter:ww3,parser:w3" style="width:200px;"> yyyy/mm/dd hh-mm-ss</input> 
 <script type="text/javascript"> 
  function ww3(date){ 
   var y = date.getFullYear(); 
   var m = date.getMonth()+1; 
   var d = date.getDate(); 
   var h = date.getHours(); 
   var min = date.getMinutes(); 
   var sec = date.getSeconds(); 
   var str = y+'/'+(m<10?('0'+m):m)+'/'+(d<10?('0'+d):d)+'/'+' '+(h<10?('0'+h):h)+':'+(min<10?('0'+min):min)+':'+(sec<10?('0'+sec):sec); 
   return str; 
  } 
  function w3(s){ 
   if (!s) return new Date(); 
   var y = s.substring(0,4); 
   var m =s.substring(5,7); 
   var d = s.substring(8,10); 
   var h = s.substring(11,14); 
   var min = s.substring(15,17); 
   var sec = s.substring(18,20); 
   if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h) && !isNaN(min) && !isNaN(sec)){ 
    return new Date(y,m-1,d,h,min,sec); 
   } else { 
    return new Date(); 
   } 
  } 
 </script>

显示效果如下:

EasyUI修改DateBox和DateTimeBox的默认日期格式示例

注意:

方法二不适合将日期格式改为类似于yyyy-m-d h-m-s,理由:Substring函数是截取字符串,而在yyyy-m-d hh-mm-ss这种日期格式中m、d、h、m、s可能会存在一位数和二位数,整个日期的长度不固定,因此在截取的时候,选取的字符位置不能固定。

总结

这两种方法的本质一样,不管是哪种解决方式,它的原理都是不变的,主要是借用Formatter和Parser函数,其中Formatter函数使得选择日期后将其格式化为我们需要的格式,Parser是分析字符串的函数,这个函以'date'为参数并返回一个日期。问题来了,不光是要知道它们的解决方式,还要知道它们是怎么产生的,应该怎么从根本上解决这个问题,这些解决方式背后的本质是什么。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。      

Javascript 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 #Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 #Javascript
js实现消息滚动效果
Jan 18 #Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 #Javascript
微信小程序的动画效果详解
Jan 18 #Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 #Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 #Javascript
You might like
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
WINXP下apache+php4+mysql
2006/11/25 PHP
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
javascript json2 使用方法
2010/03/16 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
python批量同步web服务器代码核心程序
2014/09/01 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
翻译学院毕业生自荐书
2014/02/02 职场文书
幼师大班个人总结
2015/02/13 职场文书
面试通知邮件
2015/04/20 职场文书
生产设备维护保养制度
2015/08/06 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript