Date Input

Member Of	Wijmo Value Control
Base Control	HTML5 input, type=date
Description	Provides a default implementation of a date value control.
Usage	Apply to an entity property having a Date data type.

Generated Code	Copy Code
myapp.ScreenName.PropertyName_render = function (element, contentItem) { var input = $("<input type='date' data-clear-btn='true'/>"); input.appendTo($(element)); input[0].onchange = function (e, args) { contentItem.value = new Date(input.val()); }; contentItem.dataBind("stringValue", function (newValue) { input.val(newValue); }); };

Generated Code

Copy Code

myapp.ScreenName.PropertyName_render = function (element, contentItem) {

    var input = $("<input type='date' data-clear-btn='true'/>");
    input.appendTo($(element));

    input[0].onchange = function (e, args) {
        contentItem.value = new Date(input.val());
    };

    contentItem.dataBind("stringValue", function (newValue) {
        input.val(newValue);
    });
};

Remarks

This widget uses the native date keypad when editing is initiated on a mobile device. It is included for completeness and to provide a reasonable default implementation for date value controls. You can also use the generated code as a starting point for working with other third-party control libraries.

The onchange event is handled to update the bound value whenever the end user changes the input control’s current value.

The dataBind method call ensures that the widget stays in sync whenever the bound value changes.