IE 11 showing invalid date and chrome/firefox shows correct dates

Question

I am testing the following JSFiddle code that shows valid date in chrome and firefox and invalid date in IE 11.

Here's my Javascript code from the fiddle:

    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
    }   


    ],
});

Here's my CSS code from Fiddle:

body {  width: 100%; height: 100%; }

Here's my HTML code from the Fiddle:

<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>

Problem Description:

I added two console logs at the following location in the above code :

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 (in the console log) is displaying today's date for some reason which is incorrect as shown below:

Chrome and Firefox displays correct date as mentioned in the Fiddle. Here is screenshot from the chrome:

Could anyone tell me how can I fix IE date related issue in my JSFiddle code ?

The [Invalid Date ] message is comming from __proto__ function, this is due to the internal implementation of IE, so you don't need to worry about it, replace the line of code from "console.log(value)" to "console.log(value.toString());" — Leonidas Menendez, Apr 27 '18 at 19:07

score 0 · Accepted Answer · answered Apr 27 '18 at 19:08

0

The [Invalid Date ] message is comming from proto function, this is due to the internal implementation of IE, so you don't need to worry about it, replace the line of code from "console.log(value)" to "console.log(value.toString());"

answered Apr 27 '18 at 19:08

Leonidas Menendez

469
9
15

Thanks for looking into it. After changing also, I am facing the same issue. Here is the updated issue with `toString()` method. https://jsfiddle.net/moLzuy7k/9/ I changed these two lines `console.log("Test for Date Values after adding toString() method"); console.log(value.toString());` – Coder Apr 27 '18 at 19:21
I opened the url and don't see more Invalid Date messages: Test for Date Values after adding toString() method Fri Apr 27 2018 05:00:00 GMT-0600 (Central America Standard Time), please clear your console log – Leonidas Menendez Apr 27 '18 at 19:30
But it should not show today's date `Fri Apr 27 2018 05:00:00 GMT-0600 (Central America Standard Time),`. The dates I have hardcoded should display over there. Could you tell me if you are not seeing the today's date but the dates mentioned in the javascript code? Thanks – Coder Apr 27 '18 at 21:25
That's a format and casting issue use this format instead 2000/1/1 06:00:00.0 – Leonidas Menendez Apr 27 '18 at 22:38
Use this: { name: 'A', date: '2014/15/07 05:00:00.0',des:'This is for A' }, { name: 'A', date: '2016/16/08 06:00:00.0',des:'This is for 2A' }, { name: 'A', date: '2016/15/07 07:00:00.0',des:'This is for 3A' }, { name: 'B', date: '2016/15/07 07:00:00.0',des:'This is for B' }, ETC – Leonidas Menendez Apr 27 '18 at 22:42
I am getting it in the format `07/15/2014 05:00:00.0` from the server in my application so I can't change that. Is there any way to fix it keeping the same format ? – Coder Apr 27 '18 at 22:42
Parse the string comming from the server or use a library: Date.parse recognizes only specific formats, and you don't have the option of telling it what your input format is. In this case it thinks that the input is in the format mm/dd/yyyy, so the result is wrong. To fix this, you need either to parse the input yourself (e.g. with String.split) and then manually construct a Date object, or use a more full-featured library such as datejs.see these thread https://stackoverflow.com/questions/10430321/how-to-parse-a-dd-mm-yyyy-or-dd-mm-yyyy-or-dd-mmm-yyyy-formatted-date-stri – Leonidas Menendez Apr 27 '18 at 22:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/169969/discussion-between-coder-and-leonidas-menendez). – Coder Apr 27 '18 at 22:51

IE 11 showing invalid date and chrome/firefox shows correct dates

1 Answers1