Come faccio a pre-compilare una casella di testo jQuery Datepicker con la data odierna?

Ho un calendario jQuery Datepicker molto semplice:

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

e ovviamente nell’HTML …

  

La data odierna è ben evidenziata per l’utente quando viene visualizzato il calendario, ma come faccio a ottenere jQuery per pre-compilare la casella di testo stessa con la data odierna sul caricamento della pagina, senza che l’utente debba fare nulla? Il 99% delle volte, l’impostazione predefinita della data odierna sarà ciò che desidera.

Aggiornamento: ci sono rapporti che non funzionano più su Chrome.

Questo è conciso e fa il lavoro:

 $(".date-pick").datepicker('setDate', new Date()); 

Devi PRIMA chiamare datepicker ()> quindi utilizzare “setDate” per ottenere la data corrente.

 $(".date-pick").datepicker(); $(".date-pick").datepicker("setDate", new Date()); 

OR concatenare la chiamata al metodo setDate dopo l’inizializzazione di datepicker, come indicato in un commento su questa risposta

 $('.date-pick').datepicker({ /* optional option parameters... */ }) .datepicker("setDate", new Date()); 

NON funzionerà con giusto

 $(".date-pick").datepicker("setDate", new Date()); 

NOTA : i parametri SetDate accettabili sono descritti qui

 var myDate = new Date(); var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' + myDate.getFullYear(); $("#date_pretty").val(prettyDate); 

sembrava funzionare, ma potrebbe esserci un modo migliore di uscire …

Il metodo setDate() imposta la data e aggiorna il controllo associato. Ecco come:

 $("#datepicker1").datepicker({ dateFormat: "yy-mm-dd" }).datepicker("setDate", "0"); 

dimostrazione

Come accennato nella documentazione, setDate() accetta felicemente l’object Date, il numero o una stringa JavaScript:

La nuova data può essere un object Date o una stringa nel formato data corrente (ad esempio ’01 / 26/2009 ‘), un numero di giorni da oggi (ad es. +7) o una stringa di valori e punti (‘ y ‘per anni, ‘m’ per mesi, ‘w’ per settimane, ‘d’ per giorni, es. ‘+ 1m + 7d’), o null per cancellare la data selezionata.

Nel caso defaultDate chiedendo, l’impostazione defaultDate proprietà defaultDate nel costruttore non aggiorna il controllo associato.

Impostare su oggi :

 $('#date_pretty').datepicker('setDate', '+0'); 

Impostato per ieri :

 $('#date_pretty').datepicker('setDate', '-1'); 

E così via con un numero qualsiasi di giorni prima o dopo la data odierna .

Vedi l’ interfaccia utente di jQuery> Metodi> setDate .

La soluzione è:

 $(document).ready(function(){ $("#date_pretty").datepicker({ }); var myDate = new Date(); var month = myDate.getMonth() + 1; var prettyDate = month + '/' + myDate.getDate() + '/' + myDate.getFullYear(); $("#date_pretty").val(prettyDate); }); 

Grazie, grazie!

Questo codice assicurerà di utilizzare il formato del tuo datepicker:

 $('#date-selector').datepicker('setDate', new Date()); 

Non è necessario riapplicare il formato, utilizza il datapicker predefinito da te sull’inizializzazione di datepicker (se lo hai assegnato!);)

Questo ha funzionato per me.

 $('#inputName') .datepicker() .datepicker('setDate', new Date()); 

Il codice di David K ​​Egghead ha funzionato perfettamente, grazie!

 $(".date-pick").datepicker(); $(".date-pick").datepicker("setDate", new Date()); 

Sono anche riuscito a tagliare un po ‘e ha funzionato anche:

 $(".date-pick").datepicker().datepicker("setDate", new Date()); 
 $('input[name*="date"]').datepicker({ dateFormat: 'dd-mm-yy', changeMonth: true, changeYear: true, beforeShow: function(input, instance) { $(input).datepicker('setDate', new Date()); } }); 

Per impostare il datapicker su un certo tempo predefinito (la data corrente nel mio caso) al momento del caricamento, E quindi avere l’opzione di scegliere un’altra data la syntax è:

  $(function() { // initialize the datapicker $("#date").datepicker(); // set the time var currentDate = new Date(); $("#date").datepicker("setDate",currentDate); // set the options for the button $("#date").datepicker("option",{ dateFormat: 'dd/mm', showOn: "button", // whatever option Or event you want }); }); 

Ho pensato di aggiungere i miei due centesimi. Il selettore viene utilizzato in un modulo di aggiunta / aggiornamento, quindi è necessario mostrare la data proveniente dal database se si modifica un record esistente o mostrare la data di oggi, se no. Qui di seguito sta funzionando bene per me:

  $( "#datepicker" ).datepicker();  $( "#datepicker" ).datepicker( "setDate", "" );  $("#datepicker").datepicker('setDate', new Date());  }); 

Per pre-compilare la data, devi prima inizializzare datepicker, quindi passare il valore del parametro setDate.

 $("#date_pretty").datepicker().datepicker("setDate", new Date()); 

Hai 2 opzioni:

OPZIONE A) Segna come “attivo” nel tuo calendario, solo quando fai clic sull’input.

Js :

 $('input.datepicker').datepicker( { changeMonth: false, changeYear: false, beforeShow: function(input, instance) { $(input).datepicker('setDate', new Date()); } } ); 

Css :

 div.ui-datepicker table.ui-datepicker-calendar .ui-state-active, div.ui-datepicker table.ui-datepicker-calendar .ui-widget-content .ui-state-active { background: #1ABC9C; border-radius: 50%; color: #fff; cursor: pointer; display: inline-block; width: 24px; height: 24px; }​ 

OPZIONE B) Ingresso predefinito con oggi. Devi prima inserire il datepicker.

  $ ("input.datepicker"). datepicker (). datepicker ("setDate", new Date ()); 
 var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date()); alert(prettyDate); 

Assegna il prettyDate al controllo necessario.

Prova questo

 $(this).datepicker("destroy").datepicker({ changeMonth: false, changeYear: false,defaultDate:new Date(), dateFormat: "dd-mm-yy", showOn: "focus", yearRange: "-5:+10" }).focus(); 

Funziona meglio per me, perché a volte ho problemi a chiamare .datepicker('setDate', new Date()); in quanto mette a disagio se ho il datepicker già configurato con parametri.

 $("#myDateText").val(moment(new Date()).format('DD/MM/YYYY')); 
 $(function() { $('.date-pick').datePicker().val(new Date().asString()).trigger('change'); }); 

Fonte: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html