淘汰赛日期时间选择器 - 默认日期不绑定

Question

我正在使用这个 Bootstrap 日期时间选择器：http://eonasdan.github.io/bootstrap-datetimepicker/

我为 DateTime 创建了一个名为 datepicker 的自定义活页夹：

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {format: 'DD/MM/YYYY HH:mm'};
        $(element).datetimepicker(options);

        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "dp.change", 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();
            }
        }
    }
};

我的模型在 JSON 中，因为我正在将 C# dateTime 转换为 JSON 我得到这个日期："/Date(1427368178393)/"

            <div class="col-md-4">
                <div class="form-group">
                    <label class="control-label">Quote Date</label>
                    <div class='input-group date dateTimes'>
                        <input type="text" class="form-control" data-bind="datepicker: QuoteDateTime" />
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                </div>
            </div>

但问题是页面第一次加载时，即使 QuoteDateTime 具有未显示在 DateTimePicker 中的值。

这是 JSFiddle：

https://jsfiddle.net/mdawood1991/ezv7qxbt/

我需要在日期时间选择器中显示第一个值。

编辑

问题是我的 ViewModel 有一个调节列表

这是我的 viewModel 的控制台日志

我可以按照你的建议将每个 dateTime 转换为一个时刻，但是我不应该使用 knockout Mapping Plugin：http://knockoutjs.com/documentation/plugins-mapping.html

这是循环遍历我的 viewModel 然后将 alld Datetimes 转换为 moment 对象的唯一解决方案吗

Answer 1

我认为你需要使用 default date option.

var options = allBindingsAccessor().datepickerOptions || {
                format: 'DD/MM/YYYY HH:mm',
                defaultDate: valueAccessor()()
            };

更新了 JSFiddle： https://jsfiddle.net/3jqL8s1m/

Answer 2

您的更新功能根本不起作用。让它工作将解决您的问题并导致对可观察对象的更新反映在控件中。

使用$(element).data("DateTimePicker")
将日期字符串转换为 moment.js 对象
使用date()函数传递。

代码：

update: function(element, valueAccessor)   {
    var widget = $(element).data("DateTimePicker");

    if (widget) {
        var date = ko.utils.unwrapObservable(valueAccessor());

        if (typeof date === "string") {
            // convert c# string to momentjs object
            date = moment(date);
        }

        widget.date(date);
    }
}

编辑 -- 选项 2：将所有内容保留为 moment.js 对象

然而，您的代码存在一个问题，即字符串被传递到可观察对象中，但每当此自定义绑定更新可观察对象时，它就会使它成为一个 moment.js 对象（input -> string 和 output -> Moment).要解决此问题，我建议让用户将 moment.js 对象传递给可观察对象（input -> Moment 和 output -> Moment）。

首先，在填充视图模型时将 C# 字符串转换为 moment.js 对象：

self.QuoteDateTime = ko.observable(moment(data.QuoteDateTime));

其次，更改您的更新函数以处理 moment.js 个对象而不是字符串：

update: function(element, valueAccessor)   {
    var widget = $(element).data("DateTimePicker");
    //when the view model is updated, update the widget
    if (widget) {
        var date = ko.utils.unwrapObservable(valueAccessor());
        widget.date(date);
    }
}

您可以在这个 jsfiddle 中看到它工作正常：

https://jsfiddle.net/ezv7qxbt/21/

Answer 3

在@David 和@Bryant 的帮助下，我更改了代码以使用时刻对象日期更新 viewModel。

问题是，只有在从日期时间选择器中选择日期后，日期才能正确回发。所以我更改了代码，以便在初始化时更新 viewModel。它现在正在工作。

这是日期时间选择器

http://eonasdan.github.io/bootstrap-datetimepicker/

我使用了以下日期选择器绑定。

JSFiddle 工作：http://jsfiddle.net/mdawood1991/cL9k2sbe/

我的解决方案：

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        //initialize datepicker with some optional options
        var options = {
            format: 'DD/MM/YYYY HH:mm',
            defaultDate: valueAccessor()()
        };

        if (allBindingsAccessor() !== undefined) {
            if (allBindingsAccessor().datepickerOptions !== undefined) {
                options.format = allBindingsAccessor().datepickerOptions.format !== undefined ? allBindingsAccessor().datepickerOptions.format : options.format;
            }
        }

        $(element).datetimepicker(options);

        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "dp.change", function (event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                value(event.date);
            }
        });

        var defaultVal = $(element).val();
        var value = valueAccessor();
        value(moment(defaultVal, options.format));
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var thisFormat = 'DD/MM/YYYY HH:mm';

        if (allBindingsAccessor() !== undefined) {
            if (allBindingsAccessor().datepickerOptions !== undefined) {
                thisFormat = allBindingsAccessor().datepickerOptions.format !== undefined ? allBindingsAccessor().datepickerOptions.format : thisFormat;
            }
        }

        var value = valueAccessor();
        var unwrapped = ko.utils.unwrapObservable(value());

        if (unwrapped === undefined || unwrapped === null) {
            element.value = new moment(new Date());
            console.log("undefined");
        } else {
            element.value = unwrapped.format(thisFormat);
        }
    }
};

淘汰赛日期时间选择器 - 默认日期不绑定

Knockout DateTime Picker - Default Date not Binding

datetime

knockout-mapping-plugin

knockout.js