jquery-ui - 使用基于 jqueryUI 的 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

dateRangePicker 文档声明它存储具有以下属性的对象：start和end. 它将其作为 JSON 字符串存储在<input>用于包含 dateRangePicker 的元素的值字段中。因此，您可能希望您的rangeobservable 也存储具有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 上的值，那么您需要将一个对象存储到range与 dateRangePicker 使用的格式匹配的 observable 中：

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

Here is a fiddle: http://jsfiddle.net/efywmomz/

Update

I altered the custom binding to use the moment library and updated the fiddle to initialize the range from the viewmodel: 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);
        }
    }
};

Answer 2

这是我用 moment 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'));
                }
            );
        }
    }