jQuery UI: Datepicker mengatur rentang rentang tahun menjadi 100 tahun

Menggunakan Datepicker tahun drop-down secara default hanya menunjukkan 10 tahun. Pengguna harus mengklik tahun terakhir untuk mendapatkan lebih banyak tahun ditambahkan.

Bagaimana kita menetapkan rentang awal menjadi 100 tahun sehingga pengguna akan melihat daftar besar secara default?

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

Anda dapat mengatur rentang tahun menggunakan opsi ini per dokumentasi di sini http://api.jqueryui.com/datepicker/#option-yearRange

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

atau dengan cara ini

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

Dari Documents

Default: "c-10: c + 10"

Rentang tahun yang ditampilkan pada drop-down tahun: baik relatif terhadap tahun ini ("-nn: + nn"), relatif terhadap tahun yang saat ini dipilih ("c-nn: c + nn"), absolut ("nnnn: nnnn "), atau kombinasi dari format ini (" nnnn: -nn "). Perhatikan bahwa opsi ini hanya memengaruhi apa yang muncul di menu tarik-turun, untuk membatasi tanggal mana yang dapat dipilih, gunakan opsi minDate dan / atau maxDate.

Ini bekerja dengan baik untuk saya.

ChangeYear: - Ketika disetel ke true, menunjukkan bahwa sel-sel bulan sebelumnya atau berikutnya yang ditunjukkan dalam kalender bulan ini dapat dipilih. Opsi ini digunakan dengan options.showOtherMonths disetel ke true.

YearRange: - Menentukan rentang tahun pada dropdown tahun. (Nilai default: “-10: +10 ″)

Contoh:-

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

Refer: - mengatur rentang tahun di datepicker jquery

Saya melakukan ini:

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

di mana 50kisaran dari tahun berjalan.

Anda dapat mengatur rentang tahun menggunakan opsi ini di datepicker UI jQuery:

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

Ini agak terlambat untuk menyarankan ini, mengingat sudah berapa lama pertanyaan asli diposting, tapi inilah yang saya lakukan.

Saya membutuhkan kisaran 70 tahun, yang, meskipun tidak sebanyak 100 tahun, masih terlalu banyak bagi pengunjung untuk digulirkan. (jQuery memang melalui tahun dalam kelompok, tapi itu menyebalkan bagi kebanyakan orang.)

Langkah pertama adalah memodifikasi JavaScript untuk widget datepicker: Temukan kode ini di jquery-ui.js atau jquery-ui-min.js (di mana ia akan diperkecil):

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

Dan gantilah dengan ini:

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

Ini mengelilingi dekade (kecuali untuk saat ini) dengan tag OPTGROUP.

Selanjutnya, tambahkan ini ke file CSS Anda:

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

Ini menyembunyikan dasawarsa sampai pengunjung melewati tahun dasar. Pengunjung Anda dapat menggulir melalui sejumlah tahun dengan cepat.

Jangan ragu untuk menggunakan ini; tolong berikan atribusi yang tepat dalam kode Anda.

Saya ingin menerapkan datepicker untuk memilih tanggal lahir dan saya mengalami kesulitan mengubah yearRangekarena tampaknya tidak berfungsi dengan versi saya (1,5). Saya memperbarui ke versi datepicker jquery-ui terbaru di sini: https://github.com/uxsolutions/bootstrap-datepicker .

Kemudian saya menemukan mereka menyediakan alat on-the-fly yang sangat membantu ini, sehingga Anda dapat mengkonfigurasi seluruh datepicker Anda dan melihat pengaturan apa yang harus Anda gunakan.

Begitulah cara saya menemukan opsi itu

defaultViewDate

adalah opsi yang saya cari dan saya tidak menemukan hasil pencarian di web.

Jadi untuk pengguna lain: Jika Anda juga ingin memberikan datepicker untuk mengubah tanggal lahir, saya sarankan untuk menggunakan opsi kode ini:

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

Saat membuka datepicker Anda akan mulai dengan tampilan untuk memilih tahun, 20 tahun yang lalu dibandingkan dengan tahun saat ini.