如何在日期类型字段中设置值

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

我有以下HTML和JS，我正在使用MVC。这是场景

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时，我无法从KO“optionsAfterRender”函数中分配日期字段。

HTML (Razor View):

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

JS（淘汰赛）：

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

2 个解决方案

#1

It appears as though you want to initialize your observable with a value taken from the HTML element.

看起来好像要使用从HTML元素中获取的值初始化observable。

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.

但是，这不起作用，因为我确定您已尝试过，因为值绑定的默认行为在初始化绑定时不会使用dom元素上的值更新绑定的observable。

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.

但是有一个解决方案，您可以创建一个自定义绑定，它可以执行现有值绑定所执行的所有操作以及您想要的行为，即使用dom元素的值初始化observable。

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.

RP Niemeyer在这里回答了一个类似的问题。

#2

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

#1