javascript - fecha - insertar calendario en formulario html

¿Cómo mostrar datepicker solo en el campo?

Question

Estoy agregando el selector de fecha móvil de jquery, pero muestra el selector de fecha de manera predeterminada. En cambio, quiero que se muestre solo en el foco y que se oculte cuando el campo pierde el foco ... ¿Alguna idea de cómo?

En el encabezado de página que agregué

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="/css/jquery.ui.datepicker.mobile.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="/js/jQuery.ui.datepicker.js"></script>
<script src="/js/jquery.ui.datepicker.mobile.js"></script>

y un campo de fecha en el cuerpo para que funcione:

<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value="" /> 

Answer 1

Lamentablemente, actualmente no se puede hacer a menos que esté dispuesto a implementarlo usted mismo. jQuery Mobile datepicker nunca fue lanzado oficialmente como un widget (tal vez algún día, pero nunca fue anunciado oficialmente). El código disponible no es más que un contenedor de jQuery UI datepicker.

Puede verificarlo usted mismo, aquí hay un snipet de código que muestra un datepicker en el evento pagecreate:

$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type=''date''], input:jqmData(type=''date'')" ).each(function(){
$(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
});
});

Puede cambiarlo usted mismo, pero cuál es el punto. En caso de que no tenga tiempo para la implementación personalizada, eche un vistazo a estos selectores de fecha jQuery Mobile de terceros:

1. El primero es Mobi Pick: http://mobipick.sustainablepace.net/demo.html . Simple, fácil y robusto. Solo el que necesitas. Mi favorito.

2. Probablemente el mejor es: http://mobiscroll.com/ . Solía ​​ser mi favorito (aún lo es si necesito una buena IU). Principalmente porque es robusto con una excelente IU.

3. También uno excelente es Datebox: http://dev.jtsage.com/jQM-DateBox2/ . También es robusto pero con pocos errores.

También eche un vistazo a mi otro artículo similar: https://stackoverflow.com/a/13779992/1848600