This is a migrated thread and some comments may be shown as answers.

How to convert yyyy-MM-ddTH:mm:ss.fffZ to date picker

8 Answers 988 Views

Date/Time Pickers

This is a migrated thread and some comments may be shown as answers.

8 Answers, 1 is accepted

answered on 25 Jul 2016, 10:34 AM

<!DOCTYPE html>
<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>

answered on 06 Oct 2016, 07:52 AM

My column can have the different values (date, number, options of dropdown box, etc). Grid includes

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