We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Date values in the grid always subtracting one day

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


5 Replies 1 reply marked as answer

RS Rajapandiyan Settu Syncfusion Team December 30, 2022 09:27 AM UTC

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


Marked as answer

KA kalum January 3, 2023 03:28 AM UTC

Hi Rajapandiyan,

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

Regards

Kalum.



SG Suganya Gopinath Syncfusion Team January 4, 2023 01:36 PM UTC

Kalum,

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




KJ kapil jain replied to Suganya Gopinath January 3, 2024 03:24 PM UTC


<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!


DM Dineshnarasimman Muthu Syncfusion Team January 5, 2024 01:10 PM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon