Giao diện người dùng jQuery: Trình đặt ngày tháng đặt xuống thả xuống phạm vi năm thành 100 năm

Question

Sử dụng Trình đặt ngày tháng xuống theo năm mặc định chỉ hiển thị 10 năm. Người dùng phải nhấp vào năm ngoái để nhận được nhiều năm hơn.

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

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

Answer 1

Bạn có thể thiết lập các phạm vi năm sử dụng tùy chọn này cho mỗi tài liệu ở đây http://api.jqueryui.com/datepicker/#option-yearRange

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

hoặc theo cách này

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

Từ Documents

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

Phạm vi năm được hiển thị trong menu thả xuống năm: tương ứng với năm nay ("-nn: + nn"), so với hiện tại năm đã 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ế những ngày nào có thể được chọn sử dụng tùy chọn minDate và/hoặc maxDate.

Answer 2

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 50 là phạm vi từ năm nay.

Answer 3

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

ChangeYear: - Khi thiết lập là true, chỉ ra rằng các tế bào của tháng trước hoặc bên cạnh quy đị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 đặt thành true.

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

Ví dụ: -

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

Tham khảo: - set year range in jquery datepicker

Answer 4

Đây là một chút vào cuối ngày cho thấy điều này, đưa ra câu hỏi ban đầu được đăng trong bao lâu, nhưng đây là những gì tôi đã làm.

Tôi cần khoảng 70 năm, trong đó 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à nỗi đau trong patootie đối với hầu hết mọi người.)

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

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ó với điều 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>"; 

này bao quanh những thập kỷ (trừ hiện hành) với các thẻ OPTGROUP.

Tiếp theo, thêm video này vào file 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; } 

này ẩn những thập kỷ cho đến khi chuột người truy cập so với năm cơ sở. Khách truy cập của bạn có thể cuộn qua bất kỳ số năm nào một cách nhanh chóng.

Hãy sử dụng tính năng này; chỉ cần đưa ra phân bổ phù hợp trong mã của bạn.

Answer 5

Tôi muốn triển khai datepicker để chọn ngày sinh và tôi gặp khó khăn khi thay đổi yearRange vì 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 trình duyệt datepicker mới nhất ở đây: https://github.com/uxsolutions/bootstrap-datepicker.

Sau đó, tôi phát hiện ra rằng 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ộ datepicker của mình và xem cài đặt nào bạn phải sử dụng.

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

defaultViewDate

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

Vì vậy, cho những người dùng khác: Nếu bạn cũng muốn cung cấp datepicker để thay đổi ngày sinh, tôi đề nghị sử dụng mã này lựa chọn:

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

Khi mở datepicker bạn sẽ bắt đầu với quan điểm để chọn năm, 20 năm trước so với năm hiện tại.