Using bootstrap datetimepicker with knockout js date input field submission issue

0
votes

I am using knockout js with bootstrap DateTimePicker from here http://eonasdan.github.io/bootstrap-datetimepicker/Installing/#knockout, everything works fine, but the problem is at submission stage that is when I submit the form I can't get the updated value of datetimepicker input field: Here is my working HTML:

<div data-bind="foreach: params">
    <input class="form-control" type="text" data-bind="attr: { name: label}, value: value, dateTimePicker: 'date_field'" />

     <button data-bind="event: { click: addParameters } , attr: { class: btn btn-success', href: 'javascript:void(0)'}">Save Settings</button>
</div>

Here is my ViewModel:

function viewModel(data)
{
    // date field observable
    self.date_field  = ko.observable(new Date('2012/12/12'));
    // Observable to track the html form
    self.params = ko.observableArray();
    // when user click by Save Settings button
    self.addParameters =  function(options) 
    {
        var dataparams = self.params();
        console.log(dataparams);
    }    
}
ko.applyBindings(new viewModel);

Could anyone please guide me what I am doing wrong? Thank you an advance.

2
javascriptjquerytwitter-bootstrapknockout.jseonasdan-datetimepicker
Please include enough (more) code to reproduce it, and remove any code irrelevant to the question. This makes it a lot easier to help you. See 'minimal reproducible example' for guidance if needed. - Jeroen
self.params() is an empty observable Array. you never add anything to it - Matin Kajabadi

2 Answers

0
votes

I use this datepicker as well. The module doesn't send the update event to knockout observables. I do this for each datepicker after initializing it:

picker.on('dp.change', function (e) {
    date_field(e.date);
});
0
votes

I had the same problem in knockout.js v 3.3.1

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

    $(element).data('DateTimePicker').setDate(makeStringStandard(value));
    $(element).on('dp.change', function (e) {
        debugger;
        valueAccessor(e.date);
    });
}