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 129 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Winnie
Top achievements
Rank 1
Winnie asked on 25 Jul 2016, 10:31 AM

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

Sort by
0
Winnie
Top achievements
Rank 1
answered on 25 Jul 2016, 10:32 AM

If you can't open the link, please try the attachment. 

Thanks

0
Winnie
Top achievements
Rank 1
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>
0
Winnie
Top achievements
Rank 1
answered on 25 Jul 2016, 01:20 PM

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']"
               />

0
Igor
Top achievements
Rank 1
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
0
Dimiter Topalov
Telerik team
answered on 10 Oct 2016, 06:56 AM
Hello 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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Igor
Top achievements
Rank 1
answered on 10 Oct 2016, 02:51 PM

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

 

 

 

 

 

0
Dimiter Topalov
Telerik team
answered on 11 Oct 2016, 07:07 AM
Hello 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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Igor
Top achievements
Rank 1
answered on 11 Oct 2016, 11:20 AM

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

 

 

 

 

Tags
Date/Time Pickers
Asked by
Winnie
Top achievements
Rank 1
Answers by
Winnie
Top achievements
Rank 1
Igor
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or