jQuery UI: เลื่อนลงช่วงวันที่กำหนดช่วงเวลาเป็น 100 ปี

301

การใช้ Datepicker ปีที่เลื่อนลงโดยค่าเริ่มต้นจะแสดงเพียง 10 ปี ผู้ใช้จะต้องคลิกปีที่แล้วเพื่อเพิ่มจำนวนปีที่เพิ่มขึ้น

เราจะตั้งค่าช่วงเริ่มต้นให้เป็น 100 ปีเพื่อให้ผู้ใช้เห็นรายการขนาดใหญ่เป็นค่าเริ่มต้นได้อย่างไร

ป้อนคำอธิบายรูปภาพที่นี่

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

jquery jquery-ui jquery-ui-datepicker

— Ian Vink
แหล่งที่มา

@dmaij: ถ้าเพียงแค่มองไปที่เอกสาร API จะไม่ตอบ ... แต่ใช่ภาพน่ารัก ... :-)

— TJ Crowder

@TJCrowder ควรมีกฎที่คำถามจะมีลักษณะเช่นนี้ และแน่นอนว่าการดูเอกสาร API อาจช่วยประหยัดเวลาในการสร้างภาพได้

— dmaij

11

@TJCrowder สิ่งที่ดีที่มี API แต่ฉันเพิ่งไป "ช่วงปี jQuery datepicker" และพบสิ่งนี้ ตอบคำถามของฉันใน 10 วินาที จากนั้นเร็วขึ้นด้วยการใช้ API

— Edwin Stoteler

573

คุณสามารถกำหนดช่วงปีโดยใช้ตัวเลือกนี้ตามเอกสารที่นี่http://api.jqueryui.com/datepicker/#option-yearRange

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

หรือด้วยวิธีนี้

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

จากเอกสาร

เริ่มต้น: "c-10: c + 10"

ช่วงปีที่แสดงในปีดรอปดาวน์: อาจสัมพันธ์กับปีปัจจุบัน ("-nn: + nn"), เทียบกับปีที่เลือกในปัจจุบัน ("c-nn: c + nn"), สัมบูรณ์ ("nnnn: nnnn ") หรือชุดรูปแบบเหล่านี้ (" nnnn: -nn ") โปรดทราบว่าตัวเลือกนี้จะมีผลกับสิ่งที่ปรากฏในเมนูแบบเลื่อนลงเพื่อ จำกัด วันที่ที่อาจเลือกใช้ minDate และ / หรือตัวเลือก maxDate

— ᾠῗᵲᄐᶌ
แหล่งที่มา

5

มีปัญหาก่อนที่ฉันจะรู้ว่า+จำเป็นต้องมีเครื่องหมาย

— th1rdey3

1

ขอขอบคุณการเข้ารหัสอย่างหนักด้วยวิธีนี้ช่วงปี: '1950: 2013' ทำงาน

— Ronald Nsabiyera

1

สำหรับ jQuey-Ui yearRange: "c-100: + c + 10" ทำงานได้ดีโดยที่ c หมายถึงปีปัจจุบัน

— TechieBrij

2

@TechieBrij สิ่งนี้มีประโยชน์ แต่มันควรจะเป็นc-100:c+10

— DreamTeK

3

@Obsidian cจริง ๆ แล้วหมายถึง "ปีที่เลือกในปัจจุบัน" และไม่ใช่ปีปัจจุบันapi.jqueryui.com/datepicker/#option-yearRange

— ᾠῗᵲᄐᶌ

19

มันทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน

เปลี่ยนปี: -เมื่อตั้งค่าเป็นจริงแสดงว่าเซลล์ของเดือนก่อนหน้าหรือเดือนถัดไปที่ระบุในปฏิทินของเดือนปัจจุบันสามารถเลือกได้ ตัวเลือกนี้ใช้กับ options.showOtherMonths ตั้งค่าเป็นจริง

YearRange: -ระบุช่วงปีในการเลื่อนลงปี (ค่าเริ่มต้น:“ -10: +10″)

ตัวอย่าง:-

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

อ้างอิง: - ตั้งค่าช่วงปีใน jQuery datepicker

— Ranju
แหล่งที่มา

6

ฉันทำอย่างนี้:

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

ที่50เป็นช่วงตั้งแต่ปีปัจจุบัน

— learner88
แหล่งที่มา

4

คุณสามารถกำหนดช่วงปีโดยใช้ตัวเลือกนี้ใน jQuery UI datepicker:

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

— Sanjib Debnath
แหล่งที่มา

2

ขอบคุณสำหรับตัวอย่าง

— Jay

1

นี่มันล่าช้าไปนิดหน่อยในวันที่จะแนะนำสิ่งนี้เนื่องจากนานแค่ไหนที่คำถามเดิมถูกโพสต์ แต่นี่คือสิ่งที่ฉันทำ

ฉันต้องการช่วงเวลา 70 ปีที่ผ่านมาซึ่งในขณะที่ไม่มากถึง 100 ปีก็ยังคงเป็นเวลานานเกินไปที่ผู้เข้าชมจะเลื่อนดู (jQuery ดำเนินการเป็นกลุ่มเป็นรายปี แต่นั่นเป็นความเจ็บปวดใน patootie สำหรับคนส่วนใหญ่)

ขั้นตอนแรกคือการแก้ไข JavaScript สำหรับวิดเจ็ต datepicker: ค้นหารหัสนี้ใน jquery-ui.js หรือ jquery-ui-min.js (ซึ่งจะถูกย่อให้เล็กสุด):

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

และแทนที่ด้วยสิ่งนี้:

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

สิ่งนี้ล้อมรอบทศวรรษ (ยกเว้นปัจจุบัน) ด้วยแท็ก OPTGROUP

ถัดไปเพิ่มลงในไฟล์ CSS ของคุณ:

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

สิ่งนี้ซ่อนมานานหลายทศวรรษจนกระทั่งผู้มาเยี่ยมชมใช้ช่วงปีฐาน ผู้เข้าชมของคุณสามารถเลื่อนดูได้หลายปีอย่างรวดเร็ว

รู้สึกอิสระที่จะใช้สิ่งนี้; โปรดระบุที่มาที่ถูกต้องในรหัสของคุณ

— Garison Piatt
แหล่งที่มา

1

ฉันต้องการใช้ datepicker เพื่อเลือกวันเกิดและฉันมีปัญหาในการเปลี่ยนyearRangeเนื่องจากดูเหมือนจะไม่ทำงานกับเวอร์ชันของฉัน (1.5) ฉันปรับปรุงให้เป็นรุ่นใหม่ล่าสุด datepicker jQuery UI-ที่นี่: https://github.com/uxsolutions/bootstrap-datepicker

จากนั้นฉันก็พบว่าพวกเขาให้เครื่องมือที่เป็นประโยชน์ได้ทันทีดังนั้นคุณสามารถกำหนดค่า datepicker ทั้งหมดของคุณและดูการตั้งค่าที่คุณต้องใช้

นั่นคือวิธีที่ฉันพบว่าตัวเลือก

defaultViewDate

เป็นตัวเลือกที่ฉันกำลังค้นหาและฉันไม่พบผลลัพธ์ใด ๆ ในการค้นหาเว็บ

ดังนั้นสำหรับผู้ใช้รายอื่น: หากคุณต้องการให้ datepicker เปลี่ยนวันเกิดฉันขอแนะนำให้ใช้ตัวเลือกรหัสนี้:

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

เมื่อเปิด datepicker คุณจะเริ่มต้นด้วยมุมมองเพื่อเลือกปีที่ผ่านมา 20 ปีที่ผ่านมาเมื่อเทียบกับปีปัจจุบัน

— AlexioVay
แหล่งที่มา