敲除数据与基于 jquery UI 的 dateRangePicker 绑定

Question

我正在使用基于 jQuery UI 的 dateRangePicker，我试图通过自定义绑定器将其与基于 KnockoutJS 的 viewModel 绑定。但我什至无法让 dateRangePicker 读取像

这样的可观察对象

this.range = ko.observable("Jul 1,2015 - Jul 3,2015");

这是我的 JSFiddle 尝试。这是一种错误的方法吗？我需要创建这样的东西吗

this.startDate
this.endDate

Answer 1

这是我使用 moment js 库和带有 knockout 的 daterangepicker js 库实现的示例

HTML

<div id="reportrange" class="pull-right" data-bind="BindRangeDatePicker: Value">
    <i class="fa fa-calendar fa-lg"></i>
    <input type="text" data-bind="value: Value" readonly />
    <span data-bind="text: Value"></span><b class="caret"></b>
</div>

淘汰赛

ko.bindingHandlers.BindRangeDatePicker = {
        init: function (element, valueAccessor, allBindings, vm, context) {
            $(element).daterangepicker(
                {
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                        'Last 7 Days': [moment().subtract('days', 6), moment()],
                        'Last 30 Days': [moment().subtract('days', 29), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                    },
                    startDate: moment().subtract('days', 29),
                    endDate: moment()
                }, function (start, end) {
                    $(element).find('span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                }
            );
        },
        update: function (element, valueAccessor, allBindings, vm, context) {
            var value = valueAccessor();
            $(element).daterangepicker(
                {
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                        'Last 7 Days': [moment().subtract('days', 6), moment()],
                        'Last 30 Days': [moment().subtract('days', 29), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                    },
                    startDate: moment().subtract('days', 29),
                    endDate: moment()
                }, function (start, end) {
                    //var val = start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY');
                    //valueAccessor(val.toString());
                    $(element).find('span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                }
            );
        }
    }

Answer 2

dateRangePicker 文档声明它存储具有以下属性的对象：start 和 end。它将此作为 JSON 字符串存储在用于包含 dateRangePicker 的 <input> 元素的值字段中。因此，您可能希望 range 可观察对象也存储具有 start 和 end 属性的对象。我编写了一个自定义绑定，它将 dateRangePicker 应用于一个元素，并在做出不同选择时将对象写入您的可观察对象：

ko.bindingHandlers.dateRangePicker = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var $el = $(element);
        $el.daterangepicker({
            onChange: function() {
                var range = JSON.parse($el.val());
                valueAccessor()(range);
            }
        });
        var value = valueAccessor()();
        if (value) {
            var range = {"start": new Date(value["start"] + " 00:00:00")};
            if (value["end"]) {
                range["end"] = new Date(value["end"] + " 00:00:00");
            }
            $el.daterangepicker("setRange", range);
        }
    }
};

然后您可以将此应用到您的 <input> 元素：

<input id="e1" data-bind="dateRangePicker: range">

如果您需要通过视图模型初始化 dateRangePicker 上的值，则需要将一个对象存储到 range 与 dateRangePicker 使用的格式匹配的可观察对象中：

this.range = ko.observable({start:"2015-07-01", end:"2015-07-03"});

这是一个fiddle：http://jsfiddle.net/efywmomz/

更新

我更改了自定义绑定以使用 moment 库并更新了 fiddle 以从视图模型初始化 range：http://jsfiddle.net/efywmomz/1/

ko.bindingHandlers.dateRangePicker = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var $el = $(element);
        $el.daterangepicker({
            onChange: function() {
                var range = JSON.parse($el.val());
                valueAccessor()(range);
            }
        });
        var value = valueAccessor()();
        if (value) {
            var range = {"start": moment(value["start"])._d};
            if (value["end"]) {
                range["end"] = moment(value["end"])._d;
            }
            $el.daterangepicker("setRange", range);
        }
    }
};

敲除数据与基于 jquery UI 的 dateRangePicker 绑定

knockout databind with jqueryUI based dateRangePicker

jquery-ui

daterangepicker

knockout.js

更新