Date values in the grid always subtracting one day

[kalum]

Hi,

I'm sending my grid data to the controller by JSON.stringify the dataSource. In that it always subtract one day from the existing date value of date column. I tried serverTimezoneOffset also. But no success. I have mentioned my code bellow.

@Html.EJS().Button("SaveProf").Content("Save").IconCss("e-icons e-save").Click("btnProfSaveClick").Render()

@(Html.EJS().Grid<object>("ProfileGrid").DataSource((IEnumerable<object>)ViewBag.Profilegriddata).Load("loadProfHdrGrid")

.DataBound("ProfGriddataBound").AllowFiltering().FrozenRows(0).FrozenColumns(0).Columns(col =>

{

col.Field("SecProfKey").HeaderText("SecProfKey").Width("50px").IsPrimaryKey(true).IsIdentity(true).AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Visible(true).Add();

col.Field("SecProfDes").HeaderText("SecProfDes").Visible(true).Width("150px").AllowEditing(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();

col.Field("EfctDt").HeaderText("EfctDate").Width("130").Edit(new { create = "dtp_create", read = " dtp_read", destroy = " dtp_destroy", write = " dtp_write" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format(new { type = "datetime", format = "yyyy/MM/dd" }).Add();

col.Field("IsAct").HeaderText("Is Active").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).EditType("booleanedit").DisplayAsCheckBox(true).Width("50px").Add();

col.Field("IsEdited").HeaderText("IsEdited").Width(50).Visible(true).Add();

})

.AllowPaging()

.Height("400")

.CellSave("ProfGridflagEditedRows")

.RowSelected("ProfGridrowselected")

.EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch).ShowConfirmDialog(false); })

.AllowPaging().PageSettings(page => page.PageCount(20)).AllowSorting()

.Render())

<script>

function loadProfHdrGrid(args) {

ej.data.DataUtil.serverTimezoneOffset = 1;

}

function btnProfSaveClick() {

var gridObj = document.getElementById('ProfileGrid')['ej2_instances'][0];

gridObj.editModule.batchSave();

var data = JSON.stringify(gridObj.dataSource);

$.ajax({

url: '@ViewBag.RootFolder'+'/SectionProfileSetup/SaveProfileHdrData',

type: 'post',

data: { pdata: data },

success: function (result) {

var gridObj = document.getElementById("ProfileGrid").ej2_instances[0];

gridObj.dataSource = ej.data.DataUtil.parse.parseJson(result);//have to pass JSON data to JsonAdaptor instead of JSON string

alert('Successfully Saved..!');

}

})

}

    var elem;

    var dtobj;

    function dtp_create(args) {

        // create target element

        elem = document.createElement('input');

        return elem;

    }

    function dtp_write(args) {

        dtobj = new ej.calendars.DateTimePicker({

            placeholder: 'Select DateTime',

            value: args.rowData.EfctDt

        });

        dtobj.appendTo(elem);

    }

    function dtp_destroy() {

        // destroy the component after save

        dtobj.destroy();

    }

    function dtp_read(args) {

        // read the custom component(uploader) value

        return dtobj.value;

    }

</script>

Thank you and regards

Kalum

[Rajapandiyan Settu]

Hi Kalum,

By default, if you stringify the date value it will be converted to the UTC time. Please find the below links,

https://stackoverflow.com/questions/1486476/json-stringify-changes-time-of-date-because-of-utc
https://stackoverflow.com/questions/42196807/json-stringify-returns-wrong-value-for-the-date-object

Why do you want to send the whole grid data to the server? When you stringify the large data, we cannot post it to the server due to serialization/deserialization issues.

If you want to save the edited data to the server, you can achieve this by using URLAdaptor and RemoteSaveAdaptor. Please refer to the below documentation for more information,

URL Adaptor:

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/remote-data#handling-on-demand-grid-actions

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/persisting-data-in-server#using-url-adaptor

RemoteSave Adaptor: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/remote-data#remote-save-adaptor

Regards,
Rajapandiyan S

[kalum]

Hi Rajapandiyan,

Thank you very much for the information and advice and will try that way.

Regards

Kalum.

[Suganya Gopinath]

Kalum,

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[kapil jain]

<GridComponent dataSource={orderData} childGrid={childGrid} allowSorting={true} allowResizing={true}

 autoFit={true}  editSettings={editSettings} ref={gridInstance} >

                    <ColumnsDirective>

           

                        <ColumnDirective field= 'id' headerText= 'ID'  width='125' textAlign='Right' isPrimaryKey={true}/>

                        <ColumnDirective field='ppMinId' headerText='ppMin Id' width='125'/>

                        <ColumnDirective field='deliveryDate'  headerText='Delivery Date' width='180' validationRules={validationRule}  editType='datepickeredit' format='M/d/yyyy' type='date' />

                    here ideliveryDate shows one day before in console. what i am getting from the server: deliveryDate: "2022-07-06T00:00:00" I am select 2022-05-06 from datepicker from the UI. it change it to

"deliveryDate":"2022-07-04T18:30:00.000Z", this is:

  useEffect(() => {

     

      //debugger;

      if (OrtecPostdata.NestedOrderLists.length === 0)

      {        

        return; // Skip the useEffect if count is zero

      }

      // Fetching  data here and sets the state variables

     // console.log("postdata",JSON.stringify(postdata));

      fetch('/BackhaulPOUpload/SaveOrtecOrder', {

        method: 'POST',

        headers: { "Content-Type": "application/json" },

        body: OrtecPostdata

    })

    .then((result) => {

     // debugger;

        console.log("check result:", result.statusText);  

        if (result.statusText === "OK") {

need help!

[Dineshnarasimman Muthu]

Hi Kapil,

By default, in EJ2 Grid the dateTime is shown with respect to the user device’s time zone. If the grid handles the date of UTC format, then we have converted this UTC time into user device’s time zone in the source which is finally displayed in the grid.

To overcome the problem, we suggest you to use the serverTimezoneOffset property of the DataUtil class in the load event of Grid to display the UTC time. So using this property you can set the time offset value of the required local time zone to display the datetime values accordingly.

This is demonstrated in the below code snippet,

  function load()

  {

    DataUtil.serverTimezoneOffset =0;

  }

 

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman M