[Aporte] Datepicker jquery interactuar con el nombre del campo en el valor

abimaelrc · #1 (**permalink**) 13/09/2012, 21:22

Si lo sé he caido bajo, espero me perdonen

Aqui les expongo algo que me costó un poco de trabajo por varias cosas que se den lograr, hay una que todavía no logro resolver pero cuando lo tenga lo expongo.

La idea de este código es lograr dejar un valor por defecto en los campos cuando el usuario no esté interactuando con el campo. Una vez que usuario esté interactuando entonces modificamos los valores a lo que el usuario ha deseado

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo Datepicker</title>
    <link rel="stylesheet" href="css/jquery.ui.all.css">
    <style>
    input{
        color: #999999;
    }
    .writing{
        color: #000000;
    }
    </style>
    <script src="js/jquery-1.8.0.min.js"></script>
    <script src="js/jquery.ui.core.js"></script>
    <script src="js/jquery.ui.widget.js"></script>
    <script src="js/jquery.ui.datepicker.js"></script>
    <script>
    $(function(){
        /**
         * Escribirá en formato YYYY-MM-DD (esto lo hago por el uso y formato en que se escriben las fechas en la base de datos)
         * Esto es a gusto los valores que escribí, solo es cuestión de leer la documentación y modificar los valores correspondientes
         */
        var dates = $( "#from, #to" ).datepicker({
            dateFormat: "yy-mm-dd",
            defaultDate: 0,
            minDate: 0,
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            showButtonPanel: true,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
 
                /**
                 * Importante para que se ejecute la función change()
                 * no se puede usar $( this ) porque no modifica el que debe, se debe indicar cual exactamente por eso
                 * $( "#from, #to" )...
                 */
                $( "#from, #to" ).change();
            }
        }).focus(function(){
            /**
             * El id y el valor deben tener los mismos caracteres a excepción de :
             * el id se escribe en el campo en cualquier forma sea mayúscula o minúscula y luego se comparara
             * colocándolo en mayúscula contra lo que está en el valor
             *
             * No hay que preocuparse que el usuario escriba otros caracteres porque datepicker 
             * se encarga de solo dejar escribir números y guion y otros caracteres que se usan para formar una fecha
             * por lo que solo va a estar lo que hayas colocado por defecto
             *
             * Así es con .blur y con .change
             */
            if( $( this ).val( ).toUpperCase() == ( $( this ).attr("id").toUpperCase() + ":" ) ){
                $( this ).val( "" ).addClass( "writing" );
            }
        }).blur(function(){
            if( $( this ).val( ) == "" || $( this ).val( ).toUpperCase() == ( $( this ).attr("id").toUpperCase() + ":" ) ){
                $( this ).val( $( this ).attr("id").toUpperCase() + ":" ).removeClass( "writing" );
            }
        }).change(function(){
            if( $( this ).val( ) != "" && $( this ).val( ).toUpperCase() != ( $( this ).attr("id").toUpperCase() + ":" ) ){
                $( this ).addClass( "writing" );
            }
            else{
                $( this ).val( $( this ).attr("id").toUpperCase() + ":" ).removeClass( "writing" );
            }
        });
    });
    </script>
</head>
<body>
 
<p>Dates: <input type="text" id="from" value="FROM:"><input type="text" id="to" value="TO:"></p>
 
</body>
</html>

Lo único que no logro solventar es que cuando el usuario a seleccionado los dos campos sin seleccionar fecha solo seleccionó y luego quito cuando selecciona una fecha, despues de haber hecho lo que indiqué anteriormente, se coloca en el campo que seleccionó la fecha que quiso y en el otro campo otra fecha, puede ser la que está seleccionado como puede ser la fecha corriente. Si alguien logra que se evite esto seria bueno que lo postee para que así nos podamos beneficiar.

gebremswar · #2 (**permalink**) 14/09/2012, 11:47

Hola abimaelrc que tal.

Cita:

Iniciado por abimaelrc

Lo único que no logro solventar es que cuando el usuario a seleccionado los dos campos sin seleccionar fecha solo seleccionó y luego quito cuando selecciona una fecha, despues de haber hecho lo que indiqué anteriormente, se coloca en el campo que seleccionó la fecha que quiso y en el otro campo otra fecha, puede ser la que está seleccionado como puede ser la fecha corriente. Si alguien logra que se evite esto seria bueno que lo postee para que así nos podamos beneficiar.

Probé el código tal cual y cuando selecciono una fecha en el primer datepicker con doble-click, esta acción agrega la fecha escogida a ambos input's.
Noto que se puede escoger en ambos la misma fecha aun así no se haga como describí en el punto anterior.

Y el problema esta en que ambos adquieren la misma fecha cuando se realiza lo que comentas.

Interesante problema; a simple vista parece que la linea involucrada es la nº 35. Le echaré un par de vistazos más.

abimaelrc · #3 (**permalink**) 15/09/2012, 11:39

Si todavía no logro resolver ese problema

, sigo intentando a ver donde es que pasa...

masterpuppet · #4 (**permalink**) 16/09/2012, 01:14

Estas peleando con algo que seguramente sea un bug de datepicker, separa las instancias, como en el ejemplo de jquery ui y seguramente funcione correctamente. o si te gusta autoflagelarte podes debugear datepicker :P

Saludos.

abimaelrc · #5 (**permalink**) 16/09/2012, 14:31

Ya empezamos con tu amor/odio hacia jq... (no me atrevo a decirlo

), me voy a autoflagelar para ver donde esta jajajaja