How to set a value in the Date Type field

Question

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

When the parameters of the Filter object are transferred in HTML, I cannot assign a date field from the Function AfterRender Option KO.

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
    };

Answer 1

It seems you want to initialize your observable with a value taken from an HTML element.

Ideally, you want 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 am sure you tried, because the default binding behavior valuedoes not update the associated visibility with the value of the dom element when initializing the binding.

, , value, , , dom.

:

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);
  }
};

:

<input type="date" value="(@Filter.DateSenior.Value.ToString("yyyy-MM-dd"))" data-bind="value2:SeniorDate">

. :

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>

Hide result

RP Niemeyer .

Answer 2

. .

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);