How to set value in Date type field

Question

I have the below HTML and JS and I am using MVC. Here is the scenario

When the "Filter" object parameters are passed in to the HTML I am unable to assign the date field from the KO "optionsAfterRender" function.

HTML (Razor View):

 var Filter =(Project.Models.Entity) ViewData["Filter"];

 @if (Filter != null)
                {
                    <div id="sdate">
                        <label>From Senior Date</label>
                        <input id="sdateVal"   type="date"  data-bind="value:SeniorDate,optionsAfterRender:function(){setOptionSrDate(@Filter.DateSenior.Value.ToString("yyyy-MM-dd"));}">
                    </div>

                    <div id="jdate">
                        <label>To Junior Date</label>
                        <input id="jdateVal"  type="date"  data-bind="value:JuniorDate,optionsAfterRender:function(){setOptionJrDate(@Filter.DateJunior.Value.ToString("yyyy-MM-dd"));}">
                    </div>
                }

JS (Knockout):

  self.setOptionSrDate = function (x) {//Sr Date
        $("#sdateVal").val(x);//this does not assign the value
        self.SeniorDate(x);//this does not assign the value
    };

I am guessing does it have to do with the data binding.When using the same for options binding in dropdowns I was able to achieve this but not with text or date since the have 'data-bind:value' — sss111, Jul 20 '15 at 15:32

score 1 · Answer 1 · answered Jul 20 '15 at 15:13

The problem might be the format of the date. Try this.

var now = new Date();

var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);

var today = now.getFullYear()+"-"+(month)+"-"+(day) ;

$('#datePicker').val(today);

score 1 · Answer 2 · edited May 23 '17 at 12:06

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.

How to set value in Date type field

2 Answers2