2012-06-07 19 views
6

Tengo un Calendario jQuery UI que a continuación y que funciona en IE sólo no en Chrome:jQuery Selector de fecha no funciona en Chrome

<input type="image" src="/images/caleder.jpg" id="btnCalendar" /> 

<script type="text/javascript"> 
$(function() { 
    $("#btnPeriodCal").datepicker(); 
}); 
</script> 

Si cambio type="text" parece que funciona. ¿Podría alguien ayudarme con la forma de resolver el problema anterior? No puedo usar type="text" ya que necesito mostrar la imagen.

Gracias.

+1

Use la propiedad 'buttonImage'. Mira mi respuesta. :) –

Respuesta

0

A menos que esté equivocado, solo las etiquetas div, las etiquetas de extensión, etc. pueden ser selectores de fecha.

4

Puede utilizar un manejador:

<script> 
$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "images/calendar.gif", 
     buttonImageOnly: true 
    }); 
}); 
</script> 

Hope esto funciona! :)

+1

No funcionó, ¿Debería mantener esta línea como está o cambiar a

+0

Nota que debo ser capaz de mostrar icono de calendario para que los usuarios hagan clic en. –

+2

Sí, eso es lo que hace. Habrá un cuadro de texto con el ícono que especifique. Mira este ejemplo: http://jqueryui.com/demos/datepicker/icon-trigger.html –

0

utilizarlo como -

<p>Date: <input type="text" id="datepicker"></p> 

$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "images/calendar.gif", 
     buttonImageOnly: true 
    }); 
}); 

Compruebe que en la acción - http://jqueryui.com/demos/datepicker/#icon-trigger

y no se olvide de incluir estos archivos en <head> etiqueta

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"> 

1

Yo tuve el mismo problema. Y pensé por qué la entrada podría funcionar, pero el botón no. El truco es que la entrada se enfoca cuando se hace clic, el botón no. Pruebe esto:

$(function() { 
    $("#btnPeriodCal").datepicker().click(function() { $(this).focus(); }); 
}); 
12

Tengo un problema de muestra con el selector de fecha.

Utilicé el selector de fecha y funcionó bien en Firefox y IE pero no en Chrome. Puedo ver el calendario cuando hago clic en el campo de entrada. Seleccioné la fecha pero los valores de fecha no están ingresando en el campo de entrada.

no tengo opción así que cambié type='text' entonces funciona en cromo ..

Input type is date

Input type is text

+1

Naveen Gracias por su comentario ... Por eso revisé el trabajo de mi amigo. También usó datepicker que no tiene botón de cierre en el calendario. Cambié sus códigos, tipo de entrada a la fecha y revisé en cromo ... Funciona. Los valores de fecha se ingresan en el campo. Ambos hemos descargado el selector de fecha de internet. Puede haber alguna diferencia en eso. Pero I obtengo los valores si solo configuro el tipo es texto. No tengo problema con eso porque hice Javascript y validación de PHP para mis valores de fecha. –

+1

pero la publicación está etiquetada jquery ui datepicker ... :) – naveen

+0

sí, la publicación es jquery ui datepicker..Actualmente no sé sobre UI y todo ... tuve el mismo problema, busqué en Internet esta publicación. Pero esta publicación y mi problema tienen algunos problemas comunes. Pensé que ayudaría a otros si comparto mi experiencia. –

0

tuve un problema similar: Yo quería que mi selector de fecha para aparecer cuando un enlace se hizo clic, y no tiene campo (o más bien un campo oculto). (Mi caso de uso fue que la fecha en el calendario debía usarse para encontrar un rango de fechas hasta e incluyendo esa selección de fecha y hora, así que no necesito el valor actual de la fecha excepto para pasarlo al controlador onSelect).

Así que esto funciona en Firefox:

<a ...>click for calendar: <input type="hidden" value="" /> </a> 

pero no en Chrome. Reemplazar el con:

<input type="text" value="" style="display: none" /> 

también falló. Terminé con esto:

<input type="text" value="" style="width: 0px; height: 0px; border: none; position: absolute; top: 0; left: 0" /> 

aunque no estoy orgulloso de ello!

0

Pasé 3 horas tratando de resolver este problema, y ​​esta es la forma en que resolví el problema.

utilice las siguientes líneas como sus bibliotecas.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script> 

y este es el Javascript empleado para solucionar el problema:

$(function() { 
    $("#date_of_birth_date").datepicker({ 
     maxDate: '+0', changeYear: true, yearRange: "-70:+0" 
    }); 
}); 

recordar para eliminar todas las bibliotecas anteriores etc

Cuestiones relacionadas