Knockout DateTime Picker - 默认日期不绑定

Question

我正在使用这个Bootstrap DateTime Picker:http://eonasdan.github.io/bootstrap-datetimepicker/

我为DateTime创建了一个名为datepicker的Custom Binder:

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/

我需要在DateTime Picker中显示第一个值.

编辑

问题是我的ViewModel有一个住宿列表

这是我的viewModel的控制台日志

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

这是循环浏览viewModel然后将alld Datetimes转换为moment对象的唯一解决方案

Answer 1

在@David和@Bryant的帮助之后,我更改了我的代码以使用时刻对象日期更新viewModel.

问题是,从DateTime Picker中选择Date后,Date只能正确回发.所以我更改了代码,因此在Initialized时我更新了viewModel.它现在正在运作.

这是DateTime Picker

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

我使用了以下datepicker绑定.

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