DatePickerEdit shows wrong day

[Jessica Goodrich]

Hello,

I have a grid using RemoteSaveAdaptor. The grid shows the correct day, but when I double click to edit it in dialog mode, it subtracts one day. I assume this is somehow timezone conversion stuff? How do I turn that off? There will be people in different timezones working on this. I just want it to display and save the date they put it. No weird fancy stuff. 

<e-grid-column

    field="StartDate"

    headerText="Start Date"

    editType="datepickeredit"

    format="MM-dd-yyyy">

</e-grid-column>

[Joseph Christ Nithin Issack]

Hi Jessica,

  Greetings from Syncfusion support.

   By default, the EJ2 Grid displays DateTime values based on the user's device time zone. If the grid is processing dates in UTC format, it internally converts UTC time to the user device's local time zone before displaying it.

   To address this issue and ensure consistency in the displayed data, we recommend to configure the serverTimezoneOffset property to 0 in the load event of the grid. This approach ensures that UTC time from the server is displayed without any time zone conversion on the client side.

Below is an example of the required configuration:

 

<script>

    function onLoad() {

        ej.data.DataUtil.serverTimezoneOffset = 0;

    }

</script>

 

 

Regards,

Joseph I.

[Jessica Goodrich]

Hello,

This hasn't fixed the issue in the editing dialog. Is there something else I need to do?

Here is my grid:

        <ejs-grid id="Grid"

                    load="onLoad()"

                    dataSource="@Model.DivisionDistribution"

                    allowTextWrap="true"

                    gridLines="Horizontal"

                    toolbar="@(new List<string>() { "Add", "Delete", "Search" })">

            <e-grid-loadingIndicator indicatorType="Shimmer"></e-grid-loadingIndicator>

            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" showDeleteConfirmDialog="true"></e-grid-editSettings>

            <e-data-manager json="@Model.DivisionDistribution.ToArray()" adaptor="RemoteSaveAdaptor" insertUrl="/Supplier/AddDistribution" updateUrl="/Supplier/UpdateDistribution" removeUrl="/Supplier/DeleteDistribution"></e-data-manager>

            <e-grid-columns>

                <e-grid-column

                    field="SupplierDivisionDistributionId"

                    headerText="SupplierDivisionDistributionId"

                    isPrimaryKey="true"

                    defaultValue="0"

                    allowEditing="false"

                    visible="false">

                </e-grid-column>

                <e-grid-column

                    field="SupplierId"

                    headerText="SupplierId"

                    allowEditing="false"

                    defaultValue="@Model.Supplier.SupplierId"

                    visible="false">

                </e-grid-column>

                <e-grid-column

                    field="DivisionId"

                    headerText="Org#"

                    format="#"

                    edit="@(new { @params = new Syncfusion.EJ2.Inputs.NumericTextBox() {

                        ValidateDecimalOnType = true,

                        Decimals = 0,

                        Format = "#"

                    }})"

                    editType="numericedit">

                </e-grid-column>

                <e-grid-column

                    field="Distribution"

                    headerText="Distribution"

                    editType="numericedit">

                </e-grid-column>

                <e-grid-column

                    field="StartDate"

                    headerText="Start Date"

                    editType="datepickeredit"

                    format="MM-dd-yyyy">

                </e-grid-column>

                <e-grid-column

                    field="EndDate"

                    headerText="End Date"

                    editType="datepickeredit"

                    format="MM-dd-yyyy"

                    defaultValue="null">

                </e-grid-column>

            </e-grid-columns>

        </ejs-grid>

    </div>

</div>

And my script:

<script type="text/javascript">

    function onLoad() {

        console.log("moo");

        ej.data.DataUtil.serverTimezoneOffset = 0;

    }

</script>

And here you can see the script is called, but it still subtracts a day:

[Joseph Christ Nithin Issack]

Hi Jessica,

While setting ej.data.DataUtil.serverTimezoneOffset = 0 ensures that the date is displayed correctly in the grid, the editing dialog uses a DatePicker component, which performs its own date handling and may still apply the browser’s local time zone.

To resolve the issue where the date appears one day earlier in the edit dialog, you can manually reset the DatePicker value during the grid’s actionBegin event when editing starts. This approach ensures that only the date portion is considered, preventing any unintended time zone shifts.

Please add the following configuration to your grid:

Modify the Grid Tag to Include actionBegin:

 

<ejs-grid id="Grid"

          load="onLoad"

          actionBegin="onActionBegin"

          ... >

 

Add This Script:

 

<script type="text/javascript">

    function onLoad() {

        ej.data.DataUtil.serverTimezoneOffset = 0;

    }

 

    function onActionBegin(args) {

        if (args.requestType === 'beginEdit' || args.requestType === 'add') {

            setTimeout(() => {

                // StartDate field

                const startDatePicker = document.querySelector('#Grid_StartDate')?.ej2_instances?.[0];

                if (startDatePicker && startDatePicker.value) {

                    const localDate = new Date(startDatePicker.value);

                    startDatePicker.value = new Date(

                        localDate.getFullYear(),

                        localDate.getMonth(),

                        localDate.getDate()

                    );

                }

 

                // EndDate field (optional)

                const endDatePicker = document.querySelector('#Grid_EndDate')?.ej2_instances?.[0];

                if (endDatePicker && endDatePicker.value) {

                    const localDate = new Date(endDatePicker.value);

                    endDatePicker.value = new Date(

                        localDate.getFullYear(),

                        localDate.getMonth(),

                        localDate.getDate()

                    );

                }

            }, 0);

        }

    }

 

</script>

 

This script ensures the DatePicker component in the dialog treats the value as a pure date, avoiding unintended day shifts due to time zones.

[Jessica Goodrich]

Thank you!

[Joseph Christ Nithin Issack]

Hi Jessica,

   We are glad that the provided solution resolved the issue you are facing.