Easyui time format

Problem description:

The frontend uses easyui and the backend uses spring MVC. The time format stored in the database is. However, the data returned from the backend to the front-end page is in JSON format, similar to 1402367297000, the date column datebox cannot be parsed. For example:

I am also easyui. I checked the information on the Internet and finally got it. Here I will record it.

Generally, the required date format is or. Therefore, you must first consider adding a date formatting plug-in.

Jquery date formatting

Add code in your own js to expand jquery. The Code is as follows:

Date. prototype. format = function (Format) {var o = {"m +": This. getmonth () + 1, // month "d +": This. getdate (), // Day "H +": This. gethours (), // "m +": This. getminutes (), // minute "s +": This. getseconds (), // second "q +": math. floor (this. getmonth () + 3)/3), // engraved "S": This. getmilliseconds () // millisecond} If (/(Y + )/. test (Format) format = format. replace (Regexp. $1, (this. getfullyear () + ""). substr (4-Regexp. $1 . Length); For (var k in O) if (New Regexp ("(" + K + ")"). test (Format) format = format. replace (Regexp. $1, Regexp. $1. length = 1? O [k]: ("00" + O [k]). substr ("" + O [k]). Length); Return format ;}

In this way, the date format function is added to jquery. You can simply try formatting:

Sample Code:

Console output result:

We can see that the time format has been converted to the format we need.
Formatdatebox
In the above sample code, we still need to specify the format. Here, a formatdatebox function is abstracted to display the date.
 
Function formatdatebox (value) {If (value = NULL | value = '') {return'';} var DT; If (value instanceof date) {dt = value;} else {dt = new date (value);} return DT. format ("yyyy-mm-dd"); // The extended Date Format method (implemented by the preceding plug-in )}
 
In the same simple test:
 
console.info(formatDatebox(1402367297000));
"1402367297000" is in JSON format and the output result is 2014-06-10. Test passed.
Datebox specifies formatter
After completing the preparations, you can apply the formatdatebox function to datebox. It is very easy to specify the fomatter of the column attribute of the DataGrid space as the formatdatebox function.
Example:
 
Columns: [{field: 'updatetime', Title: 'Update time', formatter: formatdatebox, sortable: True, Editor: 'datebox'}]
Then we can see that the actual effect is what we need.

But is it far from over? According to the above Code, we also found that we implemented line editing. When we double-click a record, the value in datebox is lost, the format obtained by the date selector is also different. In this case, we need to rewrite the DataGrid method so that the time format in the date control is correctly displayed and no data is lost during row editing of the DataGrid. The Code is as follows:
 
$. Extend ($. FN. dataGrid. defaults. editors, {datebox: {init: function (container, options) {var input = $ ('<input type = "text"> '). appendto (container); input. datebox (options); Return input;}, destroy: function (target) {$ (target ). datebox ('deststroy');}, getvalue: function (target) {return $ (target ). datebox ('getvalue'); // get old value}, setvalue: function (target, value) {console.info (formatdatebox (value); $ (target ). datebox ('setvalue', formatdatebox (value); // set the date format of the new value}, resize: function (target, width) {$ (target ). datebox ('resize', width );}}});
The following figure shows the effect after completion:


Okay, this is probably so much. Sorry, there is no complete demo provided here. Because of background interaction, static data can be used to simulate the presentation, but the time is not enough, I am not very interested in implementing it again. This is the first time.