MySQL データベースから年月日時:分:秒の形式で日付を取得し、グリッドの日付ピッカーに英国の日付として表示するグリッドがあります。これはうまくいくようです。
インライン エディターで日付を編集するとすぐに変更できますが、エディターはすぐに終了し、元のグリッドに戻ります。
私はjQuery 1.8.2を使用していることに注意してください
他の誰かがこれを以前に見たことがあるかどうか疑問に思っていますか？「予期しない数字」エラーが表示され、日付の書式設定に関係があるのではないかと思われますが、Chrome のデバッグ機能はそこで終わり、私のコードではなく Kendo および jQuery ライブラリを指します (これは明らかに私が望んでいるものではありません) ）。
剣道と 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
});
}