1. Home
  2. Forum
  3. Angular - EJ 2
  4. DatePicker seems to randomly subtract hours of Date object

DatePicker seems to randomly subtract hours of Date object

Hi!
I'm using the DatePicker in a Grid edit template. If a user doesn't enter any Date, the Picker "from" I need to set the Date to 1753-01-01T00:00:00.
same with the "until" DatePicker - there I need the Date 9998-12-31T00:00:00.

The backend uses .NET Core 2.1.4. The problem is (probably because of Date parsing back and forth) when I edit a record in the grid and don't even touch
the date, the resulting (and persisted) Date will just be one hour less than the Date (time) it used before.

So it will never really save the Date as 9998-12-31T:00:00:00 -> the first saved Date has the value 9998-12-30T23:00:00

Any idea how to fix this?

Here is the code I'm using:

this.datepickVonSettings = {
create: () => {
this.vonElem = document.createElement('input');
return this.vonElem;
},
read: () => {
return this.datePickerVonObj.value;
},
destroy: () => {
this.datePickerVonObj.destroy();
},
write: (args: { rowData: Object; column: Column }) => {
this.datePickerVonObj = new DatePicker({
value: new Date(args.rowData[args.column.field]),
floatLabelType: 'Never'
});
this.datePickerVonObj.appendTo(this.vonElem);
}
};

My Controller:

var recordToAdd = new KlientPflegestufe
            {
                PflegestufeId = Guid.NewGuid(),
                KlientId = value.klientId,
                Bis = value.bis.HasValue ? value.bis.Value : new DateTime(9998, 12, 31, 0, 0, 0),
                Von = value.von.HasValue ? value.von.Value : new DateTime(1753, 1, 1, 0, 0, 0),
            };


5 Replies
VA Venkatesh Ayothi Raman Syncfusion Team September 19, 2018 05:10 PM UTC

Hi Paul, 

Thanks for contacting Syncfusion support. 

We have tried to reproduce the reported problem from our side by creating a sample. But we could not reproduce the reported problem. We have prepared a sample for your convenience. Please download the sample from the link below, 
 
We are also using the same data shared in the incident in our sample. Please refer the code below, 

[OrderDetails.cs] 

order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(9998, 12, 31, 0, 0, 0), "Berlin", . . . , "Kirchgasse 6")); 

 
If you still face the issue, please get back to us with the following details, 

  1. Share the exact scenario/proper replication procedure.
  2. Share the full grid code example.
 
We suspect that the cause of the issue may be due to servertimezone difference. For setting (GMT-1) time, you need to set ej.data.DataUtil.serverTimezoneOffset = 1. Please find the below code example for your reference. 
 
[code example] 
@* Syncfusion Essential JS 2 Scripts *@  
  
<script>  
    ej.data.DataUtil.serverTimezoneOffset = 1;  
</script>  

Please get back to us if you need further assistance. 

Regards, 
Venkatesh Ayothiraman. 


PK Paul Kocher September 20, 2018 09:54 AM UTC

Hello Venkatesh,

I tried setting the serverTimezoneOffset:


import * as ej from '@syncfusion/ej2-data/src/util';
constructor(private jwtHelper: JwtHelperService) {
ej.DataUtil.serverTimezoneOffset = 1;
}

should this work?

The weird thing is, I console.logged the actionComplete. This is what happens:

    1. data:
    2.   von: Mon Jan 01 1753 00:00:00 GMT+0053 (Mitteleuropäische Normalzeit) {}
Shouldn't the timezone be the same for both dates?

In the C# Controller it shows the dates as following:

von: 31.12.1752 23:06:32
bis: 30.12.9998 23:00:00

If this doesn't help I'll prepare a sample for you...

Also here is a video of what happens when I save other parameters of the object. I'm not touching the date at all:



VA Venkatesh Ayothi Raman Syncfusion Team September 21, 2018 01:01 PM UTC

Hi Paul, 

We have analyzed the video that you have shared with us. The date value is not updated based on the local time zone.  This is the cause of this issue. To overcome this problem, we suggest you to set the “serverTimezoneOffset” based on the following code. Please use the following code in your sample to overcome this time zone problem. 

[ts] 
 
import { ..., DataUtil} from '@syncfusion/ej2-data'; 
... 
 
 
@Component({ 
    ... 
}) 
export class FetchDataComponent { 
    ... 
    ngOnInit(): void { 
        DataUtil.serverTimezoneOffset = (2 * (new Date().getTimezoneOffset() / 60));   //Set the servertimezoneoffset 
       this.parentData = new DataManager({ 
            ... 
       }); 
        ... 
    } 
} 


Please get back to us if you need further assistance. 

Regards, 
Venkatesh Ayothiraman. 


PK Paul Kocher September 24, 2018 09:04 AM UTC

Hi Venkatesh,

I tried your suggestion but I'm still facing the same issues with the Date being displayed wrong.

My first DatePicker always shows GMT+0053 and the other one show GMT+001.

This only seems to happen when I'm using the DataManager.

Is it possible to use the DataManager only for inserting, updating and deleting?

If I get the response from the server without DataManager the values are correct:

1753-01-01T00:00:00
9998-12-31T00:00:00

VA Venkatesh Ayothi Raman Syncfusion Team September 26, 2018 09:35 AM UTC

Hi Paul, 

Thanks for contacting Syncfusion support. 

We suggest you to use the “RemoteSaveAdaptor” of Grid. With using “RemoteSaveAdaptor” allows you to perform all Grid Actions in client-side except the CRUD operations that should be interacted with server-side to persist data. You can perform CRUD operation at server side, and all other Grid actions at client-side when using RemoteSaveAdaptor. 

Datasource must be set to Json Property and set Adaptor type as RemoteSaveAdaptor to the Adaptor Property of Grid. CRUD operations can be mapped to server-side using updateUrl, insertUrl, removeUrl properties. Please refer the code example below, 

[HomeController.cs] 

        public IActionResult Index() 
        { 
            ViewBag.dataSource = OrdersDetails.GetAllRecords().ToList(); 
            return View(); 
        } 
        public ActionResult Update([FromBody]CRUDModel<OrdersDetails> value) 
        { 
            ... 
            return Json(value.value); 
        } 
        //insert the record 
        public ActionResult Insert([FromBody]CRUDModel<OrdersDetails> value) 
        { 
            ... 
            return Json(value.value); 
        } 
        //Delete the record 
        public ActionResult Delete([FromBody]CRUDModel<OrdersDetails> crudmodel) 
        { 
            ... 
            return Json(crudmodel); 
        } 

[Index.cshtml] 

<script type="text/javascript"> 
   window.griddata = '@Html.Raw(Json.Encode(ViewBag.dataSource))'; 
</script> 

[fetchdata.component.ts] 

    ngOnInit(): void { 
        this.value = (window as any).griddata; 
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
       this.parentData = new DataManager({ 
               json: JSON.parse(this.value), 
               updateUrl: "/Home/Update", 
               insertUrl: "/Home/Insert", 
               removeUrl:"/Home/Delete", 
               adaptor: new RemoteSaveAdaptor 
            }); 
        ... 
   } 

[fetchdata.componenet.html] 

<ejs-grid #Grid id='Grid' [dataSource]='parentData' ...> 
    ... 
</ejs-grid> 

Please get back to us if you need further assistance. 

Regards, 
Venkatesh Ayothiraman. 


Loader.
Up arrow icon