jQuery UI: डेटपिकर सेट वर्ष सीमा 100 वर्ष तक ड्रॉपडाउन होती है

Question

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

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

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

Comments

@dmaij: केवल API डॉक्स पर एक नज़र यह जवाब तो नहीं है ... लेकिन हाँ, छवि प्यारा है ... :-)

— टीजे Crowder

@TJCrowder एक नियम होना चाहिए कि प्रश्न इस तरह दिखें। और वास्तव में, एपीआई डॉक्स में देखने से छवि बनाने का समय बचाया जा सकता था ..

— dmaij

@TJCrowder अच्छी बात है कि एक एपीआई है। लेकिन मैंने सिर्फ "jquery डेटपिकर ईयर रेंज" को गुगली दिया और यह पाया। 10 सेकंड में मेरे सवाल का जवाब देना। एक एपीआई का उपयोग करते हुए तेज़।

— एडविन स्टेलर

Answer 1

आप प्रति प्रलेखन इस विकल्प का उपयोग करके यहां वर्ष सीमा निर्धारित कर सकते हैं 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 ")। ध्यान दें कि यह विकल्प केवल वही दिखाता है जो ड्रॉप-डाउन में दिखाई देता है, यह प्रतिबंधित करने के लिए कि कौन सी तिथियों का चयन किया जा सकता है मिनाडेट और / या अधिकतम विकल्प का उपयोग करें।

Comments

क्या मुझे पता था कि +साइन की आवश्यकता से पहले परेशानी हो रही थी।

— th1rdey3

धन्यवाद, हार्ड कोडिंग इस तरह से यह सालाना: '1950: 2013' में काम किया

— रोनाल्ड एनएसबिया 1

jQuey-Ui yearRange के लिए: "c-100: + c + 10" ठीक काम करता है जहाँ c चालू वर्ष के लिए खड़ा है

— TechieBrij

@TechieBrij यह मददगार है, लेकिन यह माना जाता हैc-100:c+10

— DreamTeK

@ ऑबसिडियन का cवास्तव में अर्थ है "वर्तमान चयनित वर्ष" और वर्तमान वर्ष नहीं api.jqueryui.com/datepicker/#option-yearRange

— ᾠῗᵲ

Answer 2

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

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

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

उदाहरण:-

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

देखें: - jquery datepicker में वर्ष सीमा निर्धारित करें

Answer 3

इसे मैने किया है:

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

50वर्तमान वर्ष की सीमा कहां है।

Answer 4

आप jQuery 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

Comments

उदाहरणों के लिए धन्यवाद

— Jay

Answer 5

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

मुझे 70 वर्षों की सीमा की आवश्यकता थी, जो कि 100 जितनी नहीं है, फिर भी आगंतुक को स्क्रॉल करने के लिए अभी भी कई वर्ष हैं। (jQuery समूहों में वर्ष के माध्यम से कदम बढ़ाता है, लेकिन यह ज्यादातर लोगों के लिए patootie में एक दर्द है।)

पहला कदम तारीख के विजेट के लिए जावास्क्रिप्ट को संशोधित करना था: 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; }

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

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

Answer 6

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

तब मुझे पता चला कि वे इसे बहुत ही उपयोगी ऑन-द-फ्लाई टूल प्रदान करते हैं, जिससे आप अपनी पूरी डेटापिक को कॉन्फ़िगर कर सकते हैं और देख सकते हैं कि आपको किन सेटिंग्स का उपयोग करना है।

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

defaultViewDate

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

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

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

वर्तमान वर्ष के सापेक्ष 20 वर्ष पहले के वर्षों का चयन करने की दृष्टि से आप जिस तारीख को शुरू करेंगे, उसे खोलते समय।