如何将 jQuery datepicker 中的选定值绑定到 Knockout Observable答案

【问题标题】：How to bind the selected value from jQuery datepicker to a Knockout Observable如何将 jQuery datepicker 中的选定值绑定到 Knockout Observable
【发布时间】：2013-10-27 21:14:30
【问题描述】：

我有一个往返日期范围 datepicker (jquery)，我试图将选定的值绑定到剔除 observables。往返日期选择器限制了用户可以选择的日期范围，并在用户选择“开始”日期后默认为过去 30 天。

我已经绑定了两个 span 元素来测试绑定到 observables 的值，但是每当我选择一个日期时，datepicker 会适当地设置字段，但 observables 永远不会触发/更新。

Working Fiddle located here

html

From
<input type="text" id="StartDate" data-bind="value: myStartDate()" />to
<input type="text" id="EndDate"  data-bind="value: myEndDate()"/>
<hr/>
<p>start day<span data-bind="text: myStartDate()" />
</p>
<p>end day<span data-bind="text: myEndDate()" />
</p>

js（和ko结合）

var myViewModel = function () {
    var self = this;
    self.myStartDate = ko.observable();
    self.myEndDate = ko.observable();
};
ko.applyBindings(new myViewModel());

//calendar controls
//setup min and max date ranges
var d = new Date();
d.setDate(d.getDate());
//default range
var defRange = 30;
// total range 1yr +/-
var e = new Date();
var xDate = 365;
e.setDate(d.getDate() - xDate);

$('#StartDate').datepicker({
    maxDate: d,
    beforeShow: function () {
        $('.ui-datepicker').css('font-size', 10);
    },
    onSelect: function (date) {
        var dp2 = $('#EndDate');
        var startDate = $(this).datepicker('getDate');
        var minDate = $(this).datepicker('getDate');
        startDate.setDate(startDate.getDate() + xDate);
        //defaults to past 30 days
        dp2.datepicker('setDate', -defRange);
        minDate.setDate(minDate.getDate() - xDate);
        //set max date for start and end range
        dp2.datepicker('option', 'maxDate', startDate);
        dp2.datepicker('option', 'minDate', minDate);
        $(this).datepicker('option', 'minDate', minDate);
    }
});

$('#EndDate').datepicker({
    maxDate: d,
    minDate: e,
    beforeShow: function () {
        $('.ui-datepicker').css('font-size', 10);
    }
});

$('#StartDate').focus(function () {
    $('#StartDate').datepicker('show');
});

$('#EndDate').focus(function () {
    $('#EndDate').datepicker('show');
});

我陷入困境的地方是了解在日期选择器中选择日期并填充到推送到可观察对象的输入字段后，我需要做什么来设置值。

感谢您的任何提示或建议，

【问题讨论】：

问题是，淘汰赛和任何第 3 方 ui 库都不会开箱即用兼容。在您的示例中，数据绑定和 .datepicker 初始化程序根本没有相互交谈...... datepicker 对象不知道如何处理您的 observable。这里有一个线程可以查看...groups.google.com/d/msg/knockoutjs/dtXftC1Ncgg/urob4cACH7EJ

标签： javascript jquery jquery-ui knockout.js

【解决方案1】：

1) 首先你应该使用

 data-bind="value: myStartDate"

而不是

 data-bind="value: myStartDate()"

通过此更改，第二个日期选择器按预期工作。

2) 第一个日期选择器不起作用，因为您手动设置了值 (.datepicker('setDate', ..);)
您应该在输入上触发change 事件以更新可观察对象。

  /// 
  startDate.setDate(startDate.getDate() + xDate);
  $(this).change()  
  ///
  dp2.datepicker('setDate', -defRange);
  dp2.change();
  ///

JSFiddle DEMO

【讨论】：