I tried to parse "2016-07-24T23:25:33.632Z" to datePicker. Because I am in timezone +10, I will expect it come back 25/07/2016 however it always display 24/07/2016. Do you know how to make it work
<input kendo-date-picker
ng-model="dateString"
k-format = "dd/MM/yyyy "
k-parse-formats ="['YYYY-MM-DDTHH:mm:ss.fffZ']"
/>
http://dojo.telerik.com/@wingouyang/UBeRO
8 Answers, 1 is accepted
Rank 1
If you can't open the link, please try the attachment.
Thanks
Rank 1
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datepicker/angular">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content"ng-controller="MyCtrl">
<input kendo-date-picker
ng-model="dateString"
k-format = "dd/MM/yyyy "
k-parse-formats ="['YYYY-MM-DDTHH:mm:ss.SSSZ']"
/>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope) {
$scope.dateString = "2016-07-24T23:25:33.632Z"
}
</script>
</body>
</html>
Rank 1
I found the solution:
<input kendo-date-picker
ng-model="dateString"
k-format = "dd/MM/yyyy "
k-parse-formats ="['YYYY-MM-DDTHH:mm:ss.fffzzz']"
/>
Rank 1
columns: [
{ field: "value", title: "Value", editor: cellEditor },
],
And my
function cellEditor(container, options) {
…
var type = dataItem.type;
if( type=="NUMBER" ){
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({ spinners : true });
} else if( type=="DATE" ){
$('<input data-text-field="' + options.field + '" data-bind="value:' + options.field + '" data-value-field="' + options.field +'" data-format="{0:MM/dd/yyyy}"/>')
.appendTo(container)
.kendoDatePicker({close: function(e) {
e.preventDefault();
}});
}
…
My value for date is “MM/dd/yyyy” string. And your date picker can properly parse it during loading. But when editing’s done I see not desired string Tue Oct 30 2007 00:00:00 GMT-0400 (Eastern Daylight Time)
How can I format it to original “MM/dd/yyyy” string to show in the grid when editing is done? Should I override something or you have a hook like complete: function(e) {}?
Best regards,
Igor
You can use the columns.format option to configure the desired format to be used for displaying a given field in the Grid:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.format
I hope this helps.
Regards,
Dimiter Topalov
Telerik by Progress
Rank 1
Hello Dimiter,
Could you please clarify how I can do that using my example where the issue could be reproduce if you click on age value which contains String data:
http://dojo.telerik.com/IbuzI
Best regards,
Igor
I have modified the dojo with an implementation of the suggestion:
http://dojo.telerik.com/IbuzI/3
Let me know whether this is the desired functionality.
Regards,
Dimiter Topalov
Telerik by Progress
Rank 1
Hi Dimiter,
It works exactly how it is required: this formatting affects only dates and does not change data of other types. Thank you very much.
Best regards,
Igor