Knockout DateTime Picker - 默认日期不绑定 [英] Knockout DateTime Picker - Default Date not Binding

问题描述

我正在使用这个Bootstrap DateTime选择器：

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

解决方案

帮助之后从@David和@Bryant我更改了代码以更新视图模型与时间对象日期。

问题是，日期只是正确地发布从DateTime选择器中选择一个日期后。所以我更改了代码，所以当初始化我更新viewModel。它现在正在工作。

这是DateTime选择器

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

我使用了以下datepicker绑定。

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

我的解决方案：

  ko.bindingHandlers.datepicker = {
 init：function（element，valueAccessor，allBindingsAccessor，viewModel，bindingContext）{
 //初始化datepicker与一些可选选项
 var options = {
格式：'DD / MM / YYYY HH：mm'，
 defaultDate：valueAccessor（）（）
}; 
 
 if（allBindingsAccessor（）！== undefined）{
 if（allBindingsAccessor（）。datepickerOptions！== undefined）{
 options.format = allBindingsAccessor（）。datepickerOptions。格式！== undefined？ allBindingsAccessor（）。datepickerOptions.format：options.format; 
} 
} 
 
 $（element）.datetimepicker（options）; 
 
 //当用户更改日期时，更新视图模型
 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）; 
} 
} 
}; 
  

I am using this Bootstrap DateTime Picker: http://eonasdan.github.io/bootstrap-datetimepicker/

I have created a Custom Binder for DateTime called 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();
            }
        }
    }
};

And I My Model is in JSON, as I am converting C# dateTime to JSON I get this Date: "/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>

But the Problem is that the first time the Page Loads even though the QuoteDateTime has a value it is not showing in the DateTimePicker.

Here is the JSFiddle:

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

I need the First Value to Show in the DateTime Picker.

EDIT

The thing is that my ViewModel has a List of Accommodations

This is the Console Log of my viewModel

I could convert every dateTime to a moment as you suggester, but then I shouldn't use the knockout Mapping Plugin: http://knockoutjs.com/documentation/plugins-mapping.html

Is this the only solution to loop through my viewModel and then converting alld Datetimes to a moment object

解决方案

After help From @David and @Bryant I changed my code to update viewModel with moment object date.

The Problem was that the Date was only posting back correctly after selecting a Date from the DateTime Picker. So I changed code so when Initialized I update the viewModel. And it is working now.

This is the DateTime Picker

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

I used the following datepicker binding.

JSFiddle Working: http://jsfiddle.net/mdawood1991/cL9k2sbe/

My Solution:

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 - 默认日期不绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！