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

How to set value in Date type field

本文关键字：设置 字段 类型 日期      更新时间：2023-09-26

我有下面的HTML和JS，我使用MVC。下面是场景

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

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(淘汰赛):

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

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

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

看起来好像你想用HTML元素中的一个值来初始化你的可观察对象。

理想情况下，您希望能够这样做:

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

然而，这将不起作用，因为我相信你已经尝试过了，因为value绑定的默认行为不会在绑定初始化时用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">

请看下面的工作代码片段:

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在这里回答了一个类似的问题。

相关文章：