Format Date in Grid

15 posts, 0 answers
  1. christina
    christina avatar
    1 posts
    Member since:
    Jun 2011

    Posted 27 Feb 2012 Link to this post

    Hi,
    I'm using kendoGrid to display my data, I am also using the regex function provided in on of the examples of the demos page.
     var dateRegExp = /^\/Date\((.*?)\)\/$/;
     
    	oper.toDate = function toDate(value) {
    	    var date = dateRegExp.exec(value);
    	    return new Date(parseInt(date[1]));
    	}

    I then call the toDate function in my grid:
                    {
                        field: "EndDate",
                        title: "End Date",
                        template: '#= kendo.toString(oper.toDate(EndDate), "MM/dd/yyyy" ) #'
                    },

    It renders fine, but it is actually displaying one day behind the correct day. For example:
    it will display 2/6/2012, but the actual date is 2/7/2012.

    Any suggestions??

    Thanks!
  2. Wannes
    Wannes avatar
    12 posts
    Member since:
    Oct 2011

    Posted 28 Mar 2012 Link to this post

    Hello everyone,

    I'm seeing the same result here. What appears to be happening is that the timezone is subtracted from the day. E.g.:
    You select the date 30th of March 2012. When you call the value() function it returns the date:
    Fri Mar 30 2012 00:00:00 GMT+0200 (Romance Daylight Time)

    However, when you serialize that date using kendo.stringify(), then this is the result:
    2012-03-29T22:00:00.000Z

    As you can see: the timezone modifier +2h is subtracted from the 00h00, resulting in the 29th of March, 10:00PM.
    Hopefully this bug will be fixed soon. In the meantime, the timezone can be added manually as a work-around...

    Best Regards,
    Wannes.
  3. Kendo UI is VS 2017 Ready
  4. Wannes
    Wannes avatar
    12 posts
    Member since:
    Oct 2011

    Posted 28 Mar 2012 Link to this post

    After several more tests it turns out to  be a non-issue.
    The server will convert the 2012-03-29T22:00:00.000Z automatically back to the correct date with timezone:
    Fri Mar 30 2012 00:00:00 GMT+0200 (Romance Daylight Time)

    Since accessing the date using the datePicker's value() function produces the right date, and since on the server the date is correct, there is no issue... Except of course with direct String parsing as in Christina's case. In such cases, you need to take the timezone into account.

    Best Regards,
    Wannes.
  5. Kwex
    Kwex avatar
    2 posts
    Member since:
    Jan 2012

    Posted 03 Apr 2012 Link to this post

    I changed mine at the Controller level in C# rather than at the client level. Okay approach for me as I didn't need to sort or use any other Kendo features.

    My LINQ statement was thus:

    ...
                var result = from p in <dataset>
                             orderby <your column>
                             select new
                             {
                                 InceptionDate = ConversionUtil.DateToString(p.InceptionDate, 0),
                                 ExpiryDate = ConversionUtil.DateToString(p.ExpiryDate, 0)
                             };
    ...

    <Conversion Function>

            public static string DateToString(DateTime? dateTime, int type)
            {
                if (dateTime == null || dateTime.ToString() == "") return "";

                switch (type)
                {
                    case 1:
                        return dateTime.Value.ToString("dd/MM/yyyy");

                    default:
                        return dateTime.Value.ToString("dd-MMM-yyyy");
                }
            }
  6. Kwex
    Kwex avatar
    2 posts
    Member since:
    Mar 2011

    Posted 12 Apr 2012 Link to this post

    Found another way of doing it from the Kendo site (http://demos.kendoui.com/web/grid/local-data.html): 

    columns: [
                                 
                  {
                      field: "BirthDate",
                      title: "Birth Date",
                      template:
    '#= kendo.toString(BirthDate, "dd/MM/yyyy") #'
     
                  },
                  {
                      field: "Age",
                      width: 50
                  }
             ]
  7. Chanaka
    Chanaka avatar
    14 posts
    Member since:
    Jan 2012

    Posted 30 Aug 2012 Link to this post

    It is a Simple  Answer Use parameterMap and column format

    parameterMap: function (options, operation) {
                                if (operation != "read") {
                                    var d = new Date(options.Date);
                                    options.Date = d.toString("yyyy-MM-dd");                            
                                    return options;
                                }
                            }

    { field: "Date", title: "Date ", type: "date", format: "{0:dd/MM/yyyy}" }

    result : 30/08/2012

    Hope this will help all of you all  
  8. Omar
    Omar avatar
    8 posts
    Member since:
    Oct 2012

    Posted 15 Oct 2012 Link to this post

    Hello,

    I've tried to use the snippet of Chanaka on but doesn't' work for me.
    I'm mysql crud actions based on this http://www.kendoui.com/forums/ui/grid/crud-actions---what-should-server-response-be.aspx

    Please help me out here.
    Thanks in advanced.
  9. Chanaka
    Chanaka avatar
    14 posts
    Member since:
    Jan 2012

    Posted 15 Oct 2012 Link to this post

    Omar
    can You tell me what is your current output of the Date.

    you might also try defining a Schema in the Data Source like this.

     
     dataSource: new kendo.data.DataSource({
                        transport: {
                            read: "someHandler.ashx"
                        },
                        pageSize: 8,
                        schema: {
                            type: "xml",// or PHP or JSON 
                            data: "Errors/E2ETraceEvent",
                            model: {
                                fields: {
                                    DateCreated: { field: "your date filed name", type: "date", format: "{0:dd/MM/yyyy}" },
                                    TimeCreated: { field: "your date filed name", type: "date", format: "{0:h:mm:ss tt}" }
                                }
                            }
                        },
                        error: function (e) {
                            //Hadel your erros here
                        }
                    }) Refer to the API DOC :http://docs.kendoui.com/api/framework/datasource And in your Grid where you define Colums do this too.
    columns: [
                        {
                            field: "somename", type: "date", format: "{0:dd/MM/yyyy}"
                        },
               {
                   field: "Somename", type: "date", format: "{0:h:mm:ss tt}"
               },
  10. Omar
    Omar avatar
    8 posts
    Member since:
    Oct 2012

    Posted 15 Oct 2012 Link to this post

    Hello Chanaka,

    the Date field is set to date in mysql.

    I get correct date format (dd/MM/yyyy or 15/10/2012) when I fetch the database and "null" when I create a new row or update an existing row.

  11. Omar
    Omar avatar
    8 posts
    Member since:
    Oct 2012

    Posted 16 Oct 2012 Link to this post

    Unfortunately it didnt work.
  12. Chanaka
    Chanaka avatar
    14 posts
    Member since:
    Jan 2012

    Posted 16 Oct 2012 Link to this post

    I'm not PHP expert but must be something wrong how you get data.
  13. Robert
    Robert avatar
    23 posts
    Member since:
    Jun 2012

    Posted 21 Mar 2013 Link to this post

    It may have something to do with the fact that in JS months are zero-based: look here

    Regards, Rob
  14. Brandon
    Brandon avatar
    10 posts
    Member since:
    Sep 2016

    Posted 05 Oct Link to this post

    1.{
    2.field: "RequestedDate",
    3.title: "Requested Date",
    4.width: "134px",
    5.editor: requestedDatePicker,
    6.template: "#if (RequestedDate) {#= kendo.toString(kendo.parseDate(RequestedDate, 'yyyy-MM-dd'), 'MM-dd-yyyy')#} #" },

     

    How can I get the above example to work properly with the If statement? I can't seem to find an example or good documentation.

     

    Thanks.

  15. Brandon
    Brandon avatar
    10 posts
    Member since:
    Sep 2016

    Posted 06 Oct in reply to Brandon Link to this post

    1.{ field: "RequestedDate",
    2.title: "Requested Date",
    3.width: "134px",
    4.editor: requestedDatePicker,
    5.template: "#if(RequestedDate){# #= kendo.toString(kendo.parseDate(RequestedDate, 'yyyy-MM-dd'), 'MM-dd-yyyy')# #}#" },
    6. 
    7.First hash starts the if block, the brace hash starts the code to be executed inside the if block, hash equals starts the template rendering.
  16. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    353 posts

    Posted 10 Oct Link to this post

    Hi Brandon,

    You can use conditional statements in templates, as shown in the following simple demo:

    http://dojo.telerik.com/IxIrU

    More information about Kendo UI Templates is available in the following documentation article:

    http://docs.telerik.com/kendo-ui/framework/templates/overview#template-syntax

    Alternatively, you can use the columns.format option:

    http://dojo.telerik.com/IxIrU/3

    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.
Back to Top
Kendo UI is VS 2017 Ready