¿Cómo ejecutar el selector de fecha en el primer evento onclick?

Question

Estoy usando este date picker from jqueryui.
Si nos fijamos en esa página, a continuación, encontrará que sólo han escrito en una función como esta:

$(function() { 
     $("#datepicker").datepicker(); 
    }); 
    </script> 

Pero quiero abrir mi selector de fechas en un texto de evento de clic.
Así que he escrito esta:

$("#datepicker").datepicker(); 

en una función que estoy llamando en el evento onclick cuadro de texto.
Pero en esto hay un problema por venir.

Solo obtengo el selector de fecha la segunda vez que hago clic en el cuadro de texto.
Si hago clic la primera vez que se carga la página, el selector de fechas no aparecerá, pero tan pronto como haga clic en la segunda vez, se acerca el selector de fecha.

¿Por qué? ¿Y puedo hacerlo en el primer clic?

Sí Sé que esto ya está sucediendo perfectamente si coloco el primer código pero lo quiero en mi función.

EDIT:
Ahora voy a explicar a todos los chicos le qué es exactamente lo que estoy haciendo.

Mi requisito es el siguiente:

1) Cuando selecciono la fecha la primera vez. Las fechas anteriores a la fecha de hoy deben estar deshabilitadas en el calendario.
2) Ahora cuando selecciono la fecha por segunda vez en el calendario, la fecha debe comenzar un día después de la fecha anterior.

he escrito como esto ....

$(function() { 
        $('#from').datepicker({ 
          defaultDate: "+5d", 
          changeMonth: true, 
          numberOfMonths:1 , 
          minDate:"+0d", 
          dateFormat: 'DD, MM d, yy', 
          onSelect: function(selectedDate) { 
            var option = this.id == "from" ? "minDate" : "maxDate"; 

            var instance = $(this).data("datepicker"); 

            var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 


            dates.not(this).datepicker("option", option, date); 

          } 
        }); 

}); 

Esto funciona perfectamente en uno de los requisitos,
pero para el segundo requisito que necesito comprobar primero si hay algún valor del cuadro de texto. Si hay alguno, entonces
debe seleccionar +1 directo a esa fecha y las fechas anteriores deben ser deshabilitadas.

¿Cómo hacer esto?

Answer 1

La razón es No se muestra en el primer clic porque en el instante en que lo haces la primera vez, no se registra como un marcador de fecha. Por lo tanto, no tiene un evento en línea que le indique que debe mostrar cualquier fechador cuando haga clic en él.

Con el segundo clic, sin embargo, lo ha configurado como un selector de fecha durante el primer clic (y ahora tiene un evento onclick donde se mostrará el selector de fecha). El evento onclick de datepicker se activa, mostrando el selector.

Como se menciona en otras respuestas, esta no es la forma recomendada de hacerlo. Pero si realmente quieres para obligar a éste y no onclick proceso de carga, se puede mostrar el selector en la primera posición haciendo

$(function() { 
    $("#datepicker").click(function() { 
     $(this).datepicker().datepicker("show") 
    }); 
}); 

Esto registrará el elemento como un selector de fechas y mostrar a continuación, el documento presentado en el mismo tiempo.

Answer 2

Asegúrese de llamar al marcador de fecha al cargar la página, y no con el evento onclick.

$(document).ready(function() { 
    $("#datepicker").datepicker(); 
}); 

Answer 3

creo que usted no entiende el significado de:

$(function() { 
    $("#datepicker").datepicker();  
}); 

que es lo mismo que:

$(document).ready(function() { 
    $("#datepicker").datepicker(); 
}); 

y

jquery(document).ready(function() { 
    $("#datepicker").datepicker(); 
}); 

encerrando el $("#datepicker").datepicker(); que simplemente le dice el navegador para agregar el evento .datepicker() en el campo de fecha indicado por el ID #datapicker durante el evento listo para documentos (cuando el documento está cargado y listo para el procesamiento).

Al NO adjuntarlo, NO agregará el controlador de eventos hasta después de que el documento esté listo, durante la carga de javascript (o cuando se llame), o la llamada a función si la cerró allí.

Tenga en cuenta que si lo hace:

function mystuff() 
{ 
$("#datepicker").datepicker(); 
}; 
mystuff(); 

obtendrá el manejador añade cuando esa función se ejecuta lo que puede causar problemas si se llama de nuevo:

mystuff(); 

Answer 4

he utilizado como esto de @Simen Echholt contesto

<input onclick="$(this).datepicker().datepicker('show')" class="validate[required,custom[date]] text-input" ... 

Answer 5

había llamado en la función js, y que funcione. Ver el fragmento de código:

Paso-1: En el archivo: timepicker.jsp

<input class="time ui-timepicker-input" id="dcma_day_start" type="text" autocomplete="off" 
    placeholder="End time" onClick="dcmaTimePicker('dcma_day_start', 'dcma_durationId');"> 

Paso-2: En el archivo timepicker.js

function dcmaTimePicker(id, durationId) 
{ 
    var d = document.getElementById(durationId); 

    if(!d.value) 
    { 
     d.value = 15; 
    } 

    jQuery('input#'+id).timepicker({ 'step': d.value }).timepicker('show'); 
} 

Paso-3: El quid es: llamando al .timepicker ('show'), mostrando el timepicker al mismo tiempo.

Answer 6

Si por casualidad alguien quiere mostrar el selector de fechas en un icono glyphicon y en el campo de entrada hice la siguiente:

html parte:

<div class="form-group"> 
    <label>Fecha:<font color="#FF0000">*</font></label> 
<div class='input-group date' id='datepicker1'> 
    <input id="fecha" name="fecha" type="text" class="form-control" /> 
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div> 

Javascript parte:

$(function() { 
     $("#fecha").datepicker(); 
     });//this enable the call to datepicker when click on input field 

     $(function() { 
      $("#datepicker1").click(function() { 
       $('#fecha').datepicker().datepicker("show") 
      }); 
     });//this one enables the onclick event on the glyphicon