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 04 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
javascript表单事件处理方法详解
May 15 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
vue组件与复用详解
Apr 08 Javascript
详解vue中组件参数
Jul 09 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
JS合并两个数组的3种方法详解
Oct 24 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
php 中include()与require()的对比
2006/10/09 PHP
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
JS操作Cookies的小例子
2013/10/15 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现中文转换url编码的方法
2016/06/14 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
python实现斗地主分牌洗牌
2020/06/22 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
学生自我评价范文
2014/02/02 职场文书
销售员岗位职责范本
2014/02/03 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
教学评估实施方案
2014/03/16 职场文书
考核评语大全
2014/04/29 职场文书
公司活动总结怎么写
2014/06/25 职场文书
金融专业求职信
2014/08/05 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
用Python实现Newton插值法
2021/04/17 Python
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android