0

カスタムバインダーを介してKnockoutJSベースのviewModelにバインドしようとしているjQuery UIベースのdateRangePickerを使用しています。しかし、dateRangePickerにオブザーバブルを読み取らせることさえできません

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

これが私の JSFiddleの試みです。それは間違ったアプローチですか、このようなものを作成する必要がありますか

this.startDate
this.endDate
4

2 に答える 2

0

これは私が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'));
                }
            );
        }
    }
于 2015-07-08T10:08:13.260 に答える