淘汰日期选择器绑定

Question

我的日期选择器绑定无法正常工作。初始化时输入字段为空。
有人有合适的日期选择器处理程序来设置输入字段的初始值吗？

这是我的 html 代码：

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]);

});

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

Answer 1

您可以在输入标签上使用 value 绑定来为输入设置初始值。

像这样：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 自定义绑定，但似乎所有解决一个问题的方法都引入了一系列新问题。

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

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

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

够了。

淘汰日期选择器绑定

Knockout datepicker binding

datepicker

twitter-bootstrap

knockout.js