DatePicker one day off, 2nd case

[Manu]

Hello,

here is another case where I get dates picked corretly but when posted to the server the date is one day behind the picked date.

I have placed a single grid in a razor view. The first field (TestItem) of the grid  is populated with a custom dropdown-editor and the 2nd field (TestDate) with a custom dateEditor. The grid itself uses api-controller CRUD actions.

<div class="full-height full-width">
    <div id="sample-grid" class="full-height"></div>
</div>

@section scripts {
    <script type="text/javascript">

    function ItemDropDownEditor(container, options) {
        $('<input required data-text-field="System" data-value-field="Code" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: gridDataSource(actions.sample.getTestItems, 50)
            });
    }

    function TestdateEditor(container, options) {
        $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                .appendTo(container)
                .kendoDatePicker({});
    }

    $(function () {
        // Client side kendo data source passed to kendo grid. Uses AllSamplesController for CRUD operations.
        var sampleGridDataSource = new kendo.data.DataSource({
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number", editable: false },
                        TestItem: { defaultValue: { Code: "001", System: "none"} },
                        TestDate: { type: "datetime" },
                    }
                }
            },
            transport: {
                read: {
                    url: actions.common.rootUrl + "api/Allsamples/?anlagenId=" + amplify.store("SelectedItemId"),
                    type: "Get"
                },
                create: {
                    url: actions.common.rootUrl + "api/Allsamples/?anlagenId=" + amplify.store("SelectedItemId"),
                    type: "PUT",
                    contentType: 'application/json;charset=utf-8'
                },
                update: {
                    url: actions.common.rootUrl + "api/Allsamples/?anlagenId=" + amplify.store("SelectedItemId"),
                    type: "PUT",
                    contentType: 'application/json;charset=utf-8'
                },
                destroy: {
                    url: actions.common.rootUrl + "api/Allsamples",
                    type: "DELETE",
                    contentType: 'application/json;charset=utf-8'
                },
                parameterMap: function(data, operation) {
                    if (operation != "read") {
                        return kendo.stringify(data.models);
                    }
                }
            },
            requestEnd: function(e) {
                if (e.type == "create") {
                    this.read();
                }
            },
            change: function(e) {
                //if (e.action == "itemchange" || e.action == "add" || e.action == "remove")
                if (e.action == "itemchange")
                {
                    window.sampleViewModel.setIsDirty(true);
                }
            }
        });

        var sampleGrid = $("#sample-grid").kendoGrid({
            dataSource: sampleGridDataSource,
            scrollable: true,
            navigatable: true,
            sortable: true,
            columnMenu: true,
            selectable: "row",
            editable: {
                confirmation: "Delete the selected record?",
            },
            pageable: {
                pageSizes: [10, 20, 50],
                refresh: true,
            },
            filterable: true,
            resizable: true,
            height: 500,
            columns: [
                {
                    field: "TestItem",
                    title: "TestItem",
                    width: "120px",
                    editor: ItemDropDownEditor,
                    template: "#=Items.System#",
                },
                 {
                    field: "TestDate",
                    title: "TestDate",
                    width: "100px",
                    type: "date",
                    format: "{0:dd.MM.yyyy}",
                    editor: TestdateEditor,
                    filterable: {
                        ui: "datepicker"
                    }
                },
            ]
        }).data().kendoGrid;

        sampleGridDataSource.bind('dataBound', function(e) {
            this.element.find('tbody tr:first').addClass('k-state-selected');
        });


        var jsonModel = @Html.Raw(Json.Encode(Model));

        var sampleViewModel = new sampleViewModel(jsonModel, sampleGrid);

        kendo.bind($("body"), sampleViewModel);

    });
    </script>
}

 

Does anybody have an idea what causes the offset of one day?

 

Best regards

Manu

[Danail Vasilev]

Hello Manu,

I would recommend you to check our Code Library project demonstrating how to use UTC time both server and client-side.

Regards,
Danail Vasilev
Telerik

[Manu]

Hello Danail,

the info from the link given in my other post solved my problem. I justed added:

Date.prototype.toJSON = function ()
{
    return kendo.toString(this, "yyyy-MM-ddTHH:mm:ss");
};

to my JavaScript; I put it into a common.js file that is loaded from the BundleConfig.cs

 

Regards,

Manu