javascript - knockout 绑定(bind)到日期选择器

Question

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

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

日期选择器代码:

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

我尝试数据绑定(bind):

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

Answer 1

看来您需要阅读一些有关 knockout 方面的内容，特别是 custom binding handler部分，它是一种以干净的方式将非 knockout 代码与 knockout View 模型连接起来的-a-方式。如果您在应用程序的其他部分需要日历选择器，这还会创建一段可重用的代码。我已经创建了您需要什么的一个非常基本的概念，作为练习，我将让您解决输入错误日期时的错误处理，或者尝试想出一个想法，您可以在其中实现添加一个空/空输入框。

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>