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

【问题标题】：How to set value in Date type field如何在日期类型字段中设置值
【发布时间】：2015-10-09 18:27:20
【问题描述】：

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

当 "Filter" 对象参数传入 HTML 时，我无法从 KO "optionsAfterRender" 函数中分配日期字段。

HTML（Razor 视图）：

 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（淘汰赛）：

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

【问题讨论】：

我猜它是否与数据绑定有关。当在下拉列表中使用相同的选项绑定时，我能够实现这一点，但不能使用文本或日期，因为有'数据绑定：价值'

标签： javascript jquery asp.net-mvc razor knockout.js

【解决方案1】：

问题可能是日期的格式。试试这个。

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

【讨论】：

【解决方案2】：

您似乎想使用从 HTML 元素中获取的值来初始化您的 observable。

理想情况下，您希望能够做到这一点：

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

但是，这不起作用，我相信你已经尝试过了，因为 value 绑定的默认行为不会使用 上的 value 更新绑定的 observable绑定初始化时的 dom 元素。

但是有一个解决方案，您可以创建一个自定义绑定，它可以完成现有 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">

查看下面的工作 sn-p：

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 回答了类似的问题here。

【讨论】：