I added a datepicker control to a grid for edit mode. When the updates,
it displays a long format time string. I would like to format the time
as a short date string, but I have not found the event to delegate. The
code below demonstrates the problem:
<div id="grid"></div>
<script language="javascript" type="text/javascript" >
$(document).ready(function ()
{
$("#grid").kendoGrid({
dataSource:
{
data:
[
{Employee:"Joe Jones",Dept:"Sales",Job:"Account manager",DateVal:"1/2/2012"},
{Employee:"Samantha Smith",Dept:"Marketing",Job:"Design",DateVal:"2/3/2012"}
]
},
pageable: true,
height: 455,
filterable: true,
sortable: true,
scrollable: { virtual: false },
selectable: 'row',
columns: [
{ field: "Employee", title: "Employee" },
{ field: "Dept", title: "Department" },
{ field: "Job", title: "Job" },
{
field: "DateVal",
title: "Date Hired",
editor: function (container, options)
{
$('<input id=\"' + options.field + '\" />').appendTo(container)
.kendoDatePicker({ format: "MM/dd/yyyy" });
var datePicker = $("#DateVal").data("kendoDatePicker");
// bind to the close event
datePicker.bind('close', function (e)
{
var datepicker = e.sender.element.kendoDatePicker()
var d = new Date(datepicker.val());
});
}
},
{ filterable: false, command: ["edit"], title: " ", width: "210px"}],
editable: "inline"
});
});
</script>
Click "Edit", then a date from the datepicker control, then look at the resulting time string in the grid.
Sorry if I posted this in the wrong forum before.
<div id="grid"></div>
<script language="javascript" type="text/javascript" >
$(document).ready(function ()
{
$("#grid").kendoGrid({
dataSource:
{
data:
[
{Employee:"Joe Jones",Dept:"Sales",Job:"Account manager",DateVal:"1/2/2012"},
{Employee:"Samantha Smith",Dept:"Marketing",Job:"Design",DateVal:"2/3/2012"}
]
},
pageable: true,
height: 455,
filterable: true,
sortable: true,
scrollable: { virtual: false },
selectable: 'row',
columns: [
{ field: "Employee", title: "Employee" },
{ field: "Dept", title: "Department" },
{ field: "Job", title: "Job" },
{
field: "DateVal",
title: "Date Hired",
editor: function (container, options)
{
$('<input id=\"' + options.field + '\" />').appendTo(container)
.kendoDatePicker({ format: "MM/dd/yyyy" });
var datePicker = $("#DateVal").data("kendoDatePicker");
// bind to the close event
datePicker.bind('close', function (e)
{
var datepicker = e.sender.element.kendoDatePicker()
var d = new Date(datepicker.val());
});
}
},
{ filterable: false, command: ["edit"], title: " ", width: "210px"}],
editable: "inline"
});
});
</script>
Click "Edit", then a date from the datepicker control, then look at the resulting time string in the grid.
Sorry if I posted this in the wrong forum before.