Easyui Modifying the default date format for Datebox and Datetimebox

When I recently tidied up the Easyui control, I combed the Datebox control and Datetimebox control of Easyui, and I put Easyui control and Datebox control together, and grouped it into one class, Because there is no difference between these two controls, if you have to say that the two controls are different, it's just that the Datetimebox control takes hours or minutes or seconds beyond the basic date, not to mention that the two controls use the same method for formatting dates.

Datebox Introduction:

Demo example See:

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

Attribute method Introduction See:

http://www.jeasyui.com/documentation/index.php#

Datetimebox Introduction:

Demo example See:

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

Attribute method Introduction See:

http://www.jeasyui.com/documentation/index.php#

Default format for the control:

The default date format for the Datebox control is: The Datetimebox control's default date format is:

         

The format of this display is: mm/dd/yyyy, for us Chinese, is not suitable for our habits, at the same time, they carried the words "Today", "OK", "Close" and so on, if so to users, although the current society, we need to face the international, But the users of the software are our own Chinese customers, so that's the problem ~~~~~

Problem one: English to Chinese solution: Introducing Easyui-lang-zh_cn.js

is: http://www.softhy.net/soft/33695.htm

Attention:

First: Easyui reference JS, to first introduce jquery.min.js, followed by Jquery.easyui.min.js, and finally Easyui-lang-zh_cn.js, there is a sequential relationship.

Second: After the introduction of Easyui-lang-zh_cn.js, the corresponding prompt information will also change, while changing the default display format of the two controls, for: YYYY-MM-DD, the effect is as follows:

Question two: Date format correction Both controls can use the following two methods in the modified date format, and I now use Datetimebox as an example of how they are implemented. Method One: Split function + Regular expression

[JavaScript]

<div style="margin:20px 0;" ></div>
To define a date format:
<input class="Easyui-datetimebox" data-options= "Formatter:ww4,parser:w4" style= "width:200px;" > yyyy mm month dd Day hh point </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+' year ' + (m<10? ( ' 0 ' +m): m) +' month ' + (d<10? ( ' 0 ' +d):d) +' Day ' + (h<10? (  ' 0 ' +h): h) +' point ';
}
function W4 (s) {
var reg=/[\u4e00-\u9fa5]/ //using regular expressions to separate
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>

The display results are as follows:

Method Two: Substring function

[JavaScript]

<div style="margin:20px 0;" ></div>
To define a date format:
<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>

The display results are as follows:

Attention:

Method Two is not suitable to change the date format to resemble yyyy-m-d h-m-s, the reason: substring function is to intercept the string, and in yyyy-m-d hh-mm-ss such date format m, D, H, M, s may have a single number and two digits, the length of the entire date is not fixed, Therefore, the selected character position cannot be fixed at the time of interception.

To summarize the essence of the two methods, no matter what kind of solution, its principle is unchanged, mainly borrowing formatter and parser functions, wherein the formatter function makes the selection date after the format we need to format, parser is the function of parsing the string, This function takes ' date ' as a parameter and returns a date.       The problem comes, not only to know their solution, but also to know how they are produced, how to fundamentally solve the problem, what is the essence of these solutions. Source: http://blog.csdn.net/littlewolf766/article/details/7329123

Easyui Modifying the default date format for Datebox and Datetimebox