敲除绑定到日期选择器答案

【问题标题】：Knockout binding to a date picker敲除绑定到日期选择器
【发布时间】：2019-10-30 15:51:29
【问题描述】：

我正在尝试将所选日期从 Bootstrap 日期选择器传递到 Javascript 代码。另外，默认情况下，日期选择器应该选择今天的日期。

目前，当单击搜索按钮时，当前日期会显示在警报中。但是，我在将其绑定到日期选择器时遇到了麻烦。我错过了什么/做错了什么？

日期选择器代码：

<form class="form form-horizontal" style="background-color:white">
    <div class="form-group">

        <div class="col-lg-2">
            <div class="input-group addon">
                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                <input id="searchDate" readonly style="cursor: pointer;" data-bind="datePicker: SearchDate" class="form-control pad-bottom-when-small" type="text" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-autoclose="true"/>
            </div>
        </div>

        <div class="col-lg-3">
            <button class="btn btn-success" onclick="search()">Search</button>
        </div>
    </div>
</form>

我的数据绑定尝试：

<script>
    ko.applyBindings({
        SearchDate: ko.observable(moment().toDate()),
    });
</script>

<script type="text/javascript">
    self.SearchDate = ko.observable(moment().toDate());

    function search() {
        alert(self.SearchDate());
    }
</script>

【问题讨论】：

我们无法回答，除非您提供更多信息，例如您正在使用的日期选择器库，向我们展示您调用所述日期选择器的自定义绑定处理程序，也许创建一个代码 sn-p 或 jsfiddle 向我们展示一个完整的例子，从你所拥有的东西中学习比我们自己找出这一切要容易得多
@Sam 抱歉，更新了 OP 以提及它的 Bootstrap 日期选择器。绑定处理程序是什么意思？我已经包含了到目前为止的ko.applyBindings。
这段代码data-bind="datePicker: SearchDate" 意味着在您的项目中存在一个名为datePicker 的绑定处理程序，并且您正在为它提供来自VM 的observable。我们想看看。

标签： javascript knockout.js

【解决方案1】：

您似乎需要在淘汰赛方面进行一些阅读，特别是在custom binding handler 部分，这是将非淘汰赛代码与您的淘汰赛视图模型挂钩的-a-方式干净的方式。如果您在应用程序的另一部分需要日历选择器，这也会创建一段可重用的代码。我已经创建了一个非常基本的概念来说明您需要什么，作为练习，我将让您在输入错误日期时理清错误处理，或者尝试想出一个可以实现添加的想法一个空/null 输入框。

ko.bindingHandlers.datePicker = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var options = { format: 'dd-mm-yyyy', weekStart: 1, autoclose: true };
    $(element).datepicker(options);
    $(element).datepicker().on('changeDate', function(e) { valueAccessor()(e.date); });
  },
  update: function(element, valueAccessor, allBindingsAccessor) {
    var date = ko.unwrap(valueAccessor());
    $(element).datepicker('setDate', date);
  }
};

ko.applyBindings(() => {
  var self = this;
  self.foo = ko.observable(new Date());
  self.bar = ko.computed(() => {
    var date = self.foo();
    return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<input type="text" data-bind="datePicker: foo" />
<div data-bind="text: bar"></div>

【讨论】：