jqxGrid date formating - Javascript, HTML5, jQuery Widgets

Tagged: date, dd.mm.yyyy, format, jqxgrid, local time

This topic contains 20 replies, has 4 voices, and was last updated by jgarcias 9 years ago.

Viewing 15 posts - 1 through 15 (of 21 total)

1 2 →

Author

jqxGrid date formating Posts
February 14, 2013 at 4:22 pm jqxGrid date formating #15244

SkippingAdi
Participant

Hi

I have a jqxGrid that loads data by a jqxDataAdapter:

            var source =

                {

                    url: “controller/action”,

                    datatype: “json”,

                    datafields: [

                        { name: “ID”, type: “number” },

                        { name: “Name”, type: “string” },

                        { name: “SN”, type: “string” },

                        { name: “Birthdate”, type: “date”, format: ‘dd.MM.yyyy’ },

                        { name: “Gender”, type: “string” },

                    ]

                };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $(“#jqxgrid”).jqxGrid(

                {

                    width: config.northContainer[0].clientWidth,

                    height: config.northContainer[0].clientHeight

                    theme: theme,

                    source: dataAdapter,

                    columnsresize: true,

                    columns: [

                        { text: ‘ID’, dataField: ‘ID’, width: 80 },

                        { text: ‘Name’, dataField: ‘Name’, width: 100 },

                        { text: ‘SN’, dataField: ‘SN’, width: 100 },

                        { text: ‘Birthdate’, dataField: ‘Birthdate’, width: 100 },

                        { text: ‘Gender’, dataField: ‘Gender’, width: 100 },

                    ]

                });

Problem:
The date column contains data like: 1988-05-23T00:00:00.000. How can I format it so that it is displayed like 23.05.1998 (dd.MM.yyyy, without time part)? As you can see I tried already to format it in the datasource, but this seems not to work. I also tried to format it in the grid cell with cellsformat: ‘dd.MM.yyyy’ or cellsformat: ‘d’ but neither of theme solved the problem.

Is there a solution for that or is realy necessary to format the date on the server as expected string and send it as string to your widget?

Please help

Regards
Adrian

February 14, 2013 at 5:21 pm jqxGrid date formating #15253

Peter Stoev
Keymaster

Hi Adrian,

You may specify formatting to the columns, too by using the column’s cellsformat property.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 14, 2013 at 10:59 pm jqxGrid date formating #15265

SkippingAdi
Participant

Hi Peter

Thank you for fast reply.

As I have written in my post I tried this option already. And the date was not formatted as expected. Do you have an example of such an cellsformat string so that a date in the format 1988-05-23T00:00:00.000 is displayes as 23.05.1988? Can you modify my example above so that it should work? Please remember that I’m located in switzerland and thus browser as well as operating system settings are all set to German (Switzerland) or similar settings and not to ‘English’ settings.

Please help.

Regards
Adrian

February 14, 2013 at 11:32 pm jqxGrid date formating #15266
Peter Stoev
Keymaster
Hi Adrian,

The format in the Grid’s source object should be set to the same format as in your data source, if the built-in Date parsing is unable to parse your Date string. By specifying a format in the source object, the Grid will use regular expressions to build a JS Date object from your Date string which comes from the JSON Data.

The Grid’s cellsformat formats a Date object to a String representation appropriate for the users.

I also prepared a sample with jQWidgets 2.7
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
     
            var data = '[{"date": "1988-05-23T00:00:00.000"}]';
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'date', type: 'date' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 300,
                source: dataAdapter,
                columns: [
                    { text: 'date', datafield: 'date', cellsformat: 'dd.MM.yyyy' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
February 15, 2013 at 9:54 am jqxGrid date formating #15292

SkippingAdi
Participant

Hi Peter

Thank you for your help.
Unfortunately your example doesn’t work. I have copied it into a new asp.net mvc 4.0 web application and it doesn’t format the date.

Below Image of the output:

Any more ideas?
Adrian

February 15, 2013 at 10:48 am jqxGrid date formating #15293

SkippingAdi
Participant

Hi all

One more note from my side as I’m digging deeper and deeper into this bug:

By using the usual libraries as Peter as included in his example the following line of code returns:

new Date(Date.parse(‘1988-05-23T00:00:00.000’)) ==> NAN

Then I tried a javascript library called iso8601.js (found here: https://github.com/csnover/js-iso8601) that replaces the usual date.parse(…) method and tried the above statement once again:

new Date(Date.parse(‘1988-05-23T00:00:00.000’)) ==> Mon May 23 02:00:00 UTC+0200 1988

and the date could be parsed into a javascript date object!

But unfortunately from that point seems no easy jquery or javaScript method to exist for formating this date object to dd.MM.yyyy format as for example $.datepicker.formatDate(‘dd.MM.yyyy’, ‘Mon May 23 02:00:00 UTC+0200 1988’) throws an exception.

I’m stuck with this problem.

Hope somebody can clarify it for me and especially give a solution to my original problem with date formating in jqxgrid cell.

Regards
Adrian

February 15, 2013 at 2:02 pm jqxGrid date formating #15304

Peter Stoev
Keymaster

Hi Adrian,

Have you tried my sample as it is which displays correctly the Date? If you would like, I can also post a jsfiddle which demonstrates that my sample works correctly with jQWidgets 2.7.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 15, 2013 at 2:16 pm jqxGrid date formating #15306

Peter Stoev
Keymaster

Hi Adrian,

Here’s the sample online: http://jsfiddle.net/jqwidgets/sGGZ3/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 15, 2013 at 3:06 pm jqxGrid date formating #15307

SkippingAdi
Participant

Hi Peter

Unfortunately the jsfiddle works like….
Your response pointed me to a new version 2.7 of your controls, while I’m working actualy with Version 2.6.1. Will give the new version a try and report my findings.

Regards
Adrian

February 15, 2013 at 3:35 pm jqxGrid date formating #15309

SkippingAdi
Participant

I have found the problem.

jsfiddle does not run on Internet Explorer! I tested it with Firefox.

Just installed jqWidgets Version 2.7 and tested it with Firefox and everything works fine!
It seems a problem with Internet Explorer (Version 8 on Windows 7 and Version 10 on Windows 8 as I have these two for testing)!

Testing my Website on these two computers formats the date wrong in IE! Tests with Firefox were made only on Windows 7 as I don’t have FF on Windows 8.

I need a working java script library that is compatible with the most popular browsers.

Please help!

Regards
Adrian

February 15, 2013 at 3:52 pm jqxGrid date formating #15310
Peter Stoev
Keymaster
Hi Adrian,

Sorry, I did not try the prepared sample with IE8.

In this scenario you need to set the “format” property, too.
```
    datafields: [
                    { name: 'date', type: 'date', format: "yyyy-MM-ddTHH:mm:ss.fff" }
                ]
```
Your Date string will be parsed to a JavaScript Date object by using regular expressions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
February 15, 2013 at 4:01 pm jqxGrid date formating #15312

SkippingAdi
Participant

Hi Peter

Ok, now it works in IE and FF. Great.

Thank you very much.

Regards
Adrian

June 6, 2014 at 1:18 pm jqxGrid date formating #55507

emrealtan
Participant

Hi Peter,
I’ve a problem with date typed columns too. Grid is adding 3 hours to date because of local time thing (GMT+3). I’ve tested your jsFiddle example and the problem exists in there too. My data has created according to local time already. So i don’t want to add extra +3 hours. What should i do?

Thanks…

Emre

June 6, 2014 at 1:26 pm jqxGrid date formating #55510

Peter Stoev
Keymaster

Hi Emre,

You can use a more full Date/Time format which includes the Time Zone’s information, too. Then in the datafield’s format property, specify your date format.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 6, 2014 at 1:48 pm jqxGrid date formating #55511

emrealtan
Participant

Hi Peter,

Thanks for quick response. Can you give me an example in JsFiddle? I didn’t understand your suggestion properly. My data doesn’t have time zone value. I think grid takes time zone value from system. Is there any way to prevent grid to considering system’s time zone?

Thanks a lot…

Emre
Author

Posts

Viewing 15 posts - 1 through 15 (of 21 total)

1 2 →

You must be logged in to reply to this topic.