Date Issue -showing one day old date in the UI

[walker1234Participant]

In the source, I’ve date related stuff defined like this:

const source: any = {
      datafields: [
        

        { name: "createdDate", type: "date" },
        

      ],

Similarly, in the columns, I’ve defined it like this:

const columns: IGridProps["columns"] = [
     

      {
        cellsformat: "d",
        datafield: "createdDate",
        text: "Created Date",
        width: 150
      },

And In the database, let’s say if I’ve CREATED_DATE as 30-OCT-19 as shown below :

In the widget, it always shows yesterday’s date like this and not today’s date which is what I’m looking for:

Why is it showing old date?

I have tried making following changes in the code as shown below:

const columns: IGridProps["columns"] = [
     

      {
        cellsformat: "MM/dd/yyyy",
        datafield: "createdDate",
        text: "Created Date",
        width: 150
      },

[HristoParticipant]

Hello walker1234,

I would like to suggest you use the format member for that particular datafield from the date type.
Please, try on that way:

const source: any = {
	....
	datafields: [
		{ name: "createdDate", type: "date", format: "dd-MMM-yy" }
	],
	....
};

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

You mean, I should only make the change in the source as you suggested and keep the following part as it is?

const columns: IGridProps["columns"] = [
     

      {
        cellsformat: "d",
        datafield: "createdDate",
        text: "Created Date",
        width: 150
      },

[HristoParticipant]

Hello walker1234,

Yes, I meant that.
I think maybe you tried it already.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

That didn’t help. I’m still seeing yesterday’s date. Can you tell me how to fix this issue?

[HristoParticipant]

Hello walker1234,

Please, try to use the beforeLoadComplete callback to check what data records you have.
Is the correct value for the mentioned case used there.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Can you tell me where can I define beforeLoadComplete call back? Let’s say if you have to define it in this example, could you tell me via an example, where it would go?

https://stackblitz.com/edit/react-ts-y7i3rr

[HristoParticipant]

Hello walker1234,

You could find more details about this in the API Documentation page for the jqxDataAdapter:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm?search=dataadapter

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Hi Histro,

So I checked the beforeLoadComplete callback to see what data records I get using the following piece of code :

beforeLoadComplete:(records:any):void=> {
        
        console.log("Testing Records inside BeforeLoadComplete");
        console.log(records);
      },

I saw the following in my web browser’s console:

When I expanded the 3rd array, I saw the following:

As you can see above, even though I created the record today, which is Dec17, the createdDate it’s pulling is Mon Dec 16 2019 18:00:00 GMT-0600. (Central Standard Time) which is one day old.

I checked in the database, I’m seeing correct date over there as shown in the screenshot below:

And I have checked the webservice response as well and I’m seeing correct date over there as shown below:

Can you tell me why beforeLoadComplete function is showing one day old date?

[HristoParticipant]

Hello walker1234,

How you send data to the Client-Side?
Please, check this case is this case has correct values.

It sounds like an incorrect time which could be fixed as you use the Time-Zone.
Please, take a look at this topic where have a similar discussion:
https://www.jqwidgets.com/community/topic/date-datafield-timezone-handling/#post-50654
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Hi Histro,

Here are answers to your question:

How you send data to the Client-Side?

It’s the Java webservice which is sending the data. Just like I mentioned in my above previous post. Attaching the screenshot below:

The below screenshot is for the record that I created on Dec 17 and which shows Dec 16 in the widget.

Secondly, I tried changing the celles format to cellsformat: "yyyy-MM-ddTHH:mm:ss-HH:mm", from cellsformat: "MM/dd/yyyy" and I’m still seeing old date as shown below:

The below screenshot is for record that I created on Dec 18 and it shows Dec 17 as shown below in the widget

[HristoParticipant]

Hello walker1234,

I mean to add this format not to the cell format but to the format of the receiving data in the particular datafield to map correct formatting.
If you have a datafield mydate then this should look like this below in the DataAdapter‘s “source” object:

var source = {
	datatype: "json",
	datafields: [
		{ name: 'mydate', type: 'date', format: 'MM/dd/yyyyThh:mm tt zzz' }
	],
	localdata: data
};

I would like to suggest you look at this example:
http://jsfiddle.net/rnd0pg2v/
Also, please, take a look at this tutorial, it could be useful.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts