Come posso precompilare una casella di testo jQuery Datepicker con la data odierna?

Question

Ho un calendario jQuery Datepicker molto semplice:

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

e ovviamente in HTML ...

<input type="text" size="10" value="" id="date_pretty"/>

La data odierna è ben evidenziata per l'utente quando visualizzano il calendario, ma come faccio a ottenere jQuery per precompilare la casella di testo stessa con la data odierna sul caricamento della pagina, senza che l'utente faccia nulla? Il 99% delle volte, l'impostazione predefinita della data di oggi sarà quella che desiderano.

Answer 1

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

Questo è conciso e fa il lavoro (obsoleto):

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

Questo è meno conciso, l'utilizzo di concatenamento gli consente di lavorare in Chrome (2019 -06-04):

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

Answer 2

Devi FIRST chiamare datepicker () > quindi usa 'setDate' per ottenere la data corrente.

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

O concatena la chiamata del 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());

Funzionerà NON solo con

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

NOTE : I parametri setDate accettabili sono descritti qui

Answer 3

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 là fuori ..

Answer 4

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

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

Demo

Come menzionato nella documentazione, setDate () accetta felicemente l'oggetto, il numero o una stringa JavaScript Date:

  

La nuova data può essere un oggetto Date o una stringa nella data corrente   formato (ad esempio '01 / 26/2009 '), un numero di giorni a partire da oggi (ad esempio +7) o a   stringa di valori e punti ('y' per anni, 'm' per mesi, 'w' per   settimane, "d" per giorni, ad es. '+ 1m + 7d') o null per cancellare l'elemento selezionato   data.

Nel caso ti stia chiedendo, l'impostazione defaultDate La proprietà nel costruttore non aggiorna il controllo associato.

Answer 5

Impostato su to< :

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

Impostare su ieri :

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

E così via con qualsiasi numero di giorni prima di o dopo data di oggi .

Vedi UI jQuery ›Metodi› setDate .

Answer 6

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 grayghost!

Answer 7

Questo codice garantirà l'uso del formato del tuo datepicker:

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

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

Answer 8

Questo ha funzionato per me.

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

Answer 9

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

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

Sono anche riuscito a tagliarlo un po 'e ha anche funzionato:

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

Answer 10

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

Answer 11

Al fine di impostare il datepicker su una determinata ora predefinita (la data corrente nel mio caso) al caricamento, E quindi avere la possibilità di scegliere un'altra data la sintassi è:

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

Answer 12

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

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

Answer 13

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 odierna in caso contrario. Di seguito funziona bene per me:

    $( "#datepicker" ).datepicker();
    <?php if (!empty($oneEVENT['start_ts'])): ?>
       $( "#datepicker" ).datepicker( "setDate", "<?php echo $startDATE; ?>" );
    <? else: ?>
       $("#datepicker").datepicker('setDate', new Date());   
    <?php endif; ?>
  });

Answer 14

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) Inserimento predefinito per oggi. Devi prima compilare il datepicker.

$("input.datepicker").datepicker().datepicker("setDate", new Date());

Answer 15

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

Assegna prettyDate al controllo necessario.

Answer 16

Prova questo

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

Answer 17

Questo funziona meglio per me, perché a volte ho problemi a chiamare .datepicker ('setDate', new Date ()); come si sbaglia se se ho lo datepicker già configurato con i parametri.

$("#myDateText").val(moment(new Date()).format('DD/MM/YYYY'));

Answer 18

$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});

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