EasyUI Modify Datebox and DateTimeBox’s default date format example

When the EASYUI control is collected, the Easyui’s DateBox control and the DateTimeBox control are combed, and I am placing the EASYUI’s DateBox control and the DateTimebox control, it is because these two controls are not What is the difference, if you have a difference between these two controls, it is nothing more than the DateTimeBox control, which is more than the basic annual month, or more, these two controls are in progress format. The method used in the time is also the same.

Datebox introduction:

DEMO instance reference: http://www.jeasyui.com/demo/main/index.php? Plugin = datebox & theme = default & dir = LTR & PITEM =

Attribute method introduction to see: http://www.jeasyui.com/Documentation/index.php#

Datetimebox introduction:

Demo instance See: http://www.jeasyui.com/demo/main/index.php? Plugin = datetimebox & theme = default & dir = LTR & PITEM =

Attribute method introduction to see: http: // Www.jeasyui.com/documentation/index.php#

Control default format:

DateBox control default date format is: DateTimeBox control default date format is:

EasyUI修改DateBox和DateTimeBox的默认日期格式示例 This display is: mm / dd / yyyy, for our Chinese, is not suitable for our habits, and they are entrained with words such as “Today”, “OK”, “close”, if Just use it to the user, although the current society, we need to be international, but the user is still our own Chinese customers, so the problem is coming ~~~~~ EasyUI修改DateBox和DateTimeBox的默认日期格式示例

Question : English to Chinese

Introduction Easyui-Lang-en_cn.js


When the EASYUI quotes JS, First introduced jQuery.min.js, followed by jQuery.easyui.min.js, and finally Easyui-Lang-en_cn.js, there is a sequential relationship.

After introducing Easyui-Lang-en_cn.js, the corresponding prompt information will also change while changing the date default display format of the two controls, for YYYY-MM-DD The effect is as follows:


Problem 2: Date format correction


These two controls The following two methods can be used in the date format, I have now used DateTimeBox as an example to explain how they are implemented.

Method 1: Split function + regular expression

Defines the date format:

YYYY MM month DD day hh point

Function WW4 (Date) {var y = Date.Getfullyear (); var m = Date.getMonth (+1; var d = Date.getdate (); var h = DATE.GETHOURS (); return y + ‘year’ + (M

   Display effect As:   <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(); 
  Method 2: Substring function  
Defines the date format:

YYYY / MM / DD HH -mm-ss

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 EasyUI修改DateBox和DateTimeBox的默认日期格式示例

The display effect is as follows:
  Note:    Method 2 is not suitable to change the date format to YYYY-MD HMS, : The subString function is an intercept string, and in the date format of YYYY-MD HH-MM-SS, there will be one digit and two digits, and the length of the entire date is not fixed. So when interception, the selected character position cannot be fixed. <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(); 
The essence of these two methods, no matter which solution, Its principle is constant, mainly borrowing FORMATter and Parser functions, where the Formatter function makes it formatted to the format we need after the selection date, and Parser is a function of analyzing strings, which is the parameter with ‘Date’ and returns a date. The problem is coming, not only to know their solution, but also know how they produce, how to solve this problem fundamentally, what is the essence behind these solutions.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment