[SOLUCIONADO] problemas añadiendo datetimepicker a dos input

diegoug · #1 (**permalink**) 26/12/2012, 12:48

Buenas tardes, desde Colombia,

Estoy intentando instalar un selector de fecha y hora para dos imput con sus propias características, pero no logro iniciarlo.

Mirando en google chrome, veo que carga bien todos los css y los js, y la verdad no se que es lo que me falta o que esta mal?

Nota: todos los archivos los descargue de sus fuentes originales.

Código:

<head>
<link type="text/css" href="jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<link type="text/css" href="jquery-ui-timepicker-addon.css" rel="stylesheet">
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
    $(function(){
        $('#basic_example_1').datetimepicker();
        $('#basic_example_3').datetimepicker({
            timeFormat: "hh:mm tt"
        });
    });
</script>
</head>
<body>
    <div>
    <input type="text" name="basic_example_1" id="basic_example_1" value="" class="hasDatepicker">
    </div>
    <div>
    <input type="text" name="basic_example_3" id="basic_example_3" value="" class="hasDatepicker">
    </div>
</body>

pzin · #2 (**permalink**) 26/12/2012, 12:52

No sé si tendrá que ver o no, pero igual no funciona porque no existe ningún formulario —<form>.

diegoug · #3 (**permalink**) 26/12/2012, 12:54

mira estos ejemplos, todos son input dentro de divs
http://www.jose-aguilar.com/scripts/jquery/datetimepicker/

David · #4 (**permalink**) 26/12/2012, 13:06

¿Verificaste que las rutas de los scripts son correctas? ¿Te has asegurado de incluir los widgets datepicker y slider en tu paquete de jQuery UI? ¿Produce algún error?

diegoug · #5 (**permalink**) 26/12/2012, 13:46

Cita:

Iniciado por David

¿Verificaste que las rutas de los scripts son correctas? ¿Te has asegurado de incluir los widgets datepicker y slider en tu paquete de jQuery UI? ¿Produce algún error?

Hola David,

si tengo las rutas bien de todo, no tengo ningún error, incluso se ve que cargo bien todo en el html como tal, lo que pasa es que no se muestra, creo!!

mira la ruta temporal de la aplicación para que la ves:
http://bit.ly/RSA4G1

David · #6 (**permalink**) 26/12/2012, 13:51

En esa página la ruta a jQuery UI está mal:

Código:

jquery/jquery-ui-1.9.2.custom.js

Debería ser:

Código:

jquery/jquery-ui-1.9.2.custom.min.js

diegoug · #7 (**permalink**) 26/12/2012, 13:56

Cita:

Iniciado por David

En esa página la ruta a jQuery UI está mal:

Código:

jquery/jquery-ui-1.9.2.custom.js

Debería ser:

Código:

jquery/jquery-ui-1.9.2.custom.min.js

Si David, me equivoque cuadrando las carpetas para ver si era eso, ya lo arregle pero igual nada, no me sale y no se que sera?

diegoug · #8 (**permalink**) 26/12/2012, 14:08

Cita:

Iniciado por David

En esa página la ruta a jQuery UI está mal:

Código:

jquery/jquery-ui-1.9.2.custom.js

Debería ser:

Código:

jquery/jquery-ui-1.9.2.custom.min.js

Mira de nuevo, intente hacer el mismo del ejemplo http://bit.ly/W5mTgq pero igual no me sale, saque las mismas rutas y todo, no se que es lo que falta por aquí?

Código HTML:

<!doctype html>
<head>
    <meta charset="utf-8">
    <link type="text/css" href="http://www.jose-aguilar.com/scripts/jquery/datetimepicker/jquery/css/custom-theme/jquery-ui-1.8.13.custom.css" rel="stylesheet">
    <link type="text/css" href="jquery/jquery-ui-timepicker-addon.css" rel="stylesheet">
    <style type="text/css">
        body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,li,dl,dt,dd,pre,blockquote,fieldset,label{
            margin:0;
            padding:0;
            border:0;
        }
        body{ background-color: #363531; border-top: solid 4px #C60; font: 90% Arial, Helvetica, sans-serif; padding: 20px; }
        h1,h2{ margin: 10px 0; }
        p{ margin: 10px 0; }
        pre{ padding: 20px; background-color: #ffffcc; border: solid 1px #fff; }
        .wrapper{ background-color: #ffffff; width: 800px; border: solid 1px #eeeeee; padding: 20px; margin: 0 auto; }
        .example-container{ background-color: #f4f4f4; border-bottom: solid 2px #777777; margin: 0 0 40px 0; padding: 20px; }
        .example-container p{ font-weight: bold; }
        .example-container dt{ font-weight: bold; height: 20px; }
        .example-container dd{ margin: -20px 0 10px 100px; border-bottom: solid 1px #fff; }
        .example-container input{ width: 150px; }
        .clear{ clear: both; }
        #ui-datepicker-div{ font-size: 80%; }
        /* css for timepicker */
        .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
        .ui-timepicker-div dl{ text-align: left; }
        .ui-timepicker-div dl dt{ height: 25px; }
        .ui-timepicker-div dl dd{ margin: -25px 10px 10px 65px; }
        .ui-timepicker-div td { font-size: 90%; }
    </style>
    <script type="text/javascript" src="http://www.jose-aguilar.com/scripts/jquery/datetimepicker/jquery/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="http://www.jose-aguilar.com/scripts/jquery/datetimepicker/jquery/js/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript" src="http://www.jose-aguilar.com/scripts/jquery/datetimepicker/js/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript">
            $(function(){
                $('#example1').datetimepicker();

                $('#example2').datetimepicker({
                    ampm: true
                });
            });
        </script>
</head>
<body>
<div class="example-container">
<h2>DateTime Picker jQuery</h2>

    <p>Add a simple timepicker to jQuery UI's datepicker</p>
    <div>
        <input type="text" name="example1" id="example1" value="" class="hasDatepicker">
    </div>

    <p>Show time in AM/PM 12 hour format</p>
    <div>
        <input type="text" name="example2" id="example2" value="" class="hasDatepicker">
    </div>
    
</div>
</body>

David · #9 (**permalink**) 26/12/2012, 14:21

Es la clase que le pones, hasDatepicker, es usado por el widget datepicker, debes quitarla.