Question

我无法让我的datepicker绑定正常工作。初始化时，输入字段为空有没有人有一个正确的datepicker处理程序，用于设置输入字段的初始值？

这是我的HTML代码：

＆＃13;

function setMappingBindings() {
    obj.myCase(mapCase({ "serviceDate": "2015-09-03T00:00:00", "deadLineDate": "2014-09-16T00:00:00" }));
}
function mapCase(data) {
    var map = ko.mapping.fromJS(data);

    map.serviceDate = moment(map.serviceDate()).format("DD-MM-YYYY");
    map.deadLineDate = moment(map.deadLineDate()).format("L");
    return map;
}
var obj = {
    myCase: ko.observable(),
    testDate: ko.observable(moment().format('L')),

};
$(document).ready(function () {
     ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);

        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "changeDate", function (event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                value(event.date);
            }
        });
    },
    update: function (element, valueAccessor) {
        var widget = $(element).data("datepicker");
        //when the view model is updated, update the widget
        if (widget) {
            widget.date = ko.utils.unwrapObservable(valueAccessor());
            if (widget.date) {
                widget.setValue();
            }
        }
    }
};

    $('.datepicker').datepicker();
    setMappingBindings();
    ko.applyBindings(obj, $("#page-wrapper")[0]);

});

＆＃13;

<div class="row">
   <input type="text" maxlength="50" class="form-control datepicker" data-date-format="dd-mm-yyyy" data-bind="datepicker: myCase().serviceDate">
</div>
<div class="row">
   <input type="text" maxlength="50" class="form-control datepicker" data-date-format="dd-mm-yyyy" data-bind="datepicker: testDate">
</div>

＆＃13;

Answer 1

您可以使用输入标记上的值绑定来为输入设置初始值。

像这样：value: testDate

function setMappingBindings() {
    obj.myCase(mapCase({ "serviceDate": "2015-09-03T00:00:00", "deadLineDate": "2014-09-16T00:00:00" }));
}
function mapCase(data) {
    var map = ko.mapping.fromJS(data);

    map.serviceDate = moment(map.serviceDate()).format("DD-MM-YYYY");
    map.deadLineDate = moment(map.deadLineDate()).format("L");
    return map;
}
var obj = {
    myCase: ko.observable(),
    testDate: ko.observable(moment().format('L')),

};
$(document).ready(function () {
     ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);

        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "changeDate", function (event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                value(event.date);
            }
        });
    },
    update: function (element, valueAccessor) {
        var widget = $(element).data("datepicker");
        //when the view model is updated, update the widget
        if (widget) {
            widget.date = ko.utils.unwrapObservable(valueAccessor());
            if (widget.date) {
                widget.setValue();
            }
        }
    }
};

    setMappingBindings();
    ko.applyBindings(obj, $("#page-wrapper")[0]);

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <input type="text" maxlength="50" class="form-control datepicker" data-date-format="dd-mm-yyyy" data-bind="datepicker: myCase().serviceDate, value: myCase().serviceDate">
</div>
<div class="row">
   <input type="text" maxlength="50" class="form-control datepicker" data-date-format="dd-mm-yyyy" data-bind="datepicker: testDate, value: testDate">
</div>

Answer 2

我知道这是一个相当古老的问题，但也许我的经验可以帮助某人。

我在我的一个持久项目中使用bootstrap-datepicker（link到产品页面），我确实遇到了knockout整合的一些问题，包括分配初始日期，即这个主题的主题。

我尝试了不同的ko自定义绑定到datepicker，但似乎所有这些解决了一个问题引入了一系列新问题。

直到我遇到这个版本：http://jsfiddle.net/wtqsgtwm/89/似乎完全可以满足我的所有需求。

请注意，它不需要单独的value绑定来设置初始日期值。简单

<input type="text" data-bind="datePicker: myDate" >

就够了。

Knockout datepicker绑定

2 个答案: