This is a migrated thread and some comments may be shown as answers.
Date field does not accept local time format
3 Answers 6 Views
This is a migrated thread and some comments may be shown as answers.
Xiaohong
Top achievements
Rank 1
Xiaohong asked on 30 Dec 2020, 08:05 PM
I have a Date field in the Grid and the incoming value is a string.  The field can be displayed properly when the incoming string has the format of ISO datetime (2020-05-15T12:23:20). But it is not displayed when the incoming string has the format of local time (Oct 06, 2020 04:30 PM). Following is the schema settings for the DataSource. Can you tell me how to make the Grid accept the local time format.

                schema:{
                    total: function(){ return scope.totalDocumentCount },
                    model: {
                        id: "DocumentId",
                        fields: {
                            Date: { type: 'date'}
                        }
                    }
                },

3 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 01 Jan 2021, 09:01 AM

Hi Xiaohong,

Based on the provided information, I have created a sample project. I have added the date of interest and it appears that it is interpreted as a date data type. This can be confirmed by the actual rendered text in the grid as well as the DatePicker being automatically loaded in the filter menu:

https://dojo.telerik.com/ixAmuJEk

Is it possible for you to modify the sample in order to replicate the defect and send it back to me?

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Xiaohong
Top achievements
Rank 1
answered on 04 Jan 2021, 03:14 PM

Hi Tsvetomir,

Thank you very much. I noticed that you made the following change to the incoming data format. We can change the incoming data format by updating the other component with some effort.
     data: [{OrderDate:new Date("Oct 06, 2020 04:30 PM")}],

Actually I made it work by adding parse to the schema of the grid (see below) without changing the incoming data format.

       schema:{
              model: {
                     fields: {
                           date: { type: 'date'}
                     }
              },
              parse : function(data) {
                     for (var record of data) {
                           for (var fieldName in record) {
                                  if (fieldName == "date") {
                                         record[fieldName] = new Date(record[fieldName]);
                                  }
                           }
                     }
                     return data;
              }
       }

Following is the content of a stand-alone test html file.  Wonder if you can make it work without the custom parse.

<!DOCTYPE html>
<html>
       <head>
              <meta charset="utf-8">
              <title>Kendo UI:  Implementing the Grid Widget </title>
              <link href="content/kendo.common.min.css" rel="stylesheet" type="text/css"/>
              <link href="content/kendo.default.min.css" rel="stylesheet" type="text/css"/>
              <link href="content/myCustom.css" rel="stylesheet" type="text/css"/>
              <script src="scripts/jquery.min.js" type="text/javascript"></script>
              <script src="scripts/kendo.web.min.js" type="text/javascript"></script>
       </head>

       <body>
              <div id="cars"></div>
              <script type="text/javascript">
                     $(document).ready(function() {

                                  var cars = [
                                         {year: 2012, make: "Ferrari", model: "California", date: "Oct 17, 2013 01:57 AM"},
                                         {year: 2012, make: "Ferrari", model: "458 Italia"},
                                         {year: 2012, make: "Lamborghini", model: "Aventador", date: "Apr 15, 2004 09:50 AM"},
                                         {year: 2012, make: "Lamborghini", model: "Gallardo LP-570", date: "Aug 07, 2008 09:50 PM"},
                                         {year: 2012, make: "Porsche", model: "911 GT3", date: "2009-10-23 04:44 AM"},
                                         {year: 2012, make: "McLaren", model: "MP14-12C", date: "2018-04-01 05:23 PM"},
                                         {year: 2012, make: "Koenigsegg", model: "CCX"},
                                         {year: 1971, make: "Plymouth", model: "(Hemi) Barracuda", date: "Jun 15, 2020 06:08 PM"},
                                         {year: 1967, make: "Ford", model: "Shelby Mustang GT500", date: "Dec 13, 2019 12:12 PM"},
                                         {year: 1972, make: "Jaguar", model: "E-Type", date: "May 15, 2015 11:15 PM"}
                                  ];

                                  var carsDataSource = new kendo.data.DataSource({
                                         data: cars,
                                         pageSize: 5 ,
                                         sort: {field: "year", dir: "asc"} ,
                                         schema:{
                                                model: {
                                                       fields: {
                                                              date: { type: 'date'}
                                                       }
                                                },
                                                parse : function(data) {
                                                       for (var record of data) {
                                                              for (var fieldName in record) {
                                                                    if (fieldName == "date") {
                                                                           record[fieldName] = new Date(record[fieldName]);
                                                                     }
                                                              }
                                                       }
                                                       return data;
                                                }
                                         }
                                  });
                                  carsDataSource.read();

                                  $("#cars").kendoGrid({
                                         dataSource: carsDataSource,
                                         columns: [
                                                { field: "year", title: "Year"} ,
                                                { field: "make", title: "Make" } ,
                                                { field: "model", title: "Model" } ,
                                                { field: "date", title: "Date", format: '{0:MMM dd, yyyy h:mm:ss tt}' } ,
                                                { command: ["edit", "destroy"]}
                                         ],
                                         scrollable: false,
                                         pageable: true,
                                         sortable: true,
                                         groupable: true,
                                         filterable: true,
                                         editable: "inline"
                                  });
                     });
              </script>
       </body>
</html>

 

 

0
Tsvetomir
Telerik team
answered on 06 Jan 2021, 10:49 AM

Hi Xiaohong,

Thank you for sharing the sample project for reference. Indeed, the dates would be parsed automatically only if you spell the month with its full name rather than the abbreviation. This can be confirmed by removing the parsing logic and setting the full names. Since the abbreviatures are considered as custom formats, they are not parsed automatically.

Nevertheless, the approach with the parse function is recommended and you could use it as-is. 

 

Best regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Xiaohong
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Xiaohong
Top achievements
Rank 1
Share this question
or