timepicker or datepicker with MVVM

4 posts, 1 answers
  1. Maor
    Maor avatar
    50 posts
    Member since:
    Dec 2012

    Posted 12 Sep 2013 Link to this post

    hi guys.
    i am using icenium and kendo mobile&web.
    i am trying to create datepicker widget  in some of the views. after define data-model to the view and follow kendo demos , i managed to create dropdown list that bind to the data model. when try to create datepicker or timepicker it act like its ignore the code.
    i use the data-role='timepicker' attribute same as in the demos.
    is it possible that kendo mobile does not support mvvm and datetime pickers?
    can you suggest me widget that can work to me?
  2. Steve
    Steve avatar
    10940 posts

    Posted 13 Sep 2013 Link to this post

    Hi Maor,

    Initialization of a Kendo UI Web TimePicker is explained in the following help article, please check whether your code is correct. If you're still having problems, please prepare a sample jsbin demo that exhibits the problem and we would advise you accordingly.


    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Darren
    Darren avatar
    32 posts
    Member since:
    Sep 2013

    Posted 22 Oct 2013 Link to this post

    Was there an answer to this?
    Does Kendo UI Mobile have a DatePicker and TimePicker?
    As your answer appears to suggest using Kendo UI Web - not mobile.

    Am interested as will be using Icenium and Kendo UI Mobile for my apps and will require a Date and Time Picker - is there an example of this somewhere too
  4. Answer
    Maor avatar
    50 posts
    Member since:
    Dec 2012

    Posted 22 Oct 2013 Link to this post

    from some reason i cannot redirect to the suggested link.
    but after digging i found the solution here:
    also, consider to check the datepicker in your phone because in  the simulator it seems that it is dont work.
     finnaly, you should add this to your js code in order to bind time value:
    kendo.data.binders.TimeValue = kendo.data.Binder.extend({
                init: function(element, bindings, options) {
                    //call the base constructor
                    kendo.data.Binder.fn.init.call(this, element, bindings, options);

                    var that = this;
                    //listen for the change event of the element
                    $(that.element).on("change", function() {
                        that.change(); //call the change function
                refresh: function() {
                    var that = this,
                    value = that.bindings["TimeValue"].get(), //get the value from the View-Model
                    formatedValue = kendo.toString(new Date(value), "HH:mm");

                    $(that.element).val(formatedValue); //update the HTML input element
                change: function() {
                    var formatedValue = this.element.value,
                    value = kendo.parseDate(formatedValue, "HH:mm");

                    //in this example the View-Model will be updated only if the value is a valid date
                    if (value) {
                        this.bindings["TimeValue"].set(value); //update the View-Model
    hope it helps you.
    and BTW, thanks to icenium&kendo team for helping in this issue.
Back to Top