jQuery Kullanıcı Arayüzü: Datepicker, yıl aralığı açılır listesini 100 yıla ayarlar

Datepicker'ı kullanarak varsayılan olarak yıl açılır listesi yalnızca 10 yılı gösterir. Daha fazla yıl eklemek için kullanıcının geçen yılı tıklaması gerekir.

Başlangıç ​​aralığını 100 yıl olarak nasıl ayarlayabiliriz, böylece kullanıcı varsayılan olarak büyük bir liste görür?

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

Yıl aralığını, buradaki dokümantasyon başına bu seçeneği kullanarak ayarlayabilirsiniz http://api.jqueryui.com/datepicker/#option-yearRange

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

veya bu şekilde

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

Dokümanlar'dan

Varsayılan: "c-10: c + 10"

Yıl açılır menüsünde görüntülenen yıl aralığı: ya bugün seçili yıla göre ("-nn: + nn"), seçili yıla göre ("c-nn: c + nn"), mutlak ("nnnn: nnnn ") veya bu biçimlerin birleşimleri (" nnnn: -nn "). Bu seçeneğin yalnızca açılır menüde görünenleri etkilediğini, hangi tarihlerin seçilebileceğini kısıtlamak için minDate ve / veya maxDate seçeneklerini kullanın.

Bu benim için mükemmel çalıştı.

ChangeYear: - true olarak ayarlandığında, geçerli ayın takviminde belirtilen önceki veya sonraki ayın hücrelerinin seçilebileceğini gösterir. Bu seçenek options.showOtherMonths öğesi true olarak ayarlandığında kullanılır.

YearRange: - Yıl açılır listesindeki yıl aralığını belirtir. (Varsayılan değer: “-10: +10 ″)

Misal:-

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

Bakınız: - jquery datepicker'da yıl aralığını ayarlayın

Bunu ben yaptım:

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

nerede 50cari yıla aralığıdır.

JQuery UI datepicker'daki bu seçeneği kullanarak yıl aralığını ayarlayabilirsiniz:

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

yearRange: "c-100:c+100", // last hundred years and future hundred years

yearRange: "c-10:c+10", // last ten years and future ten years

Bu, orijinal sorunun ne kadar süre önce yayınlandığı göz önüne alındığında, bunu önermek için biraz geç, ancak bu yaptım.

Ziyaretçinin dolaşabilmesi için 100 kadar olmasa da 70 yıl aralığa ihtiyacım vardı. (jQuery gruplar halinde adım adım ilerler, ancak bu çoğu insan için patootede bir ağrıdır.)

İlk adım, tarih seçici widget'ının JavaScript'ini değiştirmekti: Bu kodu jquery-ui.js veya jquery-ui-min.js (burada simge durumuna küçültülecek) olarak bulun:

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>";

Ve bununla değiştirin:

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>";

Bu OPTGROUP etiketleri ile onlarca yıl (akım hariç) çevreliyor.

Ardından, bunu CSS dosyanıza ekleyin:

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

Bu, ziyaretçi temel yıl boyunca fareler alana dek onlarca yıl gizlenir. Ziyaretçiniz istediğiniz sayıda yıl içinde hızlı bir şekilde gezinebilir.

Bunu kullanmaktan çekinmeyin; lütfen kodunuza uygun atıfta bulunun.

Doğum tarihini seçmek için tarih seçiciyi uygulamak istedim ve sürümümle yearRangeçalışmıyor gibi görünen sorunları değiştirdim (1.5). Buradaki en yeni jquery-ui datepicker sürümüne güncelledim: https://github.com/uxsolutions/bootstrap-datepicker .

Daha sonra bu çok kullanışlı aracı sağladıklarını öğrendim, böylece tüm tarih toplayıcınızı yapılandırabilir ve hangi ayarları kullanmanız gerektiğini görebilirsiniz.

Bu şekilde bu seçeneğin

defaultViewDate

aradığım seçenek ve web'de arama yapan herhangi bir sonuç bulamadım.

Diğer kullanıcılar için: Ayrıca doğum tarihini değiştirmek için tarih seçici sağlamak istiyorsanız, bu kod seçeneklerini kullanmanızı öneririz:

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

Tarih seçiciyi açarken, 20 yıl önce geçerli yıla göre yılların seçilmesi görünümüyle başlayacaksınız.