jQuery UI: Datepicker mengatur rentang rentang tahun menjadi 100 tahun


301

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?

masukkan deskripsi gambar di sini

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

@dmaij: Jika hanya melihat sekilas pada API API tidak akan menjawabnya ... Tapi ya, gambarnya indah ... :-)
TJ Crowder

@ TJCrowder Seharusnya ada aturan bahwa pertanyaan terlihat seperti ini. Dan memang, mencari di dokumen api bisa menghemat waktu untuk membuat gambar ..
dmaij

11
@TJCrowder Untung ada API. Tapi saya baru saja googled "jquery datepicker tahun rentang" dan menemukan ini. Menjawab pertanyaan saya dalam 10 detik. Lebih cepat kemudian menggunakan API.
Edwin Stoteler

Jawaban:


573

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.


5
Mengalami masalah sebelum saya menyadari bahwa +tanda itu diperlukan.
th1rdey3

1
Terima kasih, kodekan keras dengan cara ini tahunRange: '1950: 2013' berhasil
Ronald Nsabiyera

1
untuk jQuey-Ui yearRange: "c-100: + c + 10" berfungsi dengan baik di mana c berarti tahun berjalan
TechieBrij

2
@ TechieBrij Ini membantu tapi seharusnyac-100:c+10
DreamTeK

3
@Obsidian csebenarnya berarti "Tahun yang dipilih saat ini" dan bukan tahun ini api.jqueryui.com/datepicker/#option-yearRange
ᾠῗᵲ ᄐ ᶌ

19

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


6

Saya melakukan ini:

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

di mana 50kisaran dari tahun berjalan.


4

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

2
Terima kasih atas contohnya
Jay

1

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.


1

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.