Question

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

这样的可观察对象

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

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

this.startDate
this.endDate

Answer 1

这是一个我使用时间js库和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 observable还存储具有start和end属性的对象。我编写了一个自定义绑定，它将dateRangePicker应用于一个元素，并在任何时候进行不同的选择时将该对象写入您的observable：

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

如果需要通过viewmodel初始化dateRangePicker上的值，则需要将对象存储到与dateRangePicker使用的格式匹配的range observable中：

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

这是一个小提琴：http://jsfiddle.net/efywmomz/

更新

我更改了自定义绑定以使用时刻库并更新了小提琴以从viewmodel初始化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);
        }
    }
};

使用基于jqueryUI的dateRangePicker

2 个答案:

更新