jQuery datepicker imposta la data selezionata, al volo


121

Come posso modificare la data selezionata del selettore di date jquery dinamicamente al volo? Ho detto che ha creato un selettore di date in linea. Quindi, dopo un po 'di tempo, voglio riflettere una data diversa lì senza ricreare il datepicker da zero.

Ho provato il metodo setDate, ma non ha funzionato e non c'è molta documentazione nel documento .

C'è un altro plugin (esteso?) Qui , ma voglio usare il plugin fornito con jquery.ui.all.js.

Risposte:


187

Quale versione di jQuery-UI stai usando? Ho testato quanto segue con 1.6r6, 1.7 e 1.7.1 e funziona:

//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );

16
utilizzare defaultDate invece di setDate, se setDate non funziona.
bingjie2680

8
ma per me non ha funzionato in entrambi i casi, la data è stata modificata, ma la data selezionata non compare nel calendario. mi mostra solo oggi evidenziato.
Prageeth Godage

28

Verifica che la data su cui stai tentando di impostarla rientri nell'intervallo di date consentito se sono impostate le opzioni minDate o maxDate.


10

Questo esempio mostra come utilizzare il valore predefinito nel calendario a discesa e il valore nella casella di testo. Mostra anche come impostare il valore predefinito sulla data precedente.

selectedDate è un'altra variabile che contiene la data selezionata corrente del controllo del calendario

    var date = new Date();
    date.setDate(date.getDate() - 1);

    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: date,
        onSelect: function () {
            selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
        }
    });

    $("#datepicker").datepicker("setDate", date);

8

Notato che per DatePicker di Keith Wood ( http://keith-wood.name/datepickRef.html ) i seguenti funzionano - nota che l'impostazione della data predefinita è l'ultima:

    $('#datepicker').datepick({
        minDate: 0,
        maxDate: '+145D',
        multiSelect: 7,
        renderer: $.datepick.themeRollerRenderer,
        ***defaultDate: new Date('1 January 2008')***
    });

7

Per qualche motivo, in alcuni casi non sono riuscito a far funzionare setDate.

Una soluzione alternativa che ho trovato è semplicemente aggiornare l'attributo del valore dell'input fornito. Ovviamente il datepicker stesso non verrà aggiornato, ma se quello che cerchi è visualizzare la data, funziona bene.

var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input

6
C'è uno sconto di uno per mesi, quindi è necessario (date.getMonth () + 1)
Adam

1
setDate non funziona se impostato nelle opzioni iniziali, ho dovuto concatenarlo successivamente con .datepicker ('setDate', ...)
martinedwards

4
$('.date-pick').datePicker().val(new Date()).trigger('change')

finalmente, questo è quello che cerco nelle ultime ore! Ho bisogno di avviare le modifiche, non solo la data di configurazione nel campo di testo!


2
Dovrebbe essere .datepicker()non.datePicker()
Arslan Tabassum

3

Questo è un vecchio thread ma voglio solo dare alcune informazioni su come l'ho usato. Se vuoi impostare la data odierna puoi semplicemente applicarla come sotto.

 $("#datepickerid").datepicker("setDate", "0");

Se vuoi impostare alcuni giorni prima / dopo la data corrente, usa il simbolo -/+simbolo di quanti giorni vuoi come sotto.

 $("#datepickerid").datepicker("setDate", "-7");
 $("#datepickerid").datepicker("setDate", "+5");

2

setDate sembra essere un problema solo con un datepicker inline utilizzato nell'interfaccia utente di jquery, l'errore specifico è InternalError: troppa ricorsione.


2

Questo funziona per me:

$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));

2

In Html puoi aggiungere il tuo campo di input con un selettore di date come questo

<input class="form-control date-picker fromDates" id="myDate" type="text">

e poi in java script, inizializza il tuo datepicker e imposta il tuo valore sulla data in questo modo,

$('.fromDates').datepicker({
                maxDate: '0',
                dateFormat: "dd/mm/yy",
                changeYear: true,
                changeMonth: true,
                yearRange: "-100:+0"
            });

var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );

(Qui l'attributo fromdate mostra le date precedenti della data corrente)


0
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...

Le risposte di solo codice sono sconsigliate su Stack Overflow perché non spiegano come risolve il problema. Modifica la tua risposta per spiegare cosa fa il codice e come risponde alla domanda, in modo che sia utile anche per gli altri utenti oltre che per l'OP.
FluffyKitten

-1

Ho avuto anche molti problemi con il metodo setDate. sembra funzionare solo in v1. Quello che sembra funzionare, tuttavia, è utilizzare il metodo dpSetSelected:

    $("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());

in bocca al lupo!


-1

oppure puoi semplicemente avere

$('.date-pick').datePicker().val(new Date()).trigger('change')

1
Dovrebbe essere .datepicker()non .datePicker().
Florin Frătică
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.