[SOLUCIONADO] Diferente comportamiento del datepicker en firefox y chrome

[vmelero]

Hola a todos,

Estoy utilizando el datepicker para dos campos de tipo fecha en un formulario que implemento de la siguiente manera:

Código HTML:

<div id="ContenidoDrcha" class="filter"> 
                <form class="filt" action="" method="POST" autocomplete="off">
                    <fieldset id="campFil">
                        <legend>Filtre su búsqueda... </legend>
                        <div id="Ini">
                        <label for="desde" class="filt1">Desde</label>
                        <input type="date" id="datepicker"  class="filtFec" value="" size="10" maxlength="10"/>
                        </div>
                        <div id="fin">
                        <label for="hasta" class="filt1">Hasta</label>
                        <input type="hasta" id="datepicker2"  class="filtFec"  value="" size="10" maxlength="10"/>
                        </div>
                         <input type="button"  class="filt1" value="Buscar" id="buscar" onclick="enviaFechas()"/>
                    </fieldset>
                </form>   
            </div> 

Además en javascript tengo las siguientes líneas de configuración

Código:

 $(function() {
           $( "#datepicker").datepicker({ showOn: "both" , changeMonth: true});
           $( "#datepicker2").datepicker({ showOn: "both" , changeMonth: true });
          });

El problema lo tengo en chrome, no sé por qué motivo me aparecen dos calendarios simultáneamente al hacer clic en cualquiera de los dos input o botones, dos calendarios totalmente diferentes.
Sin embargo, en firefox sólo me aparece uno.
Me hubiese gustado poneros una captura de la imagen pero creo que no se puede a no ser que tengas las imagenes subidas a la nube.

De todas formas, espero haberme explicado bien.

¿Me podéis echar una mano?

Gracias

[vmelero]

Perdón, este problema sólo me aparece en el primer input, el segundo me aparece correcto.



Gracias a quien me pueda orientar.

saludos,

[webosiris]

intenta primero arreglando tu html, no existe ningún

Código HTML:

input type="hasta"
 

y el atributo for del label debe de ser el id del elemento al que lo quieres relacionar.

[vmelero]

Gracias webosiris, no me había dado cuenta del lio que tenía montado en el código html.
Después de arreglarlo seguían aparenciendome dos calendarios desde chrome , así que he optado por poner los input de tipo text.
De esta forma chrome me funciona de la manera esperada y firefox también.

Código HTML:

<form class="filt" action="" method="POST" autocomplete="off">
                    <fieldset id="campFil">
                        <legend>Filtre su búsqueda... </legend>
                        <div id="Ini">
                        <label for="dpDesde" class="filt1">Desde</label>
                        <input type="text" id="dpDesde"  class="filtFec" value="" size="10" maxlength="10"/>
                        </div>
                        <div id="fin">
                        <label for="dpHasta" class="filt1">Hasta</label>
                        <input type="text" id="dpHasta"  class="filtFec"  value="" size="10" maxlength="10"/>
                        </div>
                         <input type="button"  class="filt1" value="Buscar" id="buscar" onclick="enviaFechas()"/>
                    </fieldset>
                </form>