JQWidget Error on Default Datepicker

by Nico D

HTML

<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/knockout-3.0.0.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/format.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/styles/jqx.apireference.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.arctic.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
Default Value works
<div id="dateTimeInput"></div>
<br/>
Value passed from binding works
<div data-bind="'jqxDateTimeInput': { 'value': dataFrom, 'width': '250px', 'height': '25', 'formatString': 'MM/dd/yyyy' }"></div>
<br/>
When you assign a value after no value initialization, it does not follow formatString
<div data-bind="'jqxDateTimeInput': { 'value': dataTo, 'width': '250px', 'height': '25', 'formatString': 'MM/dd/yyyy', 'allowNullDate': true}"></div>
We need a no value field that user may choose to fill.
We do not want a default value that has to be always there before user interaction.

<br/>

JavaScript

// JQWidget Bug on Date Time Input

var exampleDate = '2016-03-01';

var viewModel = function () {
    this.dataFrom = ko.observable(exampleDate);
    this.dataTo = ko.observable(null);
};

$(document).ready(function () {
    $("#dateTimeInput").jqxDateTimeInput({
        width: '250px',
        height: '25px',
        theme: 'arctic',
        formatString: 'MM/dd/yyyy',
        value: exampleDate
    });

		var vm = new viewModel();
    ko.applyBindings(vm);
    
    // simulating user interaction or on demand field filling
    vm.dataTo(exampleDate);
});