Вопрос по datepicker, knockout.js, twitter-bootstrap – Начальная загрузка с помощью базы данных knockout.js

22

Этот вопрос похож наknockoutjs привязка данных с помощью jquery-ui datepicker, но вместо указателя даты jQueryUI я хотел бы использовать один изBootstrap Datepickers.

API для DatePicker Bootstrap отличается от jquery-ui, и у меня возникают некоторые проблемы, когда я пытаюсь заставить его работать с knockout.js. Я создалJSFiddle, чтобы попробовать это.

Похоже, что DatePicker Bootstrap может быть намного проще в использовании, потому что он не хранит дату независимо. Однако я хотел бы знать, является ли jsFiddle подходящим способом использования виджета DatePicker Bootstrap с knockout.js, т.е.

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

      ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).datepicker("destroy");
        });
    },
    update: function(element, valueAccessor) {
    }
};

Ваш Ответ

4   ответа
2

Error: User Rate Limit Exceeded

ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
    //initialize datepicker with some optional options

    var options = {
        autoclose: true,
        format: 'yyyy-mm-dd',
    }

    //var options = allBindingsAccessor().datepickerOptions || {};
    $(element).datepicker(options);

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

        if (ko.isObservable(value)) {
            var myDate = event.date;
            var month = myDate.getMonth() + 1;
            var monthText = month;

            if (month < 10)
                monthText = "0" + month;

            var day1 = parseInt(myDate.getDate());
            var dayText = day1;

            if (day1 < 10)
                dayText = '0' + day1;

            value(myDate.getFullYear() + '-' + monthText + '-' + dayText);
        }
    });
},
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());
        widget.setValue(widget.date);
    }
}};
41

Error: User Rate Limit Exceeded

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

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

Error: User Rate Limit ExceededchangeDateError: User Rate Limit ExceededupdateError: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

ВотjsFiddle это имеет более поддающееся преобразование строки-> даты, когда поле обновляется. У этого все еще есть предостережение, что только изменения через виджет зарегистрированы; внесение изменений в поле ввода не обновляет модель. Brian M. Hunt
Вот обновление, чтобы связать сchange событие для ответа на изменения в поле ввода:jsfiddle.net/rniemeyer/uQcCx/3
JsFiddles выше, похоже, больше не работает, вы вносили какие-то изменения с тех пор? больше не появляться ура
Я заметил, что этот пример больше не работает в том смысле, что начальной датой выбора даты не является дата в текстовом поле. Это та самая ошибка, которую я пытаюсь исправить в своем собственном коде. Есть идеи?
@dtjmsy Я обновил скрипку.
5

Error: User Rate Limit Exceeded

$(element).datepicker('update', dataSource());

Error: User Rate Limit Exceeded

Error: User Rate Limit ExceededError: User Rate Limit Exceeded

Update:

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

$(element).on("changeDate", function (ev) {
    var observable = valueAccessor();
    if ($(element).is(':focus')) {
        // Don't update while the user is in the field...
        // Instead, handle focus loss
        $(element).one('blur', function(ev){
            var dateVal = $(element).datepicker("getDate");
            observable(dateVal);
        });
    }
    else {
        observable(ev.date);
    }
});

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

6

Error: User Rate Limit Exceeded

ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {

    var unwrap = ko.utils.unwrapObservable;
    var dataSource = valueAccessor();
    var binding = allBindingsAccessor();

    //initialize datepicker with some optional options
    var options = allBindingsAccessor().datepickerOptions || {};
    $(element).datepicker(options);
    $(element).datepicker('update', dataSource());
    //when a user changes the date, update the view model
    ko.utils.registerEventHandler(element, "changeDate", function (event) {
        var value = valueAccessor();
        if (ko.isObservable(value)) {
            value(event.date);
        }
    });
},
update: function (element, valueAccessor) {
    var widget = $(element).data("datepicker");

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

    //when the view model is updated, update the widget
    if (widget) {
        widget.date = value;
        if (widget.date) {
            widget.setValue();
            $(element).datepicker('update', value)
        }
    }
}};
Обновление работало с этим. Спасибо.

Похожие вопросы