Come eseguire il selettore di date al primo evento onclick?

Question

Sto usando questo date picker from jqueryui.
Se si guarda in quella pagina, allora vi accorgerete che hanno appena scritto in una funzione come questa:

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

Ma voglio aprire il mio selezione data su un testo dell'evento casella di selezione.
Così ho scritto questo:

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

in una funzione che mi rivolgo l'evento onclick casella di testo.
Ma in questo c'è un problema in arrivo.

Ricevo il selettore della data solo la seconda volta che faccio clic sulla casella di testo.
Se clicco la prima volta dopo che la pagina è stata caricata, il selettore di date non verrà visualizzato ma non appena clicco la seconda volta, il selettore di date sta per arrivare.

Perché? E posso farlo al primo clic?

Sì, lo so che questo sta già accadendo perfettamente se inserisco il primo codice ma lo voglio nella mia funzione.

EDIT:
Ora vi spiegherò a tutti voi ragazzi esattamente di cosa sto facendo.

Il mio requisito è il seguente:

1) Quando si seleziona la data la prima volta. Le date che precedono la data di oggi devono essere disabilitate nel calendario.
2) Ora quando seleziono la data la seconda volta nel calendario, la data dovrebbe iniziare un giorno dopo la data precedente.

ho scritto come questo ....

$(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); 

          } 
        }); 

}); 

Questo funziona perfettamente su un requisito,
ma per il secondo requisito ho bisogno di controllare prima se non v'è alcun valore casella di testo. Se ce n'è uno allora
dovrebbe selezionare direttamente +1 a quella data e le date precedenti dovrebbero essere disabilitate.

Come fare questo?

Answer 1

Il motivo è non viene visualizzato al primo clic perché l'istante in cui lo si fa clic per la prima volta, non è registrato come datepicker. Pertanto non ha alcun evento onclick che gli dice che dovrebbe mostrare qualsiasi datepicker quando si fa clic su di esso.

Al secondo clic, tuttavia, è stato impostato come un Datepicker durante il primo clic (e ora ha un evento onclick in cui verrà mostrato il DatePicker). L'evento onclick di DatePicker si attiva, mostrando il selettore.

Come menzionato in altre risposte, questo non è il metodo consigliato per farlo. Ma se si vuole veramente per legarlo onclick e non onload, è possibile mostrare il selettore sul primo clic facendo

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

Questo registrerà l'elemento come datepicker e mostrare poi mostrarlo allo stesso tempo.

Answer 2

Assicurati di chiamare il datepicker al caricamento della pagina e non con l'evento onclick.

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

Answer 3

penso che si fraintendono il significato di:

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

, che è la stessa:

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

e

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

Con racchiude il $("#datepicker").datepicker(); semplicemente dire il browser da aggiungere l'evento .datepicker() per il campo data indicato dall'ID #datapicker durante l'evento pronto per il documento (quando il documento è caricato e pronto per l'elaborazione).

NON includendolo, NON si aggiungerà il gestore di eventi fino a dopo che il documento è pronto, durante il caricamento javascript (o quando viene chiamato), o la chiamata di funzione se lo si è inclinato lì.

Tenete presente che se si fa:

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

otterrete il gestore ha aggiunto, quando tale funzione viene eseguito che può causare problemi se si quindi chiamare di nuovo:

mystuff(); 

Answer 4

ho usato come questo da @Simen Echholt rispondo

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

Answer 5

avevo chiamato nella funzione js, e farlo funzionare. Vedere il frammento di codice:

Step-1: Nel file: 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');"> 

Step-2: Nel file 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'); 
} 

Step-3: Il punto cruciale è: chiamare il .timepicker ('show'), mostrando il timepicker alla prima ora stessa.

Answer 6

Se per caso qualcuno vuole per visualizzare il DatePicker in un'icona glyphicon e sul campo di input ho fatto la seguente:

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