DatePicker one day off, 2nd case

3 posts, 0 answers
  1. Manu
    Manu avatar
    10 posts
    Member since:
    Jun 2016

    Posted 20 Jun Link to this post

    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

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 22 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Manu
    Manu avatar
    10 posts
    Member since:
    Jun 2016

    Posted 27 Jun in reply to Danail Vasilev Link to this post

    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

Back to Top