Problem with input type date in iOS

[David]

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. 

[Alexander Valchev]

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

[Chris Craig]

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?

[Alexander Valchev]

Hi Chris,

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

Regards,
Alexander Valchev
Telerik