EasyUI: Example of modifying the default date format of DateBox and DateTimeBox, easyuidatebox

EasyUI: Example of modifying the default date format of DateBox and DateTimeBox, easyuidatebox

Recently, I sorted out the DateBox control and DateTimeBox control of Easyui, and put the DateBox control and DateTimeBox control of Easyui into one category, there is no difference between the two controls. If you have to say there is a difference between the two controls, it is nothing more than the hour, minute, or second behind the DateTimeBox control except for the basic year, month, and day, what's more, the two controls adopt the same method for date formatting.

DateBox introduction:

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

For details about the property method, 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 =

For details about the property method, see http://www.jeasyui.com/documentation/index.php #.

Default control format:

The default date format of the DateBox control is: the default date format of the DateTimeBox control is:

The display format is mm/dd/yyyy, which is not suitable for Chinese people. At the same time, they include the words "Today", "OK", and "Close". If this is the case for users, although the current society needs to be international oriented, however, the software users are still our own Chinese customers, so the problem arises ~~~~~

Question 1: Change English to Chinese

Solution: Introduce easyui-lang-zh_CN.js

Note:

First: Easyui reference js, 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 date of the two controls default display format, for: yyyy-mm-dd, the effect is as follows:

Problem 2: Date Format correction

The two controls can adopt the following two methods to modify the date format. I have used DateTimeBox as an example to illustrate how they are implemented.

Method 1: split Function + Regular Expression

Define the Date Format: <input class = "easyui-datetimebox" data-options = "formatter: ww4, parser: w4" style = "width: 200px; "> mm dd, yyyy at 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 + '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] // use a regular expression 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, S-1, d, h) ;}else {return new Date () ;}</script>

The display effect is as follows:

Method 2: substring Function

Define the 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, S-1, d, h, min, sec) ;}else {return new Date () ;}</script>

The display effect is as follows:

Note:

Method 2 is not suitable for changing the date format to a format similar to yyyy-m-d h-m-s. Reason: The Substring function intercepts strings, in the date format yyyy-m-d hh-mm-ss, m, d, h, m, and s may have one or two digits, the length of the entire date is not fixed, so the selected character location cannot be fixed during the truncation.

Summary

The two methods are essentially the same. No matter which solution is used, their principles remain unchanged. They mainly borrow the Formatter and Parser functions, the Formatter function allows you to format the selected date into the required format. Parser is a function used to analyze the string. This function uses 'date' as the parameter and returns a date. When the problem arises, we should not only know how they are solved, but also how they are generated, how they should be fundamentally solved, and what is the essence behind these solutions.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.