Mostrar jQuery UI datepicker en el campo de entrada, haga clic en?

OK tal vez este es un tema trivial, pero estoy muy interesado en ver si alguien tiene alguna idea al respecto:Mostrar jQuery UI datepicker en el campo de entrada, haga clic en?

Estoy usando JQuery UI. Tengo un campo <input id="#myfield" type="text"> y llamo al $('#myfield').datepicker(). El selector de fecha se muestra cada vez que el campo se enfoca. Pero el campo es el primero en mi forma y ya está enfocado cuando se carga, por lo que al hacer clic en el campo no se muestra. Además, si cierro el marcador de fecha con la tecla Esc, no puedo abrirlo de nuevo haciendo clic en el campo, por el mismo motivo: ya está enfocado.

Soy consciente de que yo pudiera establecer el parámetro .datepicker({showOn: 'button'}) pero no quiero el botón. ¿Hay alguna forma de que aparezca el marcador de fecha cuando se enfoca el campo O se hace clic cuando ya está enfocado? Ya probé $('#myfield').click(function() { $(this).focus() }) y hace que Datepicker se abra correctamente cuando hago clic en el campo de entrada, pero cuando selecciono una fecha, no aparece en el campo.

Fuente

2012-05-23 alexg

me gusta bastante el botón, es bastante Es normal usarlo, de hecho, diría que fue una mala decisión no usarlo. – NimChimpsky

Normalmente estoy de acuerdo con usted. Vea mi comentario debajo de la respuesta de Rohan Büchner sobre por qué no quiero el botón. – alexg

Prueba este

<html> 
<head> 
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#date1').datepicker(); 

$('#date1').focus(function(){ 
    $('#date1').datepicker('show'); 
}); 

$('#date1').click(function(){ 
    $('#date1').datepicker('show'); 
}); 
//$('#ui-datepicker-div').show(); 
$('#date1').datepicker('show'); 
}); 
</script> 
</head> 
<body> 
<input type="text" name="date1" id='date1'> 
</body> 
</html>

Fuente

2012-05-23 10:49:21

Gracias, supongo que abrir el marcador de fecha al inicio tiene sentido y soluciona la mitad del problema. No resuelve el problema de cómo volver a abrir el marcador haciendo clic en el campo después de presionar la tecla Esc, pero será mejor que trate de resolver errores reales en lugar de jugar con problemas triviales :) – alexg

@alexg He actualizado el código. Compruébelo usted mismo compañero –

@RajanRawal Buddy Gracias por las respuestas, yo estaba golpeando la cabeza desde los últimos 3 días –

Este problema no responderá a su pregunta, pero podría ser un problema, si su problema de no tener el botón selector de fecha, está relacionado con tener el botón selector de fecha ... ¿si eso tiene algún sentido?

tuve un problema en el que no quiere tener el botón debido usuarios tabulación a través de mi formulario/página, y yo no quería que el botón para que el foco. (Experiencia de interfaz de usuario extraño)

Si ese es su caso, así ... siempre puede retirar su enfoque de la siguiente manera .. (También va a resolver indirectamente el problema que tienes ahora.)

$('#field').datepicker({ 
     showOn: 'button', 
     buttonImage: "/image_path/image.png", 
}).next('img.ui-datepicker-trigger').attr('tabIndex', "-1");

Fuente

2012-05-23 10:48:12

Gracias eso es inteligente. En realidad, la razón por la que no quiero el botón es por coherencia. En mi aplicación también tengo una jqGrid con columnas de fecha, donde un botón se vería feo y tomaría un ancho de pantalla precioso, por lo que quiero que mis campos de fecha fuera de la cuadrícula sean similares a los campos dentro de la grilla. Aunque estoy votando tu respuesta. – alexg

tuve un escenario similar: en primer campo de la página así debería ser una carga cerrados, sin el botón, y se abrirá solamente el usuario hace clic. Pero estaba en un componente cerrado de 'barra de búsqueda', por lo que cambiar el comportamiento predeterminado no era una opción. Aquí está mi solución:

$(document).ready(function() { 
     //getting the controls on the form context 
     var calendarios = $('.calendarBox', "#frmOccurrencesHistory"); 
     //set an invalid option - avoid open on focus and show the buttons 
     calendarios.datepicker("option", "showOn", "click"); 
     //handle click button 
     calendarios.each(function() { 
      $(this).click(function() { 
       $(this).datepicker('show'); 
      }); 
     }); 
    });

No es bonita, no es perfecto, hay un destello de calendario cuando la carga de las páginas, pero eso es lo lejos que he llegado

Fuente

2015-08-19 13:14:55 Alexandre

$("#datepicker").datepicker({ 
    dateFormat:'dd/M/yy', 
    minDate: 'now', 
    changeMonth:true, 
    changeYear:true, 
    showOn: "focus", 
    //buttonImage: "YourImage", 
    buttonImageOnly: true, 
    yearRange: "-100:+0", 
}); 

    $("datepicker").datepicker("option", "disabled", true);

Fuente

2017-10-23 09:25:42 Girish

Mostrar jQuery UI datepicker en el campo de entrada, haga clic en?

Respuesta

Cuestiones relacionadas