Giao diện người dùng jQuery: Datepicker đặt phạm vi năm thả xuống 100 năm

Sử dụng Datepicker năm thả xuống theo mặc định chỉ hiển thị 10 năm. Người dùng phải nhấp vào năm ngoái để được thêm năm.

Làm cách nào chúng ta có thể đặt phạm vi ban đầu là 100 năm để người dùng sẽ thấy một danh sách lớn theo mặc định?

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

Bạn có thể đặt phạm vi năm bằng tùy chọn này cho mỗi tài liệu tại đây http://api.jqueryui.com/datepicker/#option-yearRange

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

hoặc cách này

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

Từ tài liệu

Mặc định: "c-10: c + 10"

Phạm vi năm được hiển thị trong danh sách thả xuống của năm: có liên quan đến năm nay ("-nn: + nn"), liên quan đến năm hiện được chọn ("c-nn: c + nn"), tuyệt đối ("nnnn: nnnn ") hoặc kết hợp các định dạng này (" nnnn: -nn "). Lưu ý rằng tùy chọn này chỉ ảnh hưởng đến những gì xuất hiện trong trình đơn thả xuống, để hạn chế ngày nào có thể được chọn sử dụng các tùy chọn minDate và / hoặc maxDate.

Điều này làm việc hoàn hảo cho tôi.

ChangeYear: - Khi được đặt thành true, chỉ ra rằng các ô của tháng trước hoặc tháng tiếp theo được chỉ định trong lịch của tháng hiện tại có thể được chọn. Tùy chọn này được sử dụng với tùy chọn.showOtherMonths được đặt thành true.

YearRange: - Chỉ định phạm vi năm trong danh sách thả xuống trong năm. (Giá trị mặc định: Số -10: +10)

Thí dụ:-

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

Tham khảo: - thiết lập phạm vi năm trong trò chơi hẹn hò jquery

Tôi đã làm điều này:

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

nơi 50là khoảng từ năm nay.

Bạn có thể đặt phạm vi năm bằng cách sử dụng tùy chọn này trong trình ghi ngày của UI UI:

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

Đây là một chút muộn trong ngày để gợi ý điều này, được đưa ra cách đây bao lâu câu hỏi ban đầu đã được đăng, nhưng đây là những gì tôi đã làm.

Tôi cần một phạm vi 70 năm, trong khi, không quá 100, vẫn còn quá nhiều năm để khách truy cập cuộn qua. (jQuery thực hiện từng năm theo nhóm, nhưng đó là một nỗi đau trong hầu hết mọi người.)

Bước đầu tiên là sửa đổi JavaScript cho tiện ích datepicker: Tìm mã này trong jquery-ui.js hoặc jquery-ui-min.js (nơi nó sẽ được thu nhỏ):

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

Và thay thế nó bằng cái này:

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

Điều này bao quanh các thập kỷ (ngoại trừ hiện tại) với các thẻ OPTGROUP.

Tiếp theo, thêm phần này vào tệp CSS của bạn:

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

Điều này che giấu các thập kỷ cho đến khi các vị khách truy cập trong năm cơ sở. Khách truy cập của bạn có thể cuộn qua bất kỳ số năm nhanh chóng.

Hãy sử dụng cái này; chỉ xin vui lòng ghi công thích hợp trong mã của bạn.

Tôi muốn triển khai công cụ hẹn hò để chọn ngày sinh và tôi gặp khó khăn khi thay đổi yearRangevì nó dường như không hoạt động với phiên bản của tôi (1.5). Tôi đã cập nhật lên phiên bản datepicker jquery-ui mới nhất tại đây: https://github.com/uxsolutions/bootstrap-datepicker .

Sau đó, tôi phát hiện ra họ cung cấp công cụ này rất hữu ích, vì vậy bạn có thể định cấu hình toàn bộ công cụ hẹn hò của mình và xem bạn phải sử dụng cài đặt nào.

Đó là cách tôi phát hiện ra rằng tùy chọn

defaultViewDate

là tùy chọn tôi đang tìm kiếm và tôi không tìm thấy bất kỳ kết quả nào khi tìm kiếm trên web.

Vì vậy, đối với những người dùng khác: Nếu bạn cũng muốn cung cấp công cụ hẹn hò để thay đổi ngày sinh, tôi khuyên bạn nên sử dụng các tùy chọn mã này:

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

Khi mở công cụ hẹn hò, bạn sẽ bắt đầu với chế độ xem để chọn các năm, 20 năm trước so với năm hiện tại.