Я тестирую код , следующий за кодом JSFiddle , который показывает действительную дату в chrome и firefox и недопустимую дату в IE 11.
Вот мой код Javascript из скрипки:
var data = [
{ name: 'A', date: '07/15/2014 05:00:00.0',des:'This is for A' },
{ name: 'A', date: '08/16/2016 06:00:00.0',des:'This is for 2A' },
{ name: 'A', date: '07/15/2015 07:00:00.0',des:'This is for 3A' },
{ name: 'B', date: '07/15/2016 07:00:00.0',des:'This is for B' },
{ name: 'B', date: '08/16/2016 07:00:00.0',des:'This is for 2B' },
{ name: 'B', date: '09/15/2016 07:00:00.0',des:'This is for 3B' },
{ name: 'C', date: '08/15/2015 07:00:00.0',des:'This is for C' },
{ name: 'D', date: '12/15/2015 07:00:00.0',des:'This is for D' },
{ name: 'E', date: '11/15/2015 07:00:00.0' ,des:'This is for E'}
];
var cl = function (s) { console.log(s); }
var isUsedKey = function (arrayOfObject, key)
{
for (var i = 0; i < arrayOfObject.length; i += 1)
{
if (arrayOfObject[i].key == key)
{
return true;
}
}
return false;
};
var array = [];
var object = {};
for (var i = 0; i < data.length; i++)
{
if (i == 0)
{
var newItem = {};
newItem.key = data[i].name;
newItem.dates = [data[i].date];
newItem.description = data[i].des;
array.push(newItem);
} else
{
var item = data[i];
var itemName = item.name;
var itemDate = item.date;
var itemDesc = item.des;
if (isUsedKey(array, itemName))
{
for (var j = 0; j < array.length; j++)
{
if (array[j].key == itemName)
{
var index = array[j].dates.length;
array[j].dates[index] = itemDate;
}
}
} else
{
var nextNewItem = {};
nextNewItem.key = itemName;
nextNewItem.dates = [itemDate];
nextNewItem.description = itemDesc;
array.push(nextNewItem);
}
}
}
var newSource = {
localdata: array,
datafields: [{
name: 'name',
type: 'string',
map: 'key'
}, {
name: 'date',
type: 'date',
map: 'dates>0'
},
{
name: 'des',
type: 'string',
map: 'description'
}
],
datatype: "array"
};
var newAdapter = new $.jqx.dataAdapter(newSource);
console.log(newAdapter);
// Adding for dropdown icon
var iconrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
console.log("Test for Date Values");
console.log(value);
return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">' + value + '<img src="https://www.jqwidgets.com/public/jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
}
$("#jqxgrid").jqxGrid({
source: newAdapter,
editable: true,
columns: [
{
text: 'Name',
datafield: 'name',
editable: false,
width: 100,
height: 100
},
{
text: 'Date',
datafield: 'date',
cellsformat: 'd',
columntype: 'combobox',
width: 200,
height: 200,
cellsrenderer: iconrenderer,
createeditor: function (row, column, editor)
{
var info = $('#jqxgrid').jqxGrid('getrowdata', row);
var groupName = info.name;
var dates = [];
for (var i = 0; i < array.length; i++)
{
if (array[i].key == groupName)
{
dates = array[i].dates;
}
}
editor.jqxComboBox({ autoDropDownHeight: true, source: dates, promptText: "Please Choose:" });
},
initeditor: function (row, column, editor)
{
var info = $('#jqxgrid').jqxGrid('getrowdata', row);
var groupName = info.name;
var dates = [];
for (var i = 0; i < array.length; i++)
{
if (array[i].key == groupName)
{
dates = array[i].dates;
}
}
editor.jqxComboBox({
autoDropDownHeight: true,
source: dates,
promptText: "Previous Dates:",
renderer: function (index_, label_, value_)
{
var formattedDate = "";
//if (!isEmpty(value_)) {
var dateObject = new Date(value_);
formattedDate = (dateObject.getMonth() + 1) + "/" + dateObject.getDate() + "/" + dateObject.getFullYear();
//}
return formattedDate;
},
renderSelectedItem: function (index, item)
{
var records = editor.jqxComboBox('getItems');
var currentRecord = records[index].label;
var formattedDate = "";
//if (!isEmpty(value_)) {
var dateObject = new Date(currentRecord);
formattedDate = (dateObject.getMonth() + 1) + "/" + dateObject.getDate() + "/" + dateObject.getFullYear();
//}
return formattedDate;
}
});
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue)
{
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
},
},
{
text: 'Description',
datafield: 'des',
editable: false,
width: 100,
height: 100
}
],
});
Вот мой код CSS от Fiddle:
body { width: 100%; height: 100%; }
Вот мой HTML-код со скрипки:
<div id='jqxWidget'>
<div id="jqxgrid"></div>
</div>
Описание проблемы:
Я добавил два консольных журнала в следующем месте в приведенном выше коде:
var iconrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
console.log("Test for Date Values");
console.log(value);
return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">' + value + '<img src="https://www.jqwidgets.com/public/jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
Internet Explorer 11 (в журнале консоли) по какой-то причине отображает сегодняшнюю дату, которая неверна, как показано ниже:
Chrome и Firefox отображают правильную дату, как указано в скрипте. Вот скриншот с хрома:
Может кто-нибудь сказать мне, как я могу исправить проблему с датой IE в моем коде JSFiddle?