Question

我有2个使用bootstrap和knockout来绑定数据的日期选择器。

下面是我的datepickers的html模板，我添加了选项

 <div class="clearfix form-inline marginBottom10px row col-md-12 fontWeightNormal" role="form">
        <span class="col-md-2 col-xs-12 pull-left paddingLeft0px">
            <label class="control-label  paddingTop5px" for="datespanFromfilter">
                From
            </label>
        </span>
        <div class="form-group col-md-3 paddingLeft0px paddingRight0px">
            <span class="date input-group" id="datespanFromfilter" data-date-format="DD/MM/YYYY" data-bind="datetimepicker :dateSpanFrom, datePickerOptions : {todayBtn  : true, pickTime: false, format: 'DD/MM/YYYY', maxDate : new Date(), orientation: 'left'}, enable: !refreshingPage()">
                <input class="form-control" id="datespanFromfilterinput" placeholder="DD/MM/YYYY" data-bind="value: dateSpanFrom, enable: !refreshingPage()" disabled />
                <span class="input-group-addon" data-bind="enable: !refreshingPage()">
                    <span class="glyphicon glyphicon-calendar" data-bind="enable: !refreshingPage()"></span>
                </span>
            </span>
        </div>
        <div class="col-md-1 ">
            <label class="control-label paddingLeft0px paddingTop5px" for="datespanTofilter">
                To
            </label>
        </div>
        <div class="form-group col-md-3 paddingLeft0px paddingRight0px">
            <span class="date input-group" id="datespanTofilter" data-date-format="DD/MM/YYYY" data-bind="datetimepicker : dateSpanTo, datePickerOptions : {todayBtn  : true, pickTime: false,  orientation: 'left', format : 'DD/MM/YYYY', maxDate : new Date()}, enable: !refreshingPage()">
                <input class="form-control" placeholder="DD/MM/YYYY" data-bind="value: dateSpanTo, enable: !refreshingPage()" disabled />
                <span class="input-group-addon" data-bind="enable: !refreshingPage(), disabled: !refreshingPage()">
                    <span class="glyphicon glyphicon-calendar" data-bind="enable: !refreshingPage()"></span>
                </span>
            </span>
        </div>
    </div>

这就是我在淘汰赛中处理Datepicker的方法

ko.bindingHandlers.datetimepicker = {
    /// <summary>The customized event handler datepicker.</summary>

    init: function (element, valueAccessor, allBindingsAccessor) {
        allBindings = allBindingsAccessor();

        var options = allBindings.datePickerOptions || {};

        ko.utils.extend(options, allBindings.datePickerOptions)
        $(element).datetimepicker(options).on("change.dp", function (evntObj) {
            self.errorMessage("");
            var observable = valueAccessor();
            if (evntObj.timeStamp !== undefined) {
                var picker = $(this).data("DateTimePicker");
                var d = picker.getDate();
                if (d != null && d != '') {
                    observable(d.format(picker.format));
                }
                else {
                    observable(moment(settings.defaultUtcDate).format("DD/MM/YYYY"));
                }
            }
        });
    },
    update: function (element, valueAccessor) {
        self.errorMessage("");
        var thisFormat = 'DD/MM/YYYY';
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).data("DateTimePicker").setDate(moment(value).format(thisFormat));
    }
};

但是在选项中只有Format和pickTime似乎工作正常，我还需要显示TodayButton并更正方向。但是，如果我更改值

，这些选项无法正常工作

有人会帮助我解决问题

Bootstrap Datepicker有些选项似乎不起作用

0 个答案: