Foros del Web - Ver Mensaje Individual - [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.