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



Answers

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 here

Question

Ho un calendario jQuery Datepicker molto semplice:

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

e ovviamente nell'HTML ...

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

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.




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

Assegna il prettyDate al controllo necessario.




Il metodo here imposta la data e aggiorna il controllo associato. Ecco come:

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

Demo

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

La nuova data può essere un oggetto 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.




Questo ha funzionato per me.

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



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!




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



$('input[name*="date"]').datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
        beforeShow: function(input, instance) { 
            $(input).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());



Related