jquery-ui ui - Interfaccia utente jQuery: Datepicker imposta il dropdown dell'intervallo di anni a 100 anni





cdn configuration (6)


Volevo implementare il datepicker per selezionare la data di nascita e ho avuto problemi a cambiare il yearRange in quanto non sembrava funzionare con la mia versione (1.5). Ho aggiornato alla versione più recente di jquery-ui datepicker qui: https://github.com/uxsolutions/bootstrap-datepicker .

Poi ho scoperto che forniscono questo utile strumento on-the-fly, in modo da poter configurare il tuo intero DatePicker e vedere quali impostazioni devi usare.

Ecco come ho scoperto che l'opzione

defaultViewDate

è l'opzione che stavo cercando e non ho trovato risultati nel web.

Quindi per gli altri utenti: se vuoi anche fornire datepicker per modificare la data di nascita, ti suggerisco di utilizzare le seguenti opzioni di codice:

$('#birthdate').datepicker({
    startView: 2,
    maxViewMode: 2,
    daysOfWeekHighlighted: "1,2",
    defaultViewDate: { year: new Date().getFullYear()-20, month: 01, day: 01 }
});

All'apertura di DatePicker inizierai con la vista per selezionare gli anni, 20 anni fa relativi all'anno corrente.

Usando il Datepicker, l'elenco a discesa dell'anno mostra solo 10 anni. L'utente deve fare clic sull'ultimo anno per ottenere più anni.

Come possiamo impostare un intervallo iniziale di 100 anni in modo che l'utente visualizzi un elenco di grandi dimensioni per impostazione predefinita?

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }



È possibile impostare l'intervallo dell'anno utilizzando questa opzione per documentazione qui http://api.jqueryui.com/datepicker/#option-yearRange

yearRange: '1950:2013', // specifying a hard coded year range

o in questo modo

yearRange: "-100:+0", // last hundred years

Dai documenti

Predefinito: "c-10: c + 10"

L'intervallo di anni visualizzato nel menu a discesa anno: o relativo all'anno di oggi ("-nn: + nn"), relativo all'anno selezionato ("c-nn: c + nn"), assoluto ("nnnn: nnnn "), o combinazioni di questi formati (" nnnn: -nn "). Tieni presente che questa opzione influisce solo su ciò che appare nel menu a discesa, per limitare le date che possono essere selezionate usa le opzioni minDate e / o maxDate.




L'ho fatto:

var dateToday = new Date();
var yrRange = dateToday.getFullYear() + ":" + (dateToday.getFullYear() + 50);
and then
yearRange : yrRange

dove 50 è il range dall'anno corrente.




Questo è un po 'tardi per suggerire questo, dato quanto tempo fa è stata pubblicata la domanda originale, ma questo è quello che ho fatto.

Avevo bisogno di un intervallo di 70 anni, che, anche se non fino a 100, è ancora troppi anni per il visitatore a scorrere. (jQuery fa tutto l'anno in gruppo, ma questo è un dolore nella patoie per la maggior parte delle persone.)

Il primo passo è stato modificare il JavaScript per il widget datepicker: trova questo codice in jquery-ui.js o jquery-ui-min.js (dove verrà ridotto a icona):

for (a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#"+
a.id+"', this, 'Y');\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');\">";b<=g;b++)
 a.yearshtml+='<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
a.yearshtml+="</select>";

E sostituirlo con questo:

a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+
 ".datepicker._selectMonthYear('#"+a.id+"', this, 'Y');
 \" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');
 \">";
for(opg=-1;b<=g;b++) {
    a.yearshtml+=((b%10)==0 || opg==-1 ?
        (opg==1 ? (opg=0, '</optgroup>') : '')+
        (b<(g-10) ? (opg=1, '<optgroup label="'+b+' >">') : '') : '')+
        '<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
}
a.yearshtml+="</select>";

Ciò circonda i decenni (ad eccezione dell'attuale) con i tag OPTGROUP.

Successivamente, aggiungi questo al tuo file CSS:

.ui-datepicker OPTGROUP { font-weight:normal; }
.ui-datepicker OPTGROUP OPTION { display:none; text-align:right; }
.ui-datepicker OPTGROUP:hover OPTION { display:block; }

Ciò nasconde i decenni fino a quando il visitatore non ha operato nell'anno di riferimento. Il tuo visitatore può scorrere velocemente qualsiasi numero di anni.

Sentiti libero di usarlo; per favore, dai la giusta attribuzione al tuo codice.




Ha funzionato perfettamente per me.

ChangeYear: - Se impostato su true, indica che è possibile selezionare le celle del mese precedente o successivo indicato nel calendario del mese corrente. Questa opzione è utilizzata con options.showOtherMonths impostato su true.

YearRange: - Specifica l'intervallo di anni nel menu a discesa anno. (Valore predefinito: "-10: +10")

Esempio:-

$(document).ready(function() {
    $("#date").datepicker({
    changeYear:true,
    yearRange: "2005:2015"
    });
});

Riferire : - Impostare l'intervallo di anni in jquery datepicker




Il modo migliore a cui riesco a pensare è di creare un plugin jquery personalizzato per farlo:

jQuery.fn.getIdArray = function() {
  var ret = [];
  $('[id]', this).each(function() {
    ret.push(this.id);
  });
  return ret;
};

Quindi fai qualcosa come

var array = $("#mydiv").getIdArray();




jquery jquery-ui jquery-ui-datepicker