Evento de alteração de datepicker da UI do jQuery não capturado pelo KnockoutJS

Estou tentando usar o KnockoutJS com a interface do jQuery. Eu tenho um elemento de entrada com um datepicker anexado. Atualmente, estou em execução knockout.debug.1.2.1.jse parece que o evento de mudança nunca está sendo capturado pelo Knockout. O elemento fica assim:

<input type="text" class="date" data-bind="value: RedemptionExpiration"/>

Eu até tentei alterar o valueUpdatetipo de evento, mas sem sucesso. Parece que o Chrome causa um focusevento antes de alterar o valor, mas o IE não.

Existe algum método Knockout que "religue todas as ligações"? Tecnicamente, só preciso que o valor seja alterado antes de enviá-lo de volta ao servidor. Para que eu pudesse viver com esse tipo de solução alternativa.

Eu acho que o problema é culpa do datepicker, mas não consigo descobrir como consertar isso.

Alguma ideia?

Eu acho que, para o datepicker da interface do usuário do jQuery, é preferível usar uma ligação personalizada que leia / escreva com objetos Date usando as APIs fornecidas pelo datepicker.

A ligação pode parecer (da minha resposta aqui ):

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

        $el.datepicker(options);

        //handle the field changing by registering datepicker's changeDate event
        ko.utils.registerEventHandler(element, "changeDate", function () {
            var observable = valueAccessor();
            observable($el.datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $el.datepicker("destroy");
        });

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

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        var current = $el.datepicker("getDate");

        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
    }
};

Você usaria como:

<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />

Exemplo no jsFiddle aqui: http://jsfiddle.net/rniemeyer/NAgNV/

Aqui está uma versão da resposta do RP Niemeyer que funcionará com os scripts de validação de knockout encontrados aqui: http://github.com/ericmbarnard/Knockout-Validation

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

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).val());
            if (observable.isValid()) {
                observable($(element).datepicker("getDate"));

                $(element).blur();
            }
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker("destroy");
        });

        ko.bindingHandlers.validationCore.init(element, valueAccessor, allBindingsAccessor);

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

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        current = $(element).datepicker("getDate");

        if (value - current !== 0) {
            $(element).datepicker("setDate", value);
        }
    }
};

As mudanças são feitas no manipulador de eventos de mudança para passar o valor digitado e não a data para os scripts de validação primeiro, configurando apenas a data para o observável, se for válido. Também adicionei o validationCore.init necessário para ligações personalizadas discutidas aqui:

http://github.com/ericmbarnard/Knockout-Validation/issues/69

Eu também adicionei a sugestão de rpenrose para um borrão na mudança para eliminar alguns cenários desagradáveis ​​do datepicker atrapalhando as coisas.

Eu usei uma abordagem diferente. Como o knockout.js não parece acionar o evento com alterações, forcei o datepicker a chamar change () para sua entrada depois de fechada.

$(".date").datepicker({
    onClose: function() {
        $(this).change(); // Forces re-validation
    }
});

Embora todas essas respostas tenham me poupado muito trabalho, nenhuma delas funcionou totalmente para mim. Após selecionar uma data, o valor vinculado não será atualizado. Só consegui atualizá-lo ao alterar o valor da data usando o teclado e clicando fora da caixa de entrada. Corrigi isso aumentando o código do RP Niemeyer com o código do syb para obter:

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

            var funcOnSelectdate = function () {
                var observable = valueAccessor();
                observable($(element).datepicker("getDate"));
            }

            options.onSelect = funcOnSelectdate;

            $(element).datepicker(options);

            //handle the field changing
            ko.utils.registerEventHandler(element, "change", funcOnSelectdate);

            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).datepicker("destroy");
            });

        },
        update: function (element, valueAccessor) {

            var value = ko.utils.unwrapObservable(valueAccessor());
            if (typeof(value) === "string") { // JSON string from server
                value = value.split("T")[0]; // Removes time
            }

            var current = $(element).datepicker("getDate");

            if (value - current !== 0) {
                var parsedDate = $.datepicker.parseDate('yy-mm-dd', value);
                $(element).datepicker("setDate", parsedDate);
            }
        }
    };

Eu suspeito de colocar o observável ($ (elemento) .datepicker ("getDate")); em sua própria função e registrando-a com options.onSelect fez o truque?

Obrigado por este artigo, achei muito útil.

Se você deseja que o DatePicker se comporte exatamente como o comportamento padrão da UI do JQuery, recomendo adicionar um desfoque no elemento no manipulador de eventos de alteração:

ie

    //handle the field changing
    ko.utils.registerEventHandler(element, "change", function () {
        var observable = valueAccessor();
        observable($(element).datepicker("getDate"));

        $(element).blur();

    });

Resolvi esse problema alterando a ordem dos meus arquivos de script incluídos:

<script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.custom.js")"></script>
<script src="@Url.Content("~/Scripts/knockout-2.2.1.js")"></script>

O mesmo que RP Niemeyer, mas melhor suporte para WCF DateTime, Timezones e Using the DatePicker onSelect JQuery propriedade.

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

            var funcOnSelectdate = function () {
                var observable = valueAccessor();
                var d = $(element).datepicker("getDate");
                var timeInTicks = d.getTime() + (-1 * (d.getTimezoneOffset() * 60 * 1000));

                observable("/Date(" + timeInTicks + ")/");
            }
            options.onSelect = funcOnSelectdate;

            $(element).datepicker(options);

            //handle the field changing
            ko.utils.registerEventHandler(element, "change", funcOnSelectdate);

            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).datepicker("destroy");
            });

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

            //handle date data coming via json from Microsoft
            if (String(value).indexOf('/Date(') == 0) {
                value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
            }

            current = $(element).datepicker("getDate");

            if (value - current !== 0) {
                $(element).datepicker("setDate", value);
            }
        }
    };

Aproveitar :)

http://jsfiddle.net/yechezkelbr/nUdYH/

Eu acho que isso pode ser feito muito mais fácil: <input data-bind="value: myDate, datepicker: myDate, datepickerOptions: {}" />

Portanto, você não precisa de tratamento manual de alterações na função init.

Mas, nesse caso, sua variável 'myDate' receberá apenas valor visível, não o objeto Date.

Como alternativa, você pode especificar isso na ligação:

Atualizar:

 function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).datepicker("getDate");

    if (typeof value === "string") {            
       var dateValue = new Date(value);
       if (dateValue - current !== 0)
           $(element).datepicker("setDate", dateValue);
    }               
}

Com base na solução de Ryan, myDate retorna a sequência de datas padrão, que não é a ideal no meu caso. Eu usei o date.js para analisar o valor, para que ele sempre retorne o formato de data desejado. Dê uma olhada neste exemplo de violino .

update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).datepicker("getDate");
    var d = Date.parse(value);
    if (value - current !== 0) {
        $(element).datepicker("setDate", d.toString("MM/dd/yyyy"));   
    }
}

Eu precisava atualizar repetidamente meus dados do servidor, mas não concluí o trabalho para minhas necessidades de compartilhamento abaixo (meu formato de data / data (1224043200000) /):

//Object Model
function Document(data) {
        if (String(data.RedemptionExpiration).indexOf('/Date(') == 0) {
            var newDate = new Date(parseInt(data.BDate.replace(/\/Date\((.*?)\)\//gi, "$1")));
            data.RedemptionExpiration = (newDate.getMonth()+1) +
                "/" + newDate.getDate() +
                "/" + newDate.getFullYear();
        }
        this.RedemptionExpiration = ko.observable(data.RedemptionExpiration);
}
//View Model
function DocumentViewModel(){
    ///additional code removed
    self.afterRenderLogic = function (elements) {
        $("#documentsContainer .datepicker").each(function () {
            $(this).datepicker();                   
        });
    };
}

Depois que o modelo foi formatado corretamente para a saída, adicionei um modelo com a documentação knockoutjs :

<div id="documentsContainer">
    <div data-bind="template: { name: 'document-template', foreach: documents, afterRender: afterRenderLogic }, visible: documents().length > 0"></div>
</div>

//Inline template
<script type="text/html" id="document-template">
  <input data-bind="value: RedemptionExpiration" class="datepicker" />
</script>

Poucas pessoas pediram opções dinâmicas de datapicker. No meu caso, eu precisava de um período dinâmico - portanto, a primeira entrada define o valor mínimo do segundo e o segundo define o valor máximo para o primeiro. Eu o resolvi estendendo o manipulador do RP Niemeyer. Então, para o original:

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

        $el.datepicker(options);

        //handle the field changing by registering datepicker's changeDate event
        ko.utils.registerEventHandler(element, "change", function() {
            var observable = valueAccessor();
            observable($el.datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $el.datepicker("destroy");
        });

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

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        var current = $el.datepicker("getDate");

        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
    }
};

Adicionei mais dois manipuladores correspondentes às opções que eu queria modificar:

ko.bindingHandlers.minDate = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("option", "minDate", value);
    }
};

ko.bindingHandlers.maxDate = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("option", "maxDate", value);
    }
};

E os usei assim no meu modelo:

<input data-bind="datepicker: selectedLowerValue, datepickerOptions: { minDate: minValue()}, maxDate: selectedUpperValue" />       
<input data-bind="datepicker: selectedUpperValue, datepickerOptions: { maxDate: maxValue()}, minDate: selectedLowerValue" />

O uso de ligações personalizadas fornecidas nas respostas anteriores nem sempre é possível. Chamando$(element).datepicker(...) leva um tempo considerável e, se você tiver, por exemplo, algumas dezenas ou mesmo centenas de elementos para chamar esse método, precisará fazê-lo "preguiçosamente", ou seja, sob demanda.

Por exemplo, o modelo de vista pode ser inicializado, o input s sendo inseridos no DOM, mas os seletores de datas correspondentes serão inicializados somente quando um usuário clicar neles.

Então, aqui está a minha solução:

Adicione uma ligação personalizada que permita anexar dados arbitrários a um nó:

KO.bindingHandlers.boundData = {
  init: function(element, __, allBindings) {
    element.boundData = allBindings.get('boundData');
  }
};

Use a ligação para anexar o observável usado para o inputvalor de:

<input type='text' class='my-date-input'
       data-bind='textInput: myObservable, boundData: myObservable' />

E, finalmente, ao inicializar o datepicker, use sua onSelectopção:

$('.my-date-input').datepicker({
  onSelect: function(dateText) {
    this.myObservable(dateText);
  }
  //Other options
});

Dessa forma, toda vez que um usuário altera a data com o seletor de datas, o correspondente Knockout observável também é atualizado.