When using easyui to get JSON time data, it is usually a long string of numbers rather than the normal time format like 2018-11-01 we want.

At this point, we need to use the JSON time format, and convert the time to the format we want.

General conversion format

The previous "toLocaleDateString()" was used, but bugs were found when it was used. Different browsers have different parsing results for "toLocaleDateString()", so it's easy to cause that the previous day's debugging, discovery and display are normal, and the next day there will be time grid problems.

Later, I found that this method is more suitable than toLocaleDateString().

Don't talk much, just go to the code

{field:'setupdate',title:'time',width:100,align:'center',formatter:formatterdate,editor:{
				type:'datebox',
				options:{
	
					required:true,
				}
			}}  //Using easyUI DataGrid data grid


 function formatterdate(val, row) { //Create a time conversion function outside to call in field

var date = new Date(val); return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(); }

In this way, the time can be displayed normally after processing. Of course, this conversion function can also be written directly in the field, but for the sake of code beauty, it is recommended to write it outside.

When performing in-line editing after formatting, it is found that the converted time cannot be assigned to the datebox when modifying and editing is started. At the same time, the date selected by the datebox cannot be transferred to the background.

In this case, use the $. Extend method of JQuery to extend the data grid's editors

 1 $.extend($.fn.datagrid.defaults.editors, {
 2             datebox : {
 3                 init : function(container, options) {
 4                     var input = $('<input type="text">').appendTo(container);
 5                     input.datebox(options);
 6                     return input;
 7                 },
 8                 destroy : function(target) {
 9                     $(target).datebox('destroy');
10                 },
11                 getValue : function(target) {
12                     return $(target).datebox('getValue');//Get old value
13                 },
14                 setValue : function(target, value) {
15                     console.info(formatterdate(value));
16                     $(target).datebox('setValue', formatterdate(value));//Format date for new value
17                 },
18                 resize : function(target, width) {
19                     $(target).datebox('resize', width);
20                 }
21             }
22         });

In this way, a series of operations can be carried out after processing,