php - 网格中的内联日期选择器不持久

Question

我有一个网格，它从 MySQL 数据库中获取格式为年-月-日小时:分钟:秒的日期，并在网格的日期选择器中将其显示为英国日期。这似乎工作正常。

虽然我在内联编辑器中编辑日期，但我可以进行更改，但编辑器立即退出，将我带回原始网格。

请注意，我使用的是 jQuery 1.8.2

只是想知道是否有人以前看过这个？我收到“意外数字”错误，这让我觉得这可能与日期格式有关，但 Chrome 的调试功能到此为止，指向 Kendo 和 jQuery 库，而不是我的代码(这显然不是我想要的).

我认为 Kendo 和 Javascript 通常使用略有不同的日期格式表示，这可能与此有关。

这是我制作网格的代码:

                 kendo.culture("en-GB");
             $("#grid").kendoGrid({
                 dataSource: {
                     transport: {
                         read: {
                            url: "http://dev.openbill.co.uk/admin/crud/viewproject/main.json.php?action=read&id=<?php echo $_GET['id']; ?>",
                            type: "GET",
                            dataType: "json"
                         },
                         update: {
                            url: "http://dev.openbill.co.uk/admin/crud/viewproject/main.json.php?action=update&id=<?php echo $_GET['id']; ?>",
                            type: "POST"
                         },
                         destroy: {
                             url: "http://dev.openbill.co.uk/admin/crud/viewproject/main.json.php?action=destroy&id=<?php echo $_GET['id']; ?>",
                             type: "POST"
                          },
                          create: {
                              url: "http://dev.openbill.co.uk/admin/crud/viewproject/main.json.php?action=create&id=<?php echo $_GET['id']; ?>",
                              type: "POST"
                           },
                     },
                    schema: {
                        data: "data",
                        total: "total",
                        parse: function(response) {

                            for (var i = 0; i < response["data"].length; i++) {
                                //Parsing the data before its used
                                //"17\/10\/2012 20:55:00"
                                var phpStartDate = response["data"][i]["start"];
                                var phpStopDate = response["data"][i]["stop"];
                                var datePartsStart = phpStartDate.match(/(\d+)/g);
                                var datePartsStop = phpStopDate.match(/(\d+)/g);
                                var parsedDateStart = new Date(datePartsStart[0], datePartsStart[1], datePartsStart[2], datePartsStart[3], datePartsStart[4], datePartsStart[5]);
                                var parsedDateStop = new Date(datePartsStop[0], datePartsStop[1], datePartsStop[2], datePartsStop[3], datePartsStop[4], datePartsStop[5]);

                                response["data"][i]["start"] = parsedDateStart;
                                response["data"][i]["stop"] = parsedDateStop;
                                //debugger;
                            };
                            return response;
                        },
                        model: {
                        id: "id",
                        fields: {
                                id: {editable: false,nullable: false},
                                start: {
                                    editable: true,
                                    nullable: false,
                                    type: "date",
                                    format: "dd/MM/yyyy hh:mm:ss",
                                    validation: {required: true}
                                },
                            stop: {
                                    editable: true,
                                    nullable: true,
                                    type: "date",
                                    format: "dd/MM/yyyy hh:mm:ss",
                                    validation: {required: true}
                                },
                            staff: {editable: true,nullable: false},
                            hourly: {editable: true,nullable: false},
                            }
                        }
                    }, 
                     serverPaging: true,
                     serverSorting: true,
                     pageSize: 10,
                     page: 1,
                    scrollable: {
                        virtual: true
                     },
                    sort: { field: "start", dir: "asc"}
                    },
                 sortable: true,
                 selectable: false,
                 resizable: true,
                 reorderable: true,
                 toolbar: ["create"],
                 editable: "inline",
                 pageable: {
                        numeric: false,
                        pageSizes: [ 10 , 25, 50 ],
                        previousNext: true,
                        input: true,
                        info: true
                },
                 columns: [
                        { field:"id", title:"Tracking ID", hidden: true},
                        { field:"start", title:"Start Time", editor: startDateEditor, template: '#= kendo.toString(start,"dd/MM/yyyy hh:mm:ss") #' },
                        { field:"stop", title:"End Time", editor: endDateEditor, template: '#= kendo.toString(stop,"dd/MM/yyyy hh:mm:ss") #' },
                        { field:"staff", title:"Staff Member", editor: staffEditor },
                        { field:"hourly", title:"Hourly Rate", editor: hourlyEditor, width: 90 },
                        { command: "edit", width: 175  },
                        { command: "destroy", width: 90  },
                        { template: '<input type="checkbox" name="#=id#" />', width: 40  },
                    ],
            });
            function startDateEditor(container, options){
                $('<input data-bind="value:' + options.field + '" />')
                    .appendTo(container)
                    .kendoDateTimePicker({

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

                    });
            }
            function staffEditor(container, options) {
                $('<input data-bind="value:' + options.field + '" data-value-field="id" />')
                    .appendTo(container)
                    .kendoDropDownList({
                        autoBind: true,
                        dataTextField: "name",
                        dataValueField: "id",
                        dataSource: {
                            type: "json",
                            transport: {
                                read: "http://dev.openbill.co.uk/admin/crud/viewproject/staff.json.php"
                            },
                            schema: {
                                data: "data",
                            }
                        }
                    });
            }
            function hourlyEditor(container, options) {
                $('<input min="0" type="number" data-bind="value:' + options.field + '" />')
                    .appendTo(container)
                    .kendoNumericTextBox({
                        format: "c",
                        decimals: 2
                    });
            }

Answer 1

这可能是相关的:

PHP 和 Javascript 日期之间的一大区别是计算月份的方式。在 PHP 中，1 是一月。在 Javascript 中，0 是一月。因此，您实际上需要从 MySQL php 日期中减去一个才能在 JS 中获得正确的日期。

查看此线程:Stack Overflow — Conver JS Date Object to MySQL format