Culture Date Formatting Breaking Template

7 posts, 0 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 10 Dec 2015 Link to this post

    I'm working on getting an isolated example up and running, but maybe there's something obvious I'm missing.

    We've got a SPA w/ multiple views, most of which are generated via templates. We're using Kendo charts, the scheduler and upload widgets in these views, which were all working fine until we implemented the kendo.culture functionality.

    Users can switch between English and French (Canadian). In English our tile view template looks fine (screenshot 1.png), but when we switch to French, all the overlays are lost (screenshot 2.png. Other items on different views also disappear, including buttons and general text. The one common point seems to be the if statements in the template for all these elements are checking for the existence of a date, like so:

    # if (typeof(data.Due) !== "undefined" && data.Due != null) { #
        <div class="date-overlay #= getDueClassTile(data.DueStatus, data.Type) #">
            Due:
            # if (data.DueStatus == 'Warning' || data.DueStatus == 'Overdue') { #
                <i class="fa-icon-exclamation-triangle"></i>
            # } #
            #= data.Due #
        </div>
    # } #

    We're also formatting the dates inside the datasource, and using the same checks:

    schema : {
        type: "json",
        data: "Courses",
        parse: function (data) {
            var courses = data.Courses;
             
            $.map(courses, function (item, index) {
                if (typeof(item.Due) !== "undefined" && item.Due != null) {
                    item.Due = kendo.toString(kendo.parseDate(item.Due), "dd-MMM-yyyy");
                }
                         
                if (typeof(item.CompletedDate) !== "undefined" && item.CompletedDate != null) {
                    item.CompletedDate = kendo.toString(kendo.parseDate(item.CompletedDate), "dd-MMM-yyyy");
                }
                         
                if (typeof(item.LastCompleted) !== "undefined" && item.LastCompleted != null) {
                    item.LastCompleted = kendo.toString(kendo.parseDate(item.LastCompleted), "MMM dd");
                }
                         
                if (typeof(item.SessionDate) !== "undefined" && item.SessionDate != null) {
                    item.SessionDate = kendo.toString(kendo.parseDate(item.SessionDate), "dd-MMM-yyyy");
                }
            });
                     
            return data;
        }
    }

    It looks like something about the undefined/null checks in the datasource and/or template are failing when the dates are in French (since the if statements never get executed), but I'm not sure what it could be.

  2. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 11 Dec 2015 Link to this post

    Here's the working example: http://app.smarteru.com/custom/kendo/index.cfm

    You can change the language/culture in the upper right corner (it does a console.log of the selected culture) and watch the overlays disappear from the images. There are no errors in the console.

  3. Kendo UI is VS 2017 Ready
  4. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 14 Dec 2015 Link to this post

    Hello shimmoril,

    As you know the kendo.parseDate by default uses the current culture's date format. However, in your case the date are in different format when culture is set to french which causes the parsing to fail. Instead of relaying on the current culture format for parsing you should set input date format explicitly using the second parameter of the kendo.parseDate. For example:

    item.Due = kendo.toString(kendo.parseDate(item.Due, "MM/dd/yyyy"), "dd-MMM-yyyy")

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 14 Dec 2015 in reply to Rosen Link to this post

    We've got a ton of dates we're formatting, and it's pretty time-prohibitive to go through and modify all those references. Related to my other thread (http://www.telerik.com/forums/set-culture-for-only-specific-widget-%28scheduler%29), is there no way to exclude datasources from the culture functionality? And/or only enable the translation for the scheduler?
  6. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 16 Dec 2015 Link to this post

    Hello shimmoril,

     

    I'm afraid that the culture settings can only be applied for the whole page, not for specific widgets. Also have in mind that you are manually parsing the dates and this is how the parseDate is designed to work. Note that if the original date strings are in an universal format such as ISO8601 Date format, it will not be required to pass the format as this format will be valid for all culture settings.

     

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 16 Dec 2015 in reply to Rosen Link to this post

    Yeah, I understand how it's "supposed" to work, but the problem is that the SPA is one new shiny page in a system that's existed for 5 years and we don't want to break our date formatting standards on just one page. This is a proof-of-concept for slowly migrating the entire system and at that point we'll probably switch to fully localized dates etc, but it's not possible right now.

    Thanks for the help.

  8. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 17 Dec 2015 Link to this post

    Hello shimmoril,

     

    I'm afraid that the mentioned approaches (supplying the correct date format or using a universal date format) are currently the only way to approach the behavior you are experiencing.

     

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready