Date formatting not working except in editmode

[gfheMember]

Hi.

I’ve got a jqxGrid with a datetime column using Knockout bindings. The datetimes are coming from a webserver serialized as ISO8601 dates like this: “1950-03-16T16:40:01+01:00”

When the grid load the date is displayed as: 1950-03-16T16:40:01+01:00

When I enter edit mode it’s displayed like this: Torsdag, 03 16, 1950
(Torsdag is Thursday in Norwegian, the month (March) is in the wrong place, it should be 16 03)

If I click the jqxCalender icon in the cell the content changes to: Torsdag, Mars 16, 1950
(Mars is Norwegian for March)

If I select a date it changes to: “Wedensday, March 15, 1950”
Why did the language change?

The jquery.glob.no-NB.js is just a copy of jquery.glob.de-DE.js with strings translated.

Why is the language format all over the place? What am I missing?

Relevant code:

<div id="jqxGridSample" data-bind="jqxGrid: {
        source: people,
        editable: true,
        theme: 'metro',
        autoheight: true,
        selectionmode: 'singlecell',
        columns: [
                {
                    text: 'Id',
                    datafield: 'Id'
                }, {
                    text: 'First name',
                    datafield: 'Firstname'
                }, {
                    text: 'Last name',
                    datafield: 'Lastname'
                }, {
                    text: 'Company',
                    datafield: 'Company'
                }, {
                    text: 'City',
                    datafield: 'City'
                }, {
                    text: 'DoB',
                    datafield: 'DateOfBirth',
                    columntype: 'datetimeinput',
                    cellsformat: 'D',
                    width: 200,
                     createeditor: function (row, cellvalue, editor) {
                        editor.jqxDateTimeInput({ culture: 'no-NB' });
                    }      
                }, {
                    text: 'Active',
                    datafield: 'Active',
                    columntype: 'checkbox'
                }
            ]
    }"></div>
<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: Firstname"></td>
            <td data-bind="text: Lastname"></td>
            <td data-bind="text: Active"></td>
            <td data-bind="text: DateOfBirth"></td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(function () {
        var sampleData = [{ "Id": 1, "DateOfBirth": "1971-07-08T10:47:08Z", "Company": "Finale", "Active": true, "Firstname": "Hadley", "Lastname": "Calhoun", "NumberOfKids": 7, "City": "Shelton" }, { "Id": 2, "DateOfBirth": "1965-10-03T15:08:20+02:00", "Company": "Yahoo", "Active": false, "Firstname": "Emma", "Lastname": "Joyce", "NumberOfKids": 8, "City": "Port Jervis" }, { "Id": 3, "DateOfBirth": "1959-05-04T20:38:06+02:00", "Company": "Apple Systems", "Active": false, "Firstname": "Jerry", "Lastname": "Kerr", "NumberOfKids": 6, "City": "Hoboken" }, { "Id": 4, "DateOfBirth": "1976-10-12T11:01:31+02:00", "Company": "Chami", "Active": true, "Firstname": "Nasim", "Lastname": "Shaw", "NumberOfKids": 6, "City": "Kenosha" }, { "Id": 5, "DateOfBirth": "1950-03-16T16:40:01+01:00", "Company": "Google", "Active": false, "Firstname": "Alfonso", "Lastname": "Ruiz", "NumberOfKids": 6, "City": "Orlando" }]
        viewModel = {
            people: ko.observableArray(sampleData)
        };
        
        ko.applyBindings(viewModel);
    });
</script>

[Peter StoevKeymaster]

Hi gfhe,

That will not work because there is no datafields array definition in the provided code. Without datafields array definition, the Grid will not recognize the columns type and will not format the columns.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gfheMember]

Thanks Peter,

I know you can set a datafield definition when using a DataAdapter, is it possible to do that when using a Knockout-binding like above as well?

-Glenn

[Peter StoevKeymaster]

Hi Glenn,

You can use Knockout along with the jqxDataAdapter plug-in. Here’s a sample: griddataadapter.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gfheMember]

Thanks Peter.

So it’s not possible to make it work with the pure Knockout binding? Oh well, not a big problem. The code was a bit cleaner without the DataAdapter, but if it doesn’t work without it we’ll probably manage.

Thanks for the quick replies!

-Glenn

[Author]

Posts