Jcalendar en Blackberry no funciona

Sirrohan · #1 (**permalink**) 01/11/2011, 12:53

Hola amigos, desarrollé una aplicación para la Web que funciona bajo los navegadores Ie, Firefox, Chrome y Opera (solo los probé en esos 4), el detalle es he estado adaptandolos para que se visualicen en dispósitivos móviles, particularmente para dispositivos de Blackberry...

En esa aplicación tengo un formulario donde uno de los campos es agregar una fecha utilizando la librería jCalendar, para mostrar un calendario desplegable, el detalle radica en que la caja del jcalendar se despliega correctamente, pero no selecciona los valores dentro del calendario, esto utilizando el navegador del Blackberry.

¿¿¿Que necesitaría para que funcione correctamente este calendario en el navegador del Blackberry???

Si es de utilidad, este es el código

Código Javascript:

Ver original<tr>
        <td class="Der_texto"><span class="formulariotext">Fecha    </span></td> 
        <td class="Izq_texto"><span class="formulariotext">
          <input type="text" name="fecha" id="f_date_c" readonly="1" size="10" style="font-size:9px" />
            <img src="../img/calendario.gif" align="bottom" class="Centrado" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Seleccione la fecha"
            onmouseover="this.style.background='red';" onMouseOut="this.style.background=''" />
            <script type="text/javascript">
                Calendar.setup({
                inputField     :    "f_date_c",     //id del campo
                ifFormat       :    "%d-%m-%Y",      // formato de la fecha
                button         :    "f_trigger_c",  // disparador (button ID)
                align          :    "B1",           // alineamiento (defecto "B1")
                singleClick    :    true
                });
            </script>
        </span></td>
    </tr>

maycolalvarez · #2 (**permalink**) 01/11/2011, 14:33

dudo mucho que ese calendario funcione adecuadamente con el navegador de BB, podrías intentar con jQuery UI, jQueryMobile u otro que si lo soporte

Sirrohan · #3 (**permalink**) 02/11/2011, 06:01

Eso es lo que he estado intentando, todavía no he probado el jQueryMobile y lo que he hecho estoy probando el glDatePicker que usa el jQuery UI

Sino tendré que dejarle varios selects no dependientes en el campo fecha...

Saludos!

Sirrohan · #4 (**permalink**) 02/11/2011, 12:01

Bueno, el navegador del blackberry no carga correctamente, pero he aprendido a usar la librería del jQueryMobile probando con la mayoría de estos calendarios, pero el que me pareció más fácil para implementar fue este calendario.

Y se lo recomiendo a todos para los que quieran realizar aplicaciones para telefonía móvil..

De todos modos, esto fué lo que hice

Código Javascript:

Ver original<!DOCTYPE html>
<html>
    <head>
    <title>JQuery Mobile</title>
    <!-- Librerías necesarias para JQM-->
    <link href="jquery.mobile-1.0rc2.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.6.4.min.js"></script>
    <script src="jquery.mobile-1.0rc2.min.js"></script>
   <link href="calendario_dw-estilos.css" type="text/css" rel="STYLESHEET">
   <script type="text/javascript" src="calendario.js"></script>
   
   <script type="text/javascript">
   $(document).ready(function(){
      $(".campofecha").calendarioDW();
   })
   </script>
    
    <!-- Fin librerías necesarias -->
</head>
<body> 
    <div data-role="page" id="principal">
 
        <div data-role="header">
            <h1>JQuery Mobile</h1>
        </div>
 
        <div data-role="content">
            <p>Contenido</p>
            <p>Ir a la <a href="#seccion2">segunda página</a></p>
            <p>Ir a la <a href="#seccion3">tercer página</a></p>
        </div>
 
        <div data-role="footer">
            <h4>El pié</h4>
        </div>
        
    </div>
    
    <div data-role="page" id="seccion2">
 
        <div data-role="header">
            <h1>Segunda Página</h1>
        </div>
 
        <div data-role="content">
            <form action="analizar.php" method="post" name="form1">
                <div id="login" data-role="fieldcontain">  
                    <label id="usuario1" for="usuario">usuario</label>  
                    <select name="usuario" id="usuario" tabindex="1">
                    <?
                     include('conexion.php');
                     conectar();
                     $sql="select usuario from usuarios where TRUE";
                     $conex= pg_query($sql);
                     while($reg=pg_fetch_object($conex)){
                     ?>
                     <option value="<?= $reg->usuario ?>"><? echo $reg->usuario; ?></option>
                     <? } 
                     desconectar();?>
                    </select>
                </div>  
                <div id="login" data-role="fieldcontain">  
                    <label for="password">password</label>  
                    <input id="password" name="password" type="password" />  
                </div>  
                <div id="login" data-role="fieldcontain">  
                    <label for="Enviar"></label>  
                    <input id="enviar" name="enviar" type="submit" value="enviar"/>  
                </div>  
            </form>
            <script>
            
            </script>
        </div>
 
        <div data-role="footer">
            <h4>El pie</h4>
        </div>
        
    </div>  
 
    <div data-role="page" id="seccion3">
 
        <div data-role="header">
            <h1>Tutorial JQuery Mobile: Tercera Página</h1>
        </div>
 
        <div data-role="content">
 
 
            <div class="demo">
 
                <p>
                    <label for="fecha">Fecha: </label>
                    <input type="text" name="fecha" class="campofecha" size="12">
                </p>
 
            </div><!-- Fin demo -->
            <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Fecha</legend>
                <label for="select-choice-month" class="select">Mes</label>
                    <select name="select-choice-month" id="select-choice-month">
                        <option>Mes</option>
                      <option value="1">Enero</option>
                      <option value="2">Febrero</option>
                      <option value="3">Marzo</option>
                      <option value="4">Abril</option>
                      <option value="5">Mayo</option>
                      <option value="6">Junio</option>
                      <option value="7">Julio</option>
                      <option value="8">Agosto</option>
                      <option value="9">Septiembre</option>
                      <option value="10">Octubre</option>
                      <option value="11">Noviembre</option>
                      <option value="12">Diciembre</option>
                        <!-- etc. -->
                    </select>
                    <label for="select-choice-day">Dia</label>
                    <select name="select-choice-day" id="select-choice-day">
                          <option>Day</option>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                          <option value="6">6</option>
                          <option value="7">7</option>
                          <option value="8">8</option>
                          <option value="9">9</option>
                          <option value="10">10</option>
                          <option value="11">11</option>
                          <option value="12">12</option>
                          <option value="13">13</option>
                          <option value="14">14</option>
                          <option value="15">15</option>
                          <option value="16">16</option>
                          <option value="17">17</option>
                          <option value="18">18</option>
                          <option value="19">19</option>
                          <option value="20">20</option>
                          <option value="21">21</option>
                          <option value="22">22</option>
                          <option value="23">23</option>
                          <option value="24">24</option>
                          <option value="25">25</option>
                          <option value="26">26</option>
                          <option value="27">27</option>
                          <option value="28">28</option>
                          <option value="29">29</option>
                          <option value="30">30</option>
                          <option value="31">31</option>          
                    </select>
                <label for="select-choice-year">Año</label>
                    <select name="select-choice-year" id="select-choice-year">
                        <option>Year</option>
                        <option value="2011">2011</option>
                    </select>
            </fieldset>
            </div>
        </div><!--- End Content --->
        <div data-role="footer">
            <h4>El pie</h4>
        </div>
        
    </div>  
 
</body>
</html>

Sirrohan · #5 (**permalink**) 07/11/2011, 07:14

Efectivamente, usé el Datepicker de jQueryUI y carga algo lento, pero lo hace en el navegador del Blackberry, básicamente, esto fue lo que implementé.

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Seleccionar fecha con jQuery UI</title>
   <link type="text/css" href="jquery-ui.css" rel="Stylesheet" />   
   <script type="text/javascript" src="../jquery-1.6.4.min.js"></script>
   <script type="text/javascript" src="../jquery-ui-1.8.min.js"></script>
   <script type="text/javascript" src="calendario_es.js"></script>
<script>
$(document).ready(function(){
   $("#campofecha").datepicker({
      showOn: 'both',
      buttonImage: 'calendar.png',
      buttonImageOnly: true,
      changeYear: true,
      numberOfMonths: 1,
      onSelect: function(textoFecha, objDatepicker){
         $("#mensaje").html("<p>Has seleccionado: " + textoFecha + "</p>");
      }
   });
})
</script>
</head>
<body>
 
<form>
   Fecha: <input type="text" name="fecha" id="campofecha">
</form>
 
<div id="mensaje"></div>
 
 
<a href="#" id="cambiames">Mostrar formulario para cambiar mes</a>
 
</body>
</html>

Y este es el contenido del archivo calendario_es.js

Código Javascript:

Ver original/* Inicialización en español para la extensión 'UI date picker' para jQuery. */
jQuery(function($){
   $.datepicker.regional['es'] = {
      closeText: 'Cerrar',
      prevText: '<Ant',
      nextText: 'Sig>',
      currentText: 'Hoy',
      monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
      monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
      dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
      dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
      dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
      weekHeader: 'Sm',
      dateFormat: 'dd/mm/yy',
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: ''};
   $.datepicker.setDefaults($.datepicker.regional['es']);
});