jQuery यूआई: डेटपिकर सेट साल रेंज ड्रॉपडाउन 100 साल

Question

डेटपिकर का उपयोग करके डिफ़ॉल्ट रूप से वर्ष ड्रॉप डाउन केवल 10 साल दिखाता है। अधिक वर्षों को जोड़ने के लिए उपयोगकर्ता को पिछले साल क्लिक करना होगा।

हम प्रारंभिक सीमा को 100 साल के लिए कैसे सेट कर सकते हैं ताकि उपयोगकर्ता डिफ़ॉल्ट रूप से बड़ी सूची देख सके?

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

Answer 1

आप प्रलेखन प्रति इस विकल्प को यहाँ http://api.jqueryui.com/datepicker/#option-yearRange

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

या इस तरह

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

डॉक्स

से उपयोग करते हुए साल सीमा निर्धारित कर सकते हैं

डिफ़ॉल्ट: "सी -10: सी + 10"

साल साल ड्रॉप-डाउन में दिखाया गया है की सीमा: वर्तमान में करने के लिए, रिश्तेदार: या तो आज के साल के सापेक्ष ("+ nn -nn") चयनित वर्ष ("सी-एनएन: सी + एनएन"), पूर्ण ("एनएनएनएन: एनएनएनएन"), या इन प्रारूपों के संयोजन ("एनएनएनएन: -एनएन")। ध्यान दें कि यह विकल्प केवल ड्रॉप-डाउन में दिखाई देने वाली चीज़ों को प्रभावित करता है, यह निर्धारित करने के लिए कि कौन सी तिथियों का चयन किया जा सकता है, minDate और/या maxDate विकल्पों का उपयोग करें।

Answer 2

मैंने किया था यह:

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

जहां 50 चालू वर्ष से सीमा है।

Answer 3

यह मेरे लिए पूरी तरह से काम किया।

ChangeYear: - जब सही पर सेट किया, पता चलता है कि पिछले या अगले महीने की कोशिकाओं चालू माह के कैलेंडर में संकेत चुना जा सकता है। इस विकल्प का उपयोग विकल्पों के साथ किया जाता है। ShowOtherMonths को सत्य पर सेट करें।

वर्ष श्रेणी: - वर्ष ड्रॉपडाउन में वर्षों की सीमा निर्दिष्ट करता है। (डिफ़ॉल्ट मूल्य: "-10: 10")

उदाहरण: -

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

देखें: - set year range in jquery datepicker

Answer 4

यह इस सुझाव के लिए दिन में देर से एक सा है, यह देखते हुए कि मूल प्रश्न कितने समय पहले पोस्ट किया गया था, लेकिन मैंने यही किया।

मुझे 70 साल की एक श्रृंखला की आवश्यकता है, जबकि 100 तक नहीं, आगंतुक के लिए स्क्रॉल करने के लिए अभी भी बहुत सालों हैं। (jQuery समूह में साल भर कदम करता है, लेकिन अधिकांश लोगों के लिए पेटूटी में दर्द होता है।)

पहला कदम डेटपिकर विजेट के लिए जावास्क्रिप्ट को संशोधित करना था: यह कोड jquery-ui.js या jquery में ढूंढें -ui मिनट।js (जहां यह छोटा कर दिया जाएगा): OPTGROUP टैग के साथ

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

यह दशकों (वर्तमान को छोड़कर) के चारों ओर:

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

और यह की जगह इस के साथ।

इसके बाद, अपने सीएसएस फ़ाइल से जोड़ें:

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

इस आधार वर्ष से अधिक आगंतुक माउस रखता है जब तक दशकों छुपाता है। आपका आगंतुक जल्दी से किसी भी वर्ष से स्क्रॉल कर सकता है।

इस का उपयोग करने के लिए स्वतंत्र महसूस; बस अपने कोड में उचित विशेषता दें।

Answer 5

मैं जन्मदिन का चयन करने के लिए डेटपिकर को कार्यान्वित करना चाहता था और मुझे yearRange बदलने में परेशानी थी क्योंकि यह मेरे संस्करण (1.5) के साथ काम नहीं कर रहा था। मैं नवीनतम jQuery-यूआई datepicker संस्करण यहाँ के लिए अद्यतन: https://github.com/uxsolutions/bootstrap-datepicker।

तब मुझे पता चला कि वे इस बहुत उपयोगी ऑन-द-मक्खी उपकरण प्रदान करते हैं, तो आप अपने पूरे datepicker config और क्या आप का उपयोग करने के लिए है सेटिंग देख सकते हैं।

कि कैसे मुझे पता चला है कि विकल्प

defaultViewDate

विकल्प मैं खोज रहा था और मैं वेब की खोज करने के लिए कोई परिणाम नहीं मिला।

तो अन्य उपयोगकर्ताओं के लिए

: आप भी datepicker प्रदान करने के लिए जन्मतिथि बदलना चाहते हैं, मैं इस कोड विकल्पों का उपयोग करने का सुझाव देते हैं:

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

जब datepicker आप को देखने के साथ शुरू कर देंगे चयन करने के लिए खोलने साल, 20 साल पहले चालू वर्ष के सापेक्ष।