jqGrid下拉菜单日期显示NAN问题求助

Hey there! The problem you're seeing with dates showing up as NaN/NaN/NaN in your dropdowns boils down to string vs numeric timestamps. Here's what's going wrong and how to fix it:

Root Cause #

Your dates array is storing timestamps as strings (like '1481198400000'), but the Date constructor can't parse a raw string of digits as a valid date. When you call new Date('1481198400000'), it returns an Invalid Date object—hence the NaN values when you try to extract month/day/year.

Solution Steps #

We need to ensure timestamps are treated as numbers, not strings, when working with the Date object. Here are the key fixes:

1. Convert Date Strings to Numeric Timestamps During Data Grouping

When building your grouped array of names and dates, convert each date string to an integer:

// In the initial newItem creation:
newItem.dates = [parseInt(data[i].date, 10)];

// When adding to an existing date array:
array[j].dates[index] = parseInt(itemDate, 10);

// For new items later in the loop:
nextNewItem.dates = [parseInt(itemDate, 10)];

2. Simplify Combobox Renderer Functions

Now that your dates are numeric, the renderer functions will work correctly with new Date(value_). You can clean them up for readability:

renderer: function(index_, label_, value_) {
  const dateObject = new Date(value_);
  return `${dateObject.getMonth() + 1}/${dateObject.getDate()}/${dateObject.getFullYear()}`;
},
renderSelectedItem: function(index, item) {
  const dateObject = new Date(item.value);
  return `${dateObject.getMonth() + 1}/${dateObject.getDate()}/${dateObject.getFullYear()}`;
}

3. Optimize Editor Initialization

You don't need to reinitialize the entire combobox in initeditor—the setup from createeditor is already in place. Remove the duplicate code here to keep things clean.

Full Corrected Code Snippet #

Here's the updated code with all fixes applied:

var data = [{ name: 'A', date: '1481198400000' }, { name: 'A', date: '1481198400000' }, { name: 'B', date: '1552557600000' }, { name: 'B', date: '1497348000000' }, { name: 'B', date: '1487764800000' }, { name: 'C', date: '1491818400000' }, { name: 'D', date: '1491818400000' }, { name: 'E', date: '1552384800000' }];
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 = [parseInt(data[i].date, 10)]; // Convert to number
   array.push(newItem); 
 }
 else {
 var item = data[i]; var itemName = item.name; var itemDate = item.date;
 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] = parseInt(itemDate, 10); // Convert to number
 }
 }
 } else {
 var nextNewItem = {}; 
 nextNewItem.key = itemName; 
 nextNewItem.dates = [parseInt(itemDate, 10)]; // Convert to number
 array.push(nextNewItem);
 }
 }
}
var newSource = { localdata: array, datafields: [{ name: 'name', type: 'string', map: 'key' }, { name: 'date', type: 'date', map: 'dates>0', format: 'MM/dd/yyyy' }], datatype: "array" };
var newAdapter = new $.jqx.dataAdapter(newSource);
console.log(newAdapter);
// Adding for dropdown icon
var iconrenderer = function(row, columnfield, value, defaulthtml, columnproperties) { return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">' + newAdapter.formatDate(value, 'd') + '<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:", renderer: function(index_, label_, value_) { const dateObject = new Date(value_); return `${dateObject.getMonth() + 1}/${dateObject.getDate()}/${dateObject.getFullYear()}`; }, renderSelectedItem: function(index, item) { const dateObject = new Date(item.value); return `${dateObject.getMonth() + 1}/${dateObject.getDate()}/${dateObject.getFullYear()}`; } }); }, initeditor: function(row, column, editor) { // Removed duplicate combobox initialization }, cellvaluechanging: function(row, column, columntype, oldvalue, newvalue) { if (newvalue == "") return oldvalue; }, }], });

Now your dropdowns will display the correct formatted dates for each name group:

• Name A shows 12/08/2016 (from 1481198400000)
• Name B shows 06/13/2017, 03/24/2017, and 03/14/2019 (matching your timestamps)

内容的提问来源于stack exchange，提问作者Tan