Problem with input type date in iOS

4 posts, 1 answers
  1. David
    David avatar
    4 posts
    Member since:
    Mar 2012

    Posted 04 Mar 2013 Link to this post

    Hi 

    In my application I have a view that has a date type input, the view has an associated field model and is associated by binding to a model property. Code:

    <div id="selectMenu" data-role="view"  data-title="Emp-Suc"  data-model="selectMenu_model">
    <ul data-role="listview" data-style="inset">
                    <li>
                        <label>
                            Fecha Proceso
                            <input type="date" data-bind="value: processDate"/>
                        </label>
                    </li>
                    <li>
                        <i></i><a data-role="button" data-bind="click:submit" style="float: right;" data-icon="details" >Continuar</a>     
                    </li>
                </ul>
    </div>

    This is the model:

    var selectMenu_model = new kendo.observable({
        company: null,
        branch: null,
        processDate: "",
        companies: function(){
            dataConfigurationHierarchical.set("method","GetCompanies");
            dataConfigurationHierarchical.set("params", { login: kendo.stringify(userModel.get("login"))});
            return dataConfigurationHierarchical.getSource();
        },
        branches: function(){
            dataConfigurationHierarchical.set("method","GetBranches");
            dataConfigurationHierarchical.set("params", { login: kendo.stringify(userModel.get("login"))});
            return dataConfigurationHierarchical.getSource();
        },
     
        submit: function(){
            var cp = $("#company").data("kendoDropDownList").value();
            var br = $("#branch").data("kendoDropDownList").value();   
            var pd = selectMenu_model.get("processDate");
            //console.log("Compañia: " + cp + "   Sucursal: " + br);
            if(cp !== '' && br !== '' && pd !== ''){
     
     
                app.navigate("views/menu.html");
            }
        },
         
     
    });
    The problem is when I want to get the value of the date field, I have clear that the documentation says that you get with model.get ("property") in my case would use selectMenu_model.get ("processDate") or this.get("processDate"). It is assumed that when you change the date changes the value in the model. I tried in the browser and it works fine, I can get the value, I tried it on Android 4.0 ICS and also worked well but I test in Safari iOS 5.1 and when I make the date change, the model do not change is that the value is null, as initialized. Forget the methods, that me is working well (companies, branches, submit) ..

    I appreciate a response. 
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 06 Mar 2013 Link to this post

    Hi David,

    The problem comes from the fact that in iOS 5.x the change event of the date input does not trigger when the user selects a date (in iOS 6 it does). By default Kendo MVVM listens for the change event of the input which is why the ViewModel does not update.

    The blur event is invoked when the date/time picker is dismissed so setting data-value-update="blur" works.
    <input type="date" data-bind="value: processDate" data-value-update="blur" />

    You can test the solution here: http://jsbin.com/asexen/2 (code view)

    I hope this information will help.

    Kind regards,
    Alexander Valchev
    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. Chris Craig
    Chris Craig avatar
    1 posts
    Member since:
    Mar 2010

    Posted 04 Oct 2013 Link to this post

    Here's a solution that i'm testing:

    // check if change event is not supported and simulate it (applicable to iOS 5 date/time input types)
    var $dateTimeBoxes = $("input[type=date], input[type=time]");
    if ($dateTimeBoxes.size() > 0) {
        if (!('onchange' in $dateTimeBoxes[0])) {
            console.warn("onchange event is not supported on date/time inputs. use blur event to fire change event");
            $dateTimeBoxes.bind('blur', function (blurEvent) {
                $(this).trigger('change', blurEvent);
            });
        }
    }
    Can somebody please comment on effectiveness/reliability on this? If this is a workable solution can this be integrated into the Kendo UI framework?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Oct 2013 Link to this post

    Hi Chris,

    Thank you for sharing your solution.
    The provided code seems to be OK.

    Regards,
    Alexander Valchev
    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