jquery-ui - example - jquery ui only datepicker

conexión de datos knockoutjs con jquery-ui datepicker

Question

Estoy usando un datepicker jQuery UI . El campo de entrada de HTML detrás de él está actualmente conectado a KnockoutJS como dependienteDebservable, pero cuando su valor se establece en el modelo de vista, el selector de fecha pierde su formato.

¿Cómo debo hacer esto y no perder el formato? Me gustaría que viewModel no supiera que se trata de un jQuery datepicker.

Answer 1

Aquí está lo que funcionó para mi conjunto particular de circunstancias. Estoy ejecutando una versión lo suficientemente nueva de MVC, que el serializador de fecha y hora predeterminado se procesa en ISO 8601 (consulte En la pesadilla que es JSON Dates. Además, JSON.NET y ASP.NET Web API ). Mis enlaces no escriben directamente en el selector de fecha, sino en el atributo "value" de una etiqueta de entrada.

Además, como nota, estoy usando date.js

ko.bindingHandlers.dateValue = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor(),
            allBindings = allBindingsAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        var pattern = allBindings.datePattern || ''MM/dd/yyyy'';
        var date = Date.parse(valueUnwrapped)
        $(element).val(date.toString(pattern));
    },

    init: function(element, valueAccessor, allBindingsAccessor) {
        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            var date = Date.parse($(element).val());
            observable(date.toString("yyyy-MM-ddThh:mm:ss"));
        });
    }
}

El enlace se ve así:

<input class="date" type="text" data-bind="dateValue: SomeViewModelDate" />

Y el código de JavaScript para activar el datepicker:

$(document).ready(function () {
    $(''.date'').datepicker({ dateFormat: "mm/dd/yy" });
});

Answer 2

Formatear la fecha (a mm / dd / aaaa) dentro de dependObservable es exactamente lo que me preguntaba cómo hacer. Voy a publicar un poco de mi código si puedes ayudar, Peter Mortensen y / o nEEBz.

    <div data-bind="with: technology">  
        <div class="titleblock">
            <label><b>End of Life Date</b></label> 
            <Input  type="text" class="ui-datepicker" id="datepicker" data-bind="value: END_OF_LIFE_DATE"/>
        </div>       
    </div>

en ViewModel - technologydetail.js:

var technology = ko.observable();

en Activar:

return dataContext.getTechnologyById(currentTechnologyId, technology);

Esto muestra una fecha que se ve así en el cuadro de texto: miércoles 29 de enero a las 19:00:00 EST 2014 pero quiero que se muestre: 29/01/2014. Estoy usando esta opción datepicker - dateFormat: "mm / dd / aa", pero no tiene efecto sobre el valor inicial que se muestra.

Pude formatearlo usando el momento y funciona muy bien para mostrar el valor actual de la base de datos, pero parece estar rompiendo el enlace de nuevo a lo observable porque ya no se actualizará en un SAVE.

<Input type="text" class="ui-datepicker" id="datepicker" data-bind="value: moment(END_OF_LIFE_DATE()).format(''MM/DD/YYYY'')" />

Answer 3

He estado utilizando el código de RP Niemeyer marcado como la respuesta anterior, pero desde que lo he estado usando le he hecho algunos pequeños cambios. Pensé que publicaría aquí. Tal vez ayudará a otros. Es prácticamente lo mismo, la única diferencia es que si el elemento tiene un valor cuando la página se carga, conservará su valor. Además, hice $elem una variable para que haya menos procesamiento de $(element) que jQuery tendrá que hacer.

ko.bindingHandlers[''jqDatePicker''] = {
    ''init'': function(element, valueAccessor, allBindingsAccessor) {
        /* Initialize datepicker with some optional options */
        var options = allBindingsAccessor().jqDatePickerOptions || {},
            prop = valueAccessor(),
            $elem = $(element);

        prop($elem.val());

        $elem.datepicker(options);

        /* Handle the field changing */
        ko.utils.registerEventHandler(element, "change", function () {
            prop($elem.datepicker("getDate"));
        });

        /* Handle disposal (if KO removes by the template binding) */
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $elem.datepicker("destroy");
        });
    },
    ''update'': function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $elem = $(element),
            current = $elem.datepicker("getDate");

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

Answer 4

Los ejemplos de datepicker anteriores cambian el formato de la fecha en el modelo de vista del formato WCF formato de fecha de JavaScript cuando el usuario selecciona una nueva fecha del control datepicker.

En mi caso, estaba pasando la fecha a un servicio de WCF, y no aceptaría una fecha de JavaScript deserializada, necesitaba la fecha en el formato WCF. Modifiqué el script anterior para que almacene la fecha en el modelo de vista en formato WCF para que pueda enviarse de vuelta al servidor en ese formato.

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).datepicker("getDate"));
            // store the date in ''WCF String format"
            var tempdate=$(element).datepicker("getDate");
            var tempdatestr="/Date("+tempdate.getTime()+")/";
            observable(tempdatestr);
        });
        //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);
        }
    }
};

Answer 5

Puede escribir un enlace personalizado que establezca la fecha en el campo utilizando las API datepicker y también establece el valor de su observable leyendo la fecha correctamente.

El enlace personalizado podría verse así:

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

        //initialize datepicker with some optional options
        $el.datepicker(options);

        //handle the field changing
        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),
            current = $el.datepicker("getDate");

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

Lo usarías como:

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

Las selecciones de fecha serían opcionales y podrían incluir cualquier cosa que desee pasar a la llamada datepicker() .

Además, esto supone que está usando un observable para la fecha. El enlace tiene que hacer un poco más de trabajo si desea hacer un enlace de una vía con un no observable, pero eso es poco probable.

Muestra aquí: http://jsfiddle.net/rniemeyer/NAgNV/

Answer 6

Tuve que hacer una pequeña edición del código de RP Niemeyer para trabajar en mi código usando la opción dateFormat, reemplazando

$(element).datepicker("getDate")

Con

$(element).val()

Entonces la versión formateada de la fecha se pasó correctamente debajo del capó.

Answer 7

Una solución es formatear la fecha usted mismo dentro de la función dependienteDebservable. Por lo tanto, debe devolver algo como return viewModel.someOtherObservable() en la función. Formatee el valor de retorno.

Si incluye su código, puedo explicar más.