It appears as though you want to initialize your observable with a value taken from the HTML element.
Ideally you want to be able to do this:
<input type="date" value="(@Filter.DateSenior.Value.ToString("yyyy-MM-dd"))" data-bind="value:SeniorDate">
However, this will not work, as I'm sure you have tried, because the default behaviour of the value binding does not update the bound observable with the value on the dom element when the binding is initialized.
But there is a solution, you can create a custom binding that does everything the existing value binding does and also the behaviour you want, which is to initialize the observable with the value of the dom element.
Use this binding:
ko.bindingHandlers.value2 = { init: function(element, valueAccessor, allBindings) { var observable = valueAccessor(), value = element.value; observable(value); ko.bindingHandlers.value.init.apply(this, arguments); }, update: function(element, valueAccessor, allBindings) { ko.bindingHandlers.value.update.apply(this, arguments); } };
Which will enable you to do this:
<input type="date" value="(@Filter.DateSenior.Value.ToString("yyyy-MM-dd"))" data-bind="value2:SeniorDate">
See the working snippet below:
ko.bindingHandlers.value2 = { init: function(element, valueAccessor, allBindings) { var observable = valueAccessor(), value = element.value; observable(value); ko.bindingHandlers.value.init.apply(this, arguments); }, update: function(element, valueAccessor, allBindings) { ko.bindingHandlers.value.update.apply(this, arguments); } }; var vm = { seniorDate: ko.observable() }; ko.applyBindings(vm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div> <input type="date" value="2015-07-20" data-bind="value2: seniorDate" /> </div> <div> <p data-bind="text: seniorDate"></p> </div>
RP Niemeyer has answered a similar question here.
