Handling dates

8 posts, 0 answers
  1. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 22 May 2012 Link to this post

    My model has date objects dotted all around it, what's the preferred way to handle the formatting of those into a readable format?

    I'm not sure how to get the values into a function to return the formatted Date object back...I know I can't databind a format directly, so how do I pass in the data value to a function so it returns what format I want.

    data-bind="text: getDate(selectedBlock.data.EndDate)"

    I've tried things like the above, but doesn't do anything (so clearly it's wrong)
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 25 May 2012 Link to this post

    Hi Steve,

     You cannot have *any* executable code in the data-bind attribute. You can only specify field and function names which correspond to model fields/functions. You can find more info in the ObservableObject help topic: http://www.kendoui.com/documentation/framework/mvvm/observableobject.aspx 

     To format a date you need to create a calculated field - a function which will return date formatted the right way.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 25 May 2012 Link to this post

    Can you elaborate on that though?  If you have a complex model populated by json...can you get away somehow with a single function or do you need to have one for every date property?
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 May 2012 Link to this post

    Hello,

     You need to have one for every date property.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 28 May 2012 Link to this post

    That's a horrible solution :/ ...for a complex model, I guess I just need it to do date formatting anyway, this works better I think

    //Date Binding
    kendo.data.binders.date = kendo.data.Binder.extend({
        init: function (element, bindings, options) {
            kendo.data.Binder.fn.init.call(this, element, bindings, options);
     
            this.dateformat = $(element).data("dateformat");
        },
        refresh: function () {
            var data = this.bindings["date"].get();
            if (data) {
                var dateObj = new Date(data);
                $(this.element).text(kendo.toString(dateObj, this.dateformat));
            }
        }
    });
  7. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 28 May 2012 Link to this post

    Could there not be a property or a kendo method to convert any values that pass a parseDate in the model into JS dates?
  8. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 28 May 2012 Link to this post

    Crap, no I think there's even issues with a custom binder...

    If I'm doing this:
    <li>Last Updated:<span data-bind="date: selectedBlock.LastUpdated" data-dateformat="dddd MMM dd, yyyy hh:mmtt"></span></li>

    So binding to a child property of an object...

    The refresh of the custom binder isn't called when the selectedBlock changes and the data is bound

    Where if I change it to just this
    <li>Last Updated:<span data-bind="text: selectedBlock.LastUpdated"></span></li>

    It works as expected

    Bug?
  9. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 May 2012 Link to this post

    Hi,

     Looks ok to me: http://jsfiddle.net/korchev/urAPV/1/ 

    Regards,
    Atanas Korchev
    the Telerik team
    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