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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
vue-router 路由传参用法实例分析
Mar 06 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获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
Python IDLE清空窗口的实例
2018/06/25 Python
django项目搭建与Session使用详解
2018/10/10 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Python timeit模块的使用实践
2020/01/13 Python
python实现串口通信的示例代码
2020/02/10 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
Django如何重置migration的几种情景
2021/02/24 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
施工安全汇报材料
2014/08/17 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
Python3 如何开启自带http服务
2021/05/18 Python