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

9 posts, 0 answers
  1. Winnie
    Winnie avatar
    7 posts
    Member since:
    Sep 2014

    Posted 25 Jul Link to this post

    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

  2. Winnie
    Winnie avatar
    7 posts
    Member since:
    Sep 2014

    Posted 25 Jul in reply to Winnie Link to this post

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

    Thanks

  3. Kendo UI is VS 2017 Ready
  4. Winnie
    Winnie avatar
    7 posts
    Member since:
    Sep 2014

    Posted 25 Jul in reply to Winnie Link to this post

    <!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>
  5. Winnie
    Winnie avatar
    7 posts
    Member since:
    Sep 2014

    Posted 25 Jul in reply to Winnie Link to this post

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

  6. Igor
    Igor avatar
    11 posts
    Member since:
    Sep 2016

    Posted 06 Oct Link to this post

    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
  7. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 10 Oct Link to this post

    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.
  8. Igor
    Igor avatar
    11 posts
    Member since:
    Sep 2016

    Posted 10 Oct in reply to Dimiter Topalov Link to this post

    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

     

     

     

     

     

  9. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 11 Oct Link to this post

    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.
  10. Igor
    Igor avatar
    11 posts
    Member since:
    Sep 2016

    Posted 11 Oct in reply to Dimiter Topalov Link to this post

    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

     

     

     

     

Back to Top
Kendo UI is VS 2017 Ready