【问题标题】:Knockout property datepicker not working淘汰财产日期选择器不工作
【发布时间】:2017-07-14 12:11:36
【问题描述】:

我正在尝试按照以下示例将日期选择器绑定到我的模板属性中:http://jsfiddle.net/H8xWY/130/

从提琴手看起来很简单,但问题是当我专注于日期文本框时,日期选择器根本不会出现。也没有控制台错误。不知道为什么什么都没发生以及我错过了什么?

我的模特:

var MyViewModel = function(model) {
    var self = this;

    self.date = ko.observable(new Date());
}

我的模板:

<div id="my-form">
            <input data-bind="datepicker: date, datepickerOptions: { minDate: new Date() }" />

</div>
<script src="models/my-model.js" type="text/javascript"></script>
<script type="text/javascript">
    var target = document.getElementById("my-form");
    var data = @Html.Raw(Json.Encode(Model));
    var myViewModel = new MyViewModel(data);
    ko.applyBindings(myViewModel, target);
</script>

【问题讨论】:

标签: knockout.js datepicker knockout-templating


【解决方案1】:

添加日期选择器的淘汰赛扩展

ko.bindingHandlers.datepicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            //initialize datepicker with some optional options
            var options = allBindingsAccessor().datepickerOptions || {};
            $(element).datepicker(options);

            //handle the field changing
            ko.utils.registerEventHandler(element, "change", function () {
                var observable = valueAccessor();
                observable($(element).datepicker("getDate"));
            });

            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).datepicker("destroy");
            });

        },
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());

            //handle date data coming via json from Microsoft
            if (String(value).indexOf('/Date(') == 0) {
                value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
            }

            current = $(element).datepicker("getDate");

            if (value - current !== 0) {
                $(element).datepicker("setDate", value);
            }
        }
    };

【讨论】:

  • 它可以在没有扩展名的情况下工作,但如果我在模板中有一个日期选择器并在第二个项目上选择一个日期 - 它会更新第一个项目中的日期。
猜你喜欢
  • 2015-09-22
  • 2023-03-15
  • 2015-10-12
  • 1970-01-01
  • 1970-01-01
  • 2015-05-30
  • 2014-01-02
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多