JQuery कैलेंडर (दिनांक पिकर)। JQuery यूआई एपीआई - डेटपिकर विजेट कैलेंडर jquery यूआई डेटपिकर

प्रिय हेबर पाठकों, सभी को नमस्कार!

यह लेख jQuery UI और उसके दिनांक पिकर विजेट के बारे में है।

अक्सर ऐसा होता है कि किसी पृष्ठ पर आपको दिनांक अवधि (और कभी-कभी कई अलग-अलग तिथियां भी) चुनने की आवश्यकता होती है। लेकिन jQuery UI का डेटपिकर आपको एक कैलेंडर के भीतर केवल एक तारीख चुनने की अनुमति देता है।

इसलिए, व्यवहार में एक सामान्य समाधान "से और तक" प्रकार के नियंत्रण के साथ दो इनपुट फ़ील्ड बनाना है। आप इस समस्या को हल करने के लिए कई "बैसाखी" तरीके भी पा सकते हैं - यह हमें शोभा नहीं देता।

इसलिए, हमारा लक्ष्य केवल jQuery UI Datepicker का उपयोग करके न्यूनतम प्रयास के साथ समस्या को हल करना है।

इस समस्या को हल करने के लिए, jQuery UI Datepicker के लिए एक छोटा सा एक्सटेंशन है, जो तृतीय-पक्ष विजेट, प्लगइन्स और शैलियों को कनेक्ट किए बिना इसकी मानक क्षमताओं को बढ़ाता है।

उन लोगों के लिए जो मानक $.datepicker() विजेट का उपयोग करने में रुचि नहीं रखते हैं, मैंने कुछ लिंक तैयार किए हैं, मुझे आशा है कि आप भी उन्हें उपयोगी पाएंगे:

हैबे पर लेख (कई तिथियों का चयन, एक अवधि का चयन)।
- XDSoft से उत्कृष्ट DateTimePicker प्लगइन (दिनांक अवधि चयन, समय चयन और अन्य विभिन्न सुविधाएं), देखने लायक

अन्य समाधान भी हैं, लेकिन मैं उन पर ध्यान नहीं दूंगा। यदि आपके पास अपना पसंदीदा तिथि चयन कैलेंडर है, तो मुझे लेख की टिप्पणियों में उनके बारे में पढ़कर खुशी होगी।

एक्सटेंशन विवरण एक एक्सटेंशन एक फ़ाइल है जो अपने ऑब्जेक्ट मॉडल का उपयोग करके $.datepicker() विजेट की क्षमताओं को बढ़ाती है। डिफ़ॉल्ट मोड में डेटपिकर की कार्यक्षमता को प्रभावित नहीं करता है। इसलिए आपको अपने (पहले से लिखे हुए) कोड के रुकने या अलग तरीके से काम करने के बारे में चिंता करने की ज़रूरत नहीं है।

एक्सटेंशन आपको दिनांक चयन व्यवहार को दो मोड में बदलने की अनुमति देता है:

• एक अवधि चुनें (दो तिथियाँ: अवधि की शुरुआत और समाप्ति)
• एकाधिक तिथियों का चयन करें (तिथियों की श्रृंखला)

चूंकि एक्सटेंशन का उपयोग कई तिथियों का चयन करने के लिए करने की योजना है, मैं इसे DIV तत्व (INPUT नहीं) पर लागू करने की सलाह देता हूं, और तिथियों का चयन करते समय, इनपुट फ़ील्ड में उचित मान भरें (अंत में उदाहरण देखें) लेख)। नए विजेट में नए $.datepicker पैरामीटर () शामिल हैं।

$("#date_range").datepicker(( रेंज: "पीरियड", // संभावित मान: अवधि, एकाधिक रेंज_मल्टीपल_मैक्स: 3, // "मल्टीपल डेट्स" मोड में चयनित तिथियों की अधिकतम संख्या onSelect: function(dateText, inst , एक्सटेंशनरेंज ) ( // एक्सटेंशनरेंज - जोड़ा गया रिटर्न तर्क, इसमें एक एक्सटेंशन ऑब्जेक्ट शामिल है ) )); // "सेटडेट" विधि अब एक सरणी स्वीकार कर सकती है: रेंज = "अवधि" के साथ 2 तत्व या रेंज = "मल्टीपल" के साथ अधिक तत्व // $("#date_range").datepicker("setDate", ["+2d ", "+1w"]); // फॉर्म फ़ील्ड (या आपकी स्क्रिप्ट में चर) के मान को बदलने के लिए "ऑनसेलेक्ट" ईवेंट का उपयोग करने की अनुशंसा की जाती है // हालांकि, अधिक लचीले नियंत्रण के लिए, आप एक एक्सटेंशन ऑब्जेक्ट प्राप्त कर सकते हैं और चयनित के बारे में जानकारी के साथ काम कर सकते हैं दिनांक var एक्सटेंशनरेंज = $("#date_range").datepicker ("विजेट").डेटा("datepickerExtensionRange"); कंसोल.लॉग(एक्सटेंशनरेंज.डेट्सटेक्स्ट); // दिनांकों की सारणी (डेटपिकर में प्रयुक्त प्रारूप में दिनांक) कंसोल.लॉग(एक्सटेंशनरेंज.स्टार्टडेटटेक्स्ट); // अवधि की शुरुआत (डेटपिकर में प्रयुक्त प्रारूप में तारीख) कंसोल.लॉग(एक्सटेंशनरेंज.एंडडेटटेक्स्ट); // अवधि का अंत (डेटपिकर में प्रयुक्त प्रारूप में तारीख) कंसोल.लॉग(एक्सटेंशनरेंज.डेट्स); // तिथियों की सारणी (दिनांक वस्तु) कंसोल.लॉग(एक्सटेंशनरेंज.स्टार्टडेट); // अवधि की शुरुआत (दिनांक ऑब्जेक्ट) कंसोल.लॉग (एक्सटेंशनरेंज.एंडडेट); // अवधि का अंत (तिथि वस्तु)
कैलेंडर सेल के लिए नई शैलियाँ

चयनित() /* चयनित तिथि */ .चयनित-प्रारंभ() /* अवधि की पहली तिथि */ .चयनित-अंत() /* अवधि की अंतिम तिथि */ .माह का पहला() /* प्रथम महीने की तारीख */ .अंतिम-माह() /* महीने की आखिरी तारीख */

एक पाठ में हमने सीखा कि jQuery UI लाइब्रेरी को विभिन्न तरीकों से कैसे जोड़ा जाए। आज पाठ का विषय दिनांक पिकर विजेट - jQuery UI डेटापिकर होगा।

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

इस पते पर: https://jqueryui.com/datepicker/आपको डेटापिकर विजेट के लिए कई विकल्प दिखाई देंगे, हम केवल दो मुख्य विकल्प देखेंगे।

jQuery यूआई डेटपिकर - माह और वर्ष मेनू प्रदर्शित करें

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

HTML कोड में एक एकल इनपुट टैग होता है जिसमें पहचानकर्ता "डेटापिकर" एक पैराग्राफ में लपेटा जाता है - पी टैग। पैराग्राफ के बजाय, इस इनपुट को साइट के किसी भी ब्लॉक तत्व में रखा जा सकता है।

तारीख:

उदाहरण के अनुसार, jQuery कोड को कॉपी किया जाना चाहिए (स्रोत देखें) और आपकी साइट पर पेस्ट किया जाना चाहिए। DOM ट्री लोड करने के बाद, हम टेक्स्ट फ़ील्ड में आईडी #डेटापिकर द्वारा तत्व प्राप्त करेंगे और .datepicker विधि को कॉल करेंगे। अब आपको अतिरिक्त सेटिंग्स का वर्णन करने के लिए एक ऑब्जेक्ट को उस विधि में पास करने की आवश्यकता है: परिवर्तनमाह: सत्य, परिवर्तनवर्ष: सत्य। अब ड्रॉप-डाउन सूची के माध्यम से महीने और वर्ष का चयन करना संभव है; यह कैलेंडर के माध्यम से समान विकल्प चुनने की तुलना में थोड़ा अधिक सुविधाजनक है।

$(फ़ंक्शन() (
$("#datepicker").datepicker((
परिवर्तनमाह: सत्य,
परिवर्तनवर्ष: सत्य
});
});

jQuery यूआई डेटपिकर - एक तिथि सीमा चुनें

दिनांक सीमा चयन दिनांक सीमा वाला डेटापिकर विजेट बुकिंग प्रणाली वाली साइटों के लिए उपयुक्त है। उपयोगकर्ता पहले कैलेंडर में प्रारंभ तिथि और दूसरे कैलेंडर में अंतिम तिथि निर्दिष्ट करता है। आइए "से" और "से" पहचानकर्ताओं के साथ दो इनपुट टेक्स्ट फ़ील्ड बनाएं और उनके टेक्स्ट फ़ील्ड से जुड़े दो लेबल बनाएं।

से

को

हमें पहचानकर्ता #from के साथ एक तत्व मिलता है - पहला टेक्स्ट फ़ील्ड, और इसमें डेटापिकर विधि को कॉल करें।

$(फ़ंक्शन() (
var dateFormat = "mm/dd/yy",
से = $("#से")
।खजूर बीनने वाला((

आइए डिफ़ॉल्ट तिथि प्लस एक सप्ताह निर्धारित करें।

डिफ़ॉल्ट दिनांक: "+1w",

ड्रॉप-डाउन सूची का उपयोग करके महीना बदलने की क्षमता।

परिवर्तन माह: सत्य,
महीनों की संख्या: 3 ))

जब ऑन इवेंट होता है, यानी, उपयोगकर्ता ड्रॉप-डाउन सूची से कुछ चुनता है, तो जब चयनित तिथि बदलती है, तो हम दूसरा डेटपिकर ढूंढते हैं और चयनित तिथि के बराबर न्यूनतम तिथि निर्धारित करते हैं।

चालू("परिवर्तन", फ़ंक्शन() (
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to").datepicker

चयनित तिथि बदलते समय, हम पहला डेटपिकर ढूंढते हैं और चयनित तिथि के बराबर अधिकतम तिथि निर्धारित करते हैं।

चालू("परिवर्तन", फ़ंक्शन() (
from.datepicker("option", "maxDate", getDate(this));
});

jQuery डेटापिकर विजेट के विभिन्न मापदंडों के साथ सभी विकल्पों के सभी कोड और दृश्य उदाहरण वेबसाइट पर हैं jqueryui.com.

jQuery यूआई डेटपिकर - कैलेंडर का स्थानीयकरण करें

डिफ़ॉल्ट रूप से, कैलेंडर अंग्रेजी में प्रदर्शित होता है, लेकिन इसे बदला जा सकता है; jQuery UI लाइब्रेरी बहु-भाषाओं का समर्थन करती है;

Github पर आवश्यक भाषा फ़ाइल डाउनलोड करें

हम हेड टैग में आवश्यक भाषा मॉड्यूल शामिल करते हैं।

हम कैलेंडर के लिए एक टेक्स्ट फ़ील्ड और आवश्यक भाषाओं को सूचीबद्ध करने वाली आईडी "लोकेल" के साथ एक ड्रॉप-डाउन सूची बनाते हैं।

तारीख:

अंग्रेज़ी
रूसी (रूसी)

DOM ट्री लोड करने के बाद, डेटापिकर ऑब्जेक्ट देखें। हम सभी डेटपिकर्स के लिए सेटिंग्स बदलते हैं।

$(फ़ंक्शन() (
$("#datepicker").datepicker($.datepicker.regional[ "ru" ]);

"डेटपिकर" के लिए स्थानीयकरण में परिवर्तन।

$("#locale").on("change", function() (

ड्रॉप-डाउन सूची में नया मान चुनते समय स्थानीयकरण बदलें।

$("#datepicker").datepicker("option",
$.datepicker.regional[ $(this).val() ]);

डेटपिकर विजेट

यह आलेख डेटपिकर विजेट के बारे में है - एक सुविधाजनक इंटरैक्टिव कैलेंडर जो तिथियां दर्ज करना आसान बनाता है। उपयोगकर्ताओं से पाठ के रूप में कैलेंडर जानकारी प्राप्त करना हमेशा एक चुनौती होती है क्योंकि तिथियों को व्यक्त करने के लिए कई अलग-अलग प्रारूप होते हैं। डेटपिकर विजेट किसी तारीख का चयन करना और उसे सुसंगत तरीके से प्रस्तुत करना आसान बनाता है, जिससे त्रुटियों की संभावना कम हो जाती है।

डेटपिकर विजेट बनाना

डेटपिकर विजेट बनाने के दो मुख्य तरीके हैं। इसे किसी इनपुट तत्व से जोड़ने का सबसे आम तरीका डेटपिकर() विधि का उपयोग करना है। यह तत्व की उपस्थिति को तुरंत नहीं बदलता है, लेकिन जैसे ही तत्व इनपुट फोकस प्राप्त करता है (उस पर क्लिक करके या कुंजी का उपयोग करके अन्य तत्वों से नेविगेट करके), उसके बगल में एक कैलेंडर प्रदर्शित किया जाएगा, जिसके साथ आप कर सकते हैं इच्छित तिथि चुनें.

वर्णित प्रकार के कैलेंडर कहलाते हैं पॉप-अप कैलेंडर. ऐसे कैलेंडर बनाने का एक उदाहरण नीचे दिया गया है:

jQuery यूआई इनपुट (चौड़ाई: 200px; पाठ-संरेखण: बाएँ) $(function() ( $("#datep").datepicker(); )); की तारीख:

चित्र दिखाता है कि जब आप फ़ोकस को किसी इनपुट फ़ील्ड पर ले जाते हैं तो क्या होता है:

उपयोगकर्ता या तो मैन्युअल रूप से तारीख दर्ज कर सकता है या कैलेंडर का उपयोग करके इसका चयन कर सकता है। एक बार जब इनपुट तत्व फोकस खो देता है या उपयोगकर्ता (या) कुंजी दबाता है, तो कैलेंडर गायब हो जाएगा।

डेटपिकर विजेट का स्थानीयकरण

जैसा कि आप देख सकते हैं, दिखाए गए उदाहरण में, कैलेंडर अंग्रेजी में प्रदर्शित होता है। jQuery यूआई डेटपिकर विजेट 61 स्थानीयकरण विकल्पों सहित दुनिया भर में उपयोग किए जाने वाले विभिन्न दिनांक स्वरूपण मानकों के लिए काफी व्यापक समर्थन प्रदान करता है। उन तक पहुंचने के लिए, आपको अपने दस्तावेज़ में एक जावास्क्रिप्ट सहायक स्क्रिप्ट आयात करनी होगी और डेटपिकर विजेट को बताना होगा कि किस स्थानीयकरण विकल्प का उपयोग करना है। एक संगत उदाहरण नीचे दिया गया है:

... ... $(function() ($("#datep").datepicker($.datepicker.regional["ru"]); )); ...

Jquery-ui-i18n.js फ़ाइल jQuery UI लाइब्रेरी संग्रह फ़ाइल के development-bundle/ui/i18n फ़ोल्डर में स्थित है, जिसे आपको jqueryui.com से डाउनलोड करना चाहिए था। इसे उसी फ़ोल्डर में कॉपी करें जहां स्रोत फ़ाइल स्थित है और इसे दस्तावेज़ में जोड़ें जैसा कि कोड में दिखाया गया है। परिणाम चित्र में दिखाया गया है:

एक अंतर्निर्मित डेटपिकर कैलेंडर बनाना

डेटपिकर विजेट का उपयोग करने के दूसरे तरीके में इसे दस्तावेज़ में एम्बेड करना शामिल है। ऐसा करने के लिए, jQuery का उपयोग करके एक div या स्पैन तत्व का चयन करें और datepicker() विधि को कॉल करें। अंतर्निर्मित कैलेंडर तब तक प्रदर्शित होता है जब तक HTML तत्व जिस पर वह आधारित है, दिखाई देता है। अंतर्निर्मित कैलेंडर बनाने का एक उदाहरण नीचे दिया गया है:

jQuery यूआई लेबल (मार्जिन-दाएं:12px; ) इनपुट (चौड़ाई: 200px; टेक्स्ट-संरेखण: बाएँ; मार्जिन-दाएँ: 10px) #wrapper > * (फ्लोट: बाएँ) $(फ़ंक्शन() ( $("#inline" .datepicker($.datepicker.regional["ru"] )); की तारीख:

यह उदाहरण डेटपिकर विजेट बनाने के लिए आधार HTML तत्व के रूप में एक स्पैन तत्व का उपयोग करता है। परिणाम चित्र में दिखाया गया है:

यदि आप पॉप-अप ऑब्जेक्ट के साथ काम नहीं करना चाहते हैं तो अंतर्निर्मित कैलेंडर उपयोगी हो सकता है। बेशक, ऐसे अनुप्रयोग हैं जिनमें तारीखों के साथ काम करना इतना गहन है कि हमेशा हाथ में एक कैलेंडर रखना समझ में आता है। लेकिन ज्यादातर मामलों में, कैलेंडर को तब तक छिपाए रखना ही समझदारी है जब तक आपको इसकी आवश्यकता न हो।

एम्बेडेड डेटपिकर विजेट को छिपाने और दिखाने में कठिनाई यह है कि इसे किसी दस्तावेज़ में जोड़ने के लिए पेज लेआउट को बदलने की आवश्यकता होती है, जिससे प्रस्तुति संबंधी समस्याएं हो सकती हैं। मेरे दृष्टिकोण से, अधिकांश स्थितियों में पॉप-अप विजेट का उपयोग करना अधिक सुविधाजनक होता है।

डेटपिकर विजेट सेट करना

यदि आपने पहले दिनांक प्रसंस्करण से निपटा है, तो आप अच्छी तरह से जानते हैं कि इस श्रेणी के डेटा के साथ काम करना कितना कठिन है। इस जटिलता का प्रतिबिंब डेटपिकर विजेट द्वारा समर्थित गुणों की विविधता है। निम्नलिखित अनुभाग संबंधित गुणों के समूहों के विवरण के लिए समर्पित हैं जिनके साथ यह विजेट कॉन्फ़िगर किया गया है।

मूल सेटिंग्स

पॉप-अप और एम्बेडेड कैलेंडर के मूल गुणों को कॉन्फ़िगर करने के लिए कई कॉन्फ़िगरेशन विकल्पों का उपयोग किया जाता है। ये गुण बहुत महत्वपूर्ण हैं क्योंकि वे आपको यह नियंत्रित करने की अनुमति देते हैं कि विजेट को दस्तावेज़ में कैसे एकीकृत किया जाए। उनकी सूची नीचे दी गई तालिका में दी गई है:

डेटपिकर विजेट के मूल गुण संपत्ति विवरण

altField	आपको एक अतिरिक्त फ़ील्ड निर्दिष्ट करने की अनुमति देता है जिसे कैलेंडर में दिनांक चुनने पर अपडेट किया जाएगा
केवल बटन छवि	निर्दिष्ट करता है कि कैलेंडर खोलने के लिए द्वितीयक बटन के बजाय बटनइमेज विकल्प द्वारा निर्दिष्ट छवि का उपयोग किया जाना चाहिए।
बटनछवि	पॉपअप कैलेंडर ओपन सेकेंडरी बटन के लिए उपयोग की गई छवि के यूआरएल को परिभाषित करता है। डिफ़ॉल्ट रूप से उपयोग नहीं किया जाता
टेक्स्ट बटन	उस पाठ को परिभाषित करता है जो पॉप-अप कैलेंडर के खुले बटन पर प्रदर्शित होगा। डिफ़ॉल्ट पाठ एक दीर्घवृत्त है (...)
डिफ़ॉल्ट दिनांक	आपको वह तिथि निर्धारित करने की अनुमति देता है जो कैलेंडर खोलने पर हाइलाइट की जाएगी
अक्षम	इंगित करता है कि क्या विजेट को प्रारंभ में अक्षम किया जाना चाहिए। डिफ़ॉल्ट मान गलत है
इस समय दिखाएं	उस क्रिया को परिभाषित करता है जो पॉप-अप कैलेंडर के खुलने को ट्रिगर करती है। डिफ़ॉल्ट मान फोकस है

डिफ़ॉल्ट तिथि निर्दिष्ट करना

सबसे सरल सेटिंग भी सबसे उपयोगी है. डिफॉल्टडेट विकल्प का उपयोग करके, आप एक तारीख निर्दिष्ट कर सकते हैं जो कैलेंडर खोलने पर स्वचालित रूप से हाइलाइट हो जाएगी।

यदि डिफ़ॉल्ट दिनांक विकल्प सेट नहीं है, तो इसके बजाय वर्तमान दिनांक का उपयोग किया जाता है। (बेशक, यह उपयोगकर्ता के सिस्टम पर निर्धारित तिथि को संदर्भित करता है। समय क्षेत्र, डेलाइट सेविंग टाइम, या गलत कॉन्फ़िगरेशन के कारण उपयोगकर्ता को प्रदर्शित तिथि वह नहीं हो सकती जिसकी आप अपेक्षा करते हैं।)

इस विकल्प का उपयोग केवल तभी किया जाता है जब इनपुट तत्व में कोई मान विशेषता न हो। यदि यह विशेषता मौजूद है (चाहे यह आपके द्वारा दस्तावेज़ में शामिल किया गया हो या उपयोगकर्ता द्वारा पूर्व-चयन का परिणाम हो), तो डेटपिकर विजेट इसके मूल्य का उपयोग करेगा।

यदि आप चाहते हैं कि कैलेंडर किसी भिन्न प्रारंभ तिथि के साथ खुले, तो आप इसे नीचे दी गई तालिका में वर्णित विधियों में से किसी एक का उपयोग करके सेट कर सकते हैं:

डिफॉल्टडेट विकल्प के लिए संभावित मान मूल्य विवरण

व्यर्थ	वर्तमान दिनांक का उपयोग किया जाता है
दिनांक वस्तु	जावास्क्रिप्ट दिनांक ऑब्जेक्ट के रूप में दर्शाए गए मान का उपयोग करता है
+दिन, -दिन	ऐसी तिथि का उपयोग करता है जो वर्तमान तिथि से निर्दिष्ट दिनों की संख्या से भिन्न होती है। तो, +3 का अर्थ है वह तारीख जो वर्तमान तारीख के तीन दिन बाद आएगी, और -2 का मतलब है दो दिन पहले की तारीख
+1दिन +7डब्ल्यू -1एम +1वर्ष	एक तारीख का उपयोग किया जाता है जिसे वर्तमान तारीख से मापा जाता है और दिनों (डी), सप्ताह (डब्ल्यू), महीनों (एम) और वर्षों (वाई) की संख्या के संदर्भ में व्यक्त किया जाता है जो यह निर्धारित करता है कि तारीख कितनी आगे बढ़ गई है (+) या समय में पीछे (-)। इसे एक तिथि में सकारात्मक और नकारात्मक मूल्यों को मिलाने की अनुमति है। उदाहरण के लिए, 12 नवंबर, 2011 की तारीख के साथ संयोजन में उपयोग किया जाने वाला मान -1d +1m का संयोजन, 11 दिसंबर, 2011 से मेल खाता है

अब से पाँच वर्ष बाद की तारीख निर्दिष्ट करने के लिए defauitDate विकल्प का उपयोग करने का एक उदाहरण नीचे दिया गया है:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( defaultDate: "+5y" )); ));

आइए मान लें कि वर्तमान तारीख दिसंबर 2013 है। फिर, जैसा कि नीचे दिए गए चित्र में दिखाया गया है, defauitDate विकल्प के मूल्य द्वारा निर्धारित तिथि दिसंबर 2018 से मेल खाती है:

आपको सापेक्ष तिथियों को एक से अधिक बार इंगित करने के लिए वर्णित प्रारूप का सामना करना पड़ेगा। यह एक बहुत ही लचीला प्रारूप है जो आवश्यक सटीकता प्रदान करता है। उदाहरण की तरह ही, आप किसी भी अंतराल को छोड़ सकते हैं जिसे आप बदलने का इरादा नहीं रखते हैं। उदाहरण के लिए, "+0d +0w +0m +5y" मान के बजाय "+5y" मान का उपयोग करना काफी संभव है। इस प्रारूप के बारे में अच्छी बात यह है कि यह आपको विभिन्न अंतरालों के लिए सकारात्मक और नकारात्मक मूल्यों को मिलाने की अनुमति देता है, जिससे आप वांछित तिथि को सटीक रूप से निर्धारित कर सकते हैं।

एक ऐसी घटना को परिभाषित करना जो पॉप-अप कैलेंडर के खुलने को ट्रिगर करता है

शोऑन विकल्प आपको उस ईवेंट को नियंत्रित करने की अनुमति देता है जिसके जवाब में पॉप-अप कैलेंडर प्रदर्शित किया जाना चाहिए। यह विकल्प तीन मानों में से एक ले सकता है:

केंद्र

जब इनपुट तत्व फोकस प्राप्त करता है तो पॉपअप कैलेंडर खुल जाता है। यह व्यतिक्रम मूल्य है।

बटन

बटन पर क्लिक करते ही पॉप-अप कैलेंडर खुल जाता है।

दोनों

पॉपअप कैलेंडर तब दिखाई देता है जब बटन क्लिक किया जाता है और जब इनपुट तत्व फोकस प्राप्त करता है।

यदि आप बटन या दोनों मानों का उपयोग करते हैं, तो डेटपिकर विजेट एक बटन तत्व बनाता है और इसे इनपुट तत्व के तुरंत बाद दस्तावेज़ में रखता है। शोऑन विकल्प का उपयोग करने का एक उदाहरण नीचे दिया गया है:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "दोनों" )); ));

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

डेटपिकर विजेट द्वारा जोड़ा गया बटन jQuery UI बटन विजेट नहीं है। यदि आप चाहते हैं कि सभी बटन एक ही प्रकार के हों, तो एक बटन तत्व चुनें और jQuery UI बटन() विधि को कॉल करें।

बटन तत्व को बटन इमेज और बटन टेक्स्ट विकल्पों का उपयोग करके स्टाइल किया जा सकता है। यदि आप किसी छवि के URL पर बटनइमेज विकल्प सेट करते हैं, तो डेटपिकर विजेट उस छवि को बटन पर रखेगा। इसके अतिरिक्त, बटन (एलिप्सिस) से जुड़े डिफ़ॉल्ट टेक्स्ट को बटनटेक्स्ट विकल्प का उपयोग करके अन्य टेक्स्ट से बदला जा सकता है, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "दोनों", बटन टेक्स्ट: "Select" )); ) );

बटनइमेज और बटनइमेजओनली विकल्पों का एक साथ उपयोग करके, आप बटन से पूरी तरह छुटकारा पा सकते हैं, इसे एक छवि से बदल सकते हैं। एक संगत उदाहरण नीचे दिया गया है:

jQuery यूआई लेबल (मार्जिन-दाएं:12px) इनपुट (चौड़ाई: 200px; टेक्स्ट-संरेखण: बाएं) #dpcontainer * (ऊर्ध्वाधर-संरेखण: मध्य) #dpcontainer img (चौड़ाई: 35px;) $(फ़ंक्शन() ( $.datepicker .setDefaults($.datepicker.regional["ru"]); की तारीख:

यह उदाहरण छवि को राइट.पीएनजी पर सेट करता है और बटनइमेजओनली विकल्प को सत्य पर सेट करता है। इसके अलावा, लेबल और इनपुट तत्वों के सापेक्ष छवि के स्थान को नियंत्रित करने के लिए दस्तावेज़ में कई सीएसएस शैलियाँ जोड़ी गई हैं। डेटपिकर विजेट यह पता नहीं लगा सकता कि आईएमजी तत्व को कहां रखा जाए, इसलिए दस्तावेज़ में आईएमजी तत्व को सही ढंग से रखने के लिए सीएसएस शैलियों को लागू करना पड़ा। बटन के बजाय छवि का उपयोग करने का परिणाम चित्र में दिखाया गया है:

दिनांक चयन नियंत्रण

डेटपिकर विजेट का उद्देश्य उपयोगकर्ता को एक तारीख चुनने की अनुमति देना है, लेकिन कई मामलों में इस प्रक्रिया पर कुछ प्रतिबंध लगाने की आवश्यकता होती है। नीचे दी गई तालिका उन सेटिंग्स का वर्णन करती है जो आपको प्रतिबंध सेट करने की अनुमति देती है जो उपयोगकर्ता को केवल वैध तिथियों का चयन करने के लिए मजबूर करती है:

डेटपिकर विजेट गुण जो दिनांक चयन पर नियंत्रण प्रदान करते हैं संपत्ति विवरण

परिवर्तनमाह	यदि यह विकल्प सत्य है, तो कैलेंडर एक ड्रॉप-डाउन सूची प्रदर्शित करता है जो आपको महीने के अनुसार सीधे नेविगेट करने की अनुमति देता है। डिफ़ॉल्ट मान गलत है
परिवर्तनवर्ष	यदि यह विकल्प सत्य है, तो कैलेंडर एक ड्रॉप-डाउन सूची प्रदर्शित करता है जो आपको वर्ष के अनुसार सीधे नेविगेट करने की अनुमति देता है। डिफ़ॉल्ट मान गलत है
बाधाइनपुट	यदि यह विकल्प सत्य है, तो डेटपिकर विजेट जाँचता है कि इनपुट फ़ील्ड की सामग्री निर्दिष्ट दिनांक प्रारूप से मेल खाती है। डिफ़ॉल्ट मान सत्य है
HideIfNoPrevNext	यदि यह विकल्प सत्य है, तो वे आइकन जो आपको प्रदर्शित तिथि के सापेक्ष कैलेंडर पर आगे और पीछे जाने की अनुमति देते हैं, केवल अक्षम होने के बजाय पूरी तरह से छिपे हुए हैं। डिफ़ॉल्ट मान गलत है
अधिकतम तिथि	चयन के लिए उपलब्ध अधिकतम तिथि को परिभाषित करता है। डिफ़ॉल्ट रूप से कोई प्रतिबंध नहीं है
मिनटतिथि	चयन के लिए उपलब्ध न्यूनतम तिथि को परिभाषित करता है। डिफ़ॉल्ट रूप से कोई प्रतिबंध नहीं है
महीनों की संख्या	कैलेंडर में एक साथ प्रदर्शित होने वाले महीनों की संख्या निर्धारित करता है। डिफ़ॉल्ट मान 1 है
showCurrentAtPos	यदि कैलेंडर एक साथ कई महीनों को प्रदर्शित करने के लिए सेट है, तो यह विकल्प उस स्थिति संख्या को निर्दिष्ट करता है जिसमें वर्तमान या डिफ़ॉल्ट माह प्रदर्शित किया जाना चाहिए। डिफ़ॉल्ट मान 0 है
सौतेला महीना	यह निर्धारित करता है कि जब आप आगे या पीछे समय बटन पर क्लिक करते हैं तो कैलेंडर पर प्रदर्शित तारीख को कितने महीने आगे या पीछे किया जाना चाहिए
वर्ष सीमा	परिवर्तन वर्ष विकल्प का उपयोग करके जोड़ी गई ड्रॉप-डाउन सूची में चयन के लिए उपलब्ध वर्षों की सीमा को परिभाषित करता है। डिफ़ॉल्ट रूप से, इस सूची में पिछले दस वर्ष, अगले दस वर्ष और वर्तमान वर्ष शामिल हैं।

चरित्र और तिथि सीमा प्रतिबंध

constrainInput विकल्प को सत्य पर सेट करके, आप टेक्स्ट फ़ील्ड में वर्ण इनपुट को केवल उन वर्णों तक सीमित कर सकते हैं जो कड़ाई से परिभाषित प्रारूप के अनुरूप हैं। वर्णों का अनुमत सेट ऊपर चर्चा की गई स्थानीयकरण सेटिंग्स द्वारा निर्धारित किया जाता है। यदि डेटपिकर विजेट को स्थानीयकृत नहीं किया गया है, तो आप उम्मीद कर सकते हैं कि अनुमत वर्णों में केवल संख्याएं और फॉरवर्ड स्लैश (/) वर्ण शामिल होंगे।

constrainInput विकल्प के लिए निर्दिष्ट मान का उपयोग करने का मतलब यह नहीं है कि उपयोगकर्ता 99/99/99 जैसी अमान्य तिथि दर्ज नहीं कर पाएगा, लेकिन यह त्रुटियों की संभावना को काफी कम कर देता है। यदि शोऑन विकल्प बटन पर सेट है तो यह सेटिंग और भी महत्वपूर्ण है, तब से इनपुट फ़ील्ड फोकस प्राप्त होने पर पॉपअप कैलेंडर स्वचालित रूप से नहीं खुलेगा।

उपयोगकर्ता आम तौर पर तारीख चुनने के लिए कैलेंडर का उपयोग करने के इच्छुक होते हैं, लेकिन ऐसा करने के लिए उन्हें इसे देखना होगा। यदि कैलेंडर स्क्रीन पर प्रदर्शित नहीं होता है, तो प्रत्येक उपयोगकर्ता को यह एहसास नहीं होगा कि कैलेंडर खोलने के लिए एक बटन पर क्लिक करना ही पर्याप्त है। आप उपयोगकर्ता को टेक्स्ट फ़ील्ड में सीधे तारीख दर्ज करने के लिए जो भी विकल्प देते हैं, उससे यह संभावना बढ़ जाती है कि उनके द्वारा दर्ज की गई तारीख का प्रारूप गलत होगा। constrainInput विकल्प का उपयोग करने का एक उदाहरण नीचे दिया गया है:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( constrainInput: true, minDate: "-3", maxDate: "+ 1" )); ));

यहां, सत्य का मान केवल स्पष्टता के लिए constrainInput विकल्प को सौंपा गया है, क्योंकि यह इस विकल्प के लिए डिफ़ॉल्ट मान है। शेष दो विकल्प आपको चयन के लिए उपलब्ध तिथियों की सीमा को न्यूनतम और अधिकतम तिथि तक सीमित करने की अनुमति देते हैं।

जैसा कि पहले चर्चा की गई डिफॉल्टडेट विकल्प के साथ, मिनीडेट और मैक्सडेट विकल्पों के लिए मान शून्य (एक अपरिभाषित तिथि), एक जावास्क्रिप्ट दिनांक ऑब्जेक्ट, कई दिन और एक सापेक्ष दिनांक स्ट्रिंग हो सकते हैं। इस उदाहरण में, वर्तमान तिथि के सापेक्ष दिनों की संख्या को इंगित करने के लिए संख्यात्मक प्रतिनिधित्व का चयन किया जाता है।

चित्र में आप देख सकते हैं कि डेटपिकर उन कैलेंडर कोशिकाओं को अक्षम कर देता है जो चयन योग्य नहीं हैं:

कृपया ध्यान दें कि यदि आवश्यकता नहीं है तो महीने के बटन स्वचालित रूप से अक्षम हो जाते हैं। ये बटन कैलेंडर के ऊपर बाईं और दाईं ओर स्थित हैं और आपको तुरंत अगले या पिछले महीने पर जाने की अनुमति देते हैं। जैसा कि चित्र में दिखाया गया है, सभी चयन योग्य तिथियां चालू माह में हैं, और इसलिए दोनों बटन अक्षम हैं। ऐसी स्थितियों में, यदि आवश्यक हो तोhidIfNoPrevNext विकल्प को सत्य पर सेट करके इन बटनों को पूरी तरह छुपाया जा सकता है।

minDate मान का अतीत में होना और maxDate मान का भविष्य में होना ज़रूरी नहीं है, न ही एक ही समय में दोनों मान होना ज़रूरी है। उपयोगकर्ता को किसी "प्रारंभिक" अवधि से पहले की सीमा से तारीखों का चयन करने की अनुमति देने के लिए, आप भविष्य में एक मान के लिए minDate विकल्प सेट कर सकते हैं, जिससे उपयोगकर्ता को उस अवधि के भीतर तारीखों का चयन करने से रोका जा सकता है, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( minDate: "+4" )); ))

इस उदाहरण में, हमने निर्दिष्ट किया है कि उपयोगकर्ता वर्तमान तिथि के 4 दिन बाद से पहले की तिथियों का चयन करने में सक्षम नहीं होना चाहिए। मैक्सडेट विकल्प अपरिभाषित है, जिसका अर्थ है कि उपयोगकर्ता निर्दिष्ट "विलंब अवधि" के बाद किसी भी तारीख का चयन करने में सक्षम होगा। परिणाम चित्र में दिखाया गया है:

ध्यान दें कि इस स्थिति में अगले महीने का बटन सक्षम है, जबकि पिछले महीने का बटन अक्षम है (उपयोगकर्ता के चयन के लिए पिछली तारीखों की कमी के कारण)।

minDate और maxDate विकल्प defaultDate विकल्प के साथ मिलकर काम करते हैं, जिसका अर्थ है कि वर्तमान तिथि के लिए सीमाओं को बांधना वैकल्पिक है।

एक कैलेंडर बनाएं जो एक साथ कई महीने प्रदर्शित करता हो

डेटपिकर विजेट आपको numberOfMonths विकल्प का उपयोग करके उन महीनों की संख्या निर्धारित करने की अनुमति देता है जिन्हें कैलेंडर में एक साथ प्रदर्शित किया जाना चाहिए। यह या तो महीनों की आवश्यक संख्या निर्दिष्ट करके, या मासिक कैलेंडर ग्रिड के आयामों को परिभाषित करने वाले दो तत्वों की एक श्रृंखला निर्दिष्ट करके किया जा सकता है।

नीचे दिया गया उदाहरण एक सरणी-आधारित दृष्टिकोण लागू करता है, जो मुझे अंतर्निहित डेटपिकर विजेट के लिए सबसे उपयुक्त लगता है, क्योंकि पॉपअप विजेट के लिए ग्रिड का आकार अक्सर बहुत बड़ा होता है (हम इस पर बाद में वापस आएंगे)।

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( numberOfMonths: )); ));

यह उदाहरण एक कैलेंडर ग्रिड निर्दिष्ट करता है जो एक महीने ऊंचा और तीन महीने चौड़ा है। परिणाम चित्र में दिखाया गया है:

दो तत्वों की एक सरणी संख्यात्मक मान 3 के बराबर है। यदि numberOfMonths विकल्प का मान एक संख्या के रूप में निर्दिष्ट किया गया है, तो विजेट एक पंक्ति में महीनों की संबंधित संख्या प्रदर्शित करता है।

पॉप-अप कैलेंडर के साथ काम करते समय मैं शायद ही कभी इस दृष्टिकोण का उपयोग करता हूं क्योंकि बड़े ग्रिड के साथ, आपको ब्राउज़र विंडो और डिस्प्ले आकार के बारे में कुछ धारणाएं बनानी पड़ती हैं। डेटपिकर पॉपअप विजेट विंडो एक ऑपरेटिंग सिस्टम डायलॉग बॉक्स नहीं है। यह एक चतुराई से स्टाइल किया गया HTML तत्व है जो HTML दस्तावेज़ के भाग के रूप में दिखाई देता है। इसका मतलब यह है कि जब बड़े कैलेंडर ग्रिड को छोटी स्क्रीन पर या छोटी ब्राउज़र विंडो में प्रदर्शित किया जाता है, तो दस्तावेज़ में मौजूद बाकी जानकारी का अधिकांश हिस्सा ऑफ-स्क्रीन दिखाई देगा।

महीनों और वर्षों तक सीधी पहुंच प्रदान करना

कैलेंडर हेडर में केवल महीनों और वर्षों को प्रदर्शित करने के बजाय, आप ड्रॉप-डाउन सूचियों का उपयोग करके प्रासंगिक समय अवधि तक सीधी पहुंच प्रदान कर सकते हैं। यह सुविधा तब गति प्रदान करती है जब उपयोगकर्ताओं को संभावित तिथियों की एक विस्तृत श्रृंखला से तिथियों का चयन करना होता है, और इसे चेंजमंथ और चेंजईयर विकल्पों का उपयोग करके कार्यान्वित किया जाता है।

इनमें से किसी भी विकल्प को सत्य पर सेट करने से संबंधित ड्रॉप-डाउन सूची सक्षम हो जाएगी, और आप स्वतंत्र रूप से नियंत्रित कर सकते हैं कि सूचियाँ सक्षम हैं या नहीं। इन विकल्पों के उपयोग का एक उदाहरण नीचे दिया गया है:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( परिवर्तनमहीना: सत्य, परिवर्तनवर्ष: सत्य, वर्षश्रेणी: "-1:+ 2" )); ));

इस परिदृश्य में, दोनों ड्रॉप-डाउन सूचियाँ सक्षम हैं। इसके अलावा, ईयररेंज विकल्प का उपयोग उन वर्षों की सीमा को सीमित करने के लिए किया जाता है जिनके बीच उपयोगकर्ता को संक्रमण की अनुमति होती है। आवश्यक सीमा "-1:+2" मान का उपयोग करके निर्दिष्ट की जाती है, जिसका अर्थ है कि कैलेंडर उपयोगकर्ता को चालू वर्ष से एक वर्ष पीछे और दो वर्ष आगे बढ़ने की अनुमति देता है।

ड्रॉप-डाउन सूचियाँ और निर्दिष्ट वर्ष सीमा चित्र में दिखाई गई है:

वर्ष सीमाएँ परिभाषित करते समय, आप वास्तविक वर्ष निर्दिष्ट करने के लिए वर्षसीमा विकल्प का उपयोग कर सकते हैं। इसलिए, इस उदाहरण में, आप मान निर्दिष्ट कर सकते हैं: "2012:2015"।

डेटपिकर विजेट की उपस्थिति को नियंत्रित करना

ऐसे कई गुण हैं जो आपको उपयोगकर्ता को प्रदर्शित होने पर डेटपिकर विजेट की उपस्थिति को अनुकूलित करने की अनुमति देते हैं। सामान्य तिथि-निर्धारण कार्यों के लिए, आप डिफ़ॉल्ट कैलेंडर स्वरूप से संतुष्ट हो सकते हैं जिससे आप पहले से ही पिछले उदाहरणों से परिचित हैं, लेकिन आपके विशिष्ट वेब एप्लिकेशन की आवश्यकताओं के अनुरूप स्वरूप को अनुकूलित करने की क्षमता बेहद उपयोगी है।

वे गुण जो आपको डेटपिकर विजेट का स्वरूप बदलने की अनुमति देते हैं, नीचे दी गई तालिका में दिखाए गए हैं:

गुण जो आपको डेटपिकर विजेट की उपस्थिति को नियंत्रित करने की अनुमति देते हैं संपत्ति विवरण

पाठ जोड़ें	अतिरिक्त जानकारी वाले टूलटिप टेक्स्ट को निर्दिष्ट करता है, जैसे दिनांक स्वरूपण का स्पष्टीकरण, जिसे इनपुट तत्व के बाद दस्तावेज़ में डाला जाएगा
पाठ बंद करें	बंद कैलेंडर बटन के लिए टेक्स्ट सेट करता है जो सक्षम होने पर सहायक बटन बार पर दिखाई देता है। डिफ़ॉल्ट मान "बंद करें" है
वर्तमानपाठ	चालू माह बटन पर वापस जाने के लिए टेक्स्ट सेट करता है जो सक्षम होने पर सहायक बटन बार पर दिखाई देता है। डिफ़ॉल्ट मान "आज" है
अवधि	showAnim विकल्प द्वारा निर्दिष्ट एनीमेशन की गति या अवधि निर्धारित करता है। डिफ़ॉल्ट मान सामान्य है
गोटूकरंट	यदि यह विकल्प सत्य है, तो हेल्पर बटन बार में पाया जाने वाला टुडे बटन, यदि सक्षम है, तो वर्तमान तिथि के बजाय चयनित तिथि पर वापस आ जाएगा। डिफ़ॉल्ट मान गलत है
अन्य महीने चुनें	यदि यह विकल्प सत्य है, तो showOtherMonths विकल्प को सत्य पर सेट करने के परिणामस्वरूप प्रदर्शित तिथियां चयन के लिए उपलब्ध हो जाती हैं।
शोएनिम	पॉप-अप कैलेंडर दिखाने और छिपाने के लिए उपयोग किए जाने वाले एनीमेशन का प्रकार निर्धारित करता है। डिफ़ॉल्ट मान गलत है
शोबटनपैनल	यदि यह विकल्प सत्य है, तो कैलेंडर बटनों के साथ एक सहायक पैनल प्रदर्शित करेगा जो उपयोगकर्ता को वर्तमान तिथि पर नेविगेट करने और (यदि पॉप-अप विजेट का उपयोग किया जाता है) कैलेंडर को बंद करने की अनुमति देता है। डिफ़ॉल्ट मान गलत है
विकल्प दिखाएं	showAnim विकल्प द्वारा निर्दिष्ट एनीमेशन विकल्प सेट करता है
अन्य महीने दिखाएं	यदि यह विकल्प सत्य है, तो कैलेंडर ग्रिड में खाली फ़ील्ड पिछले और बाद के महीनों की तारीखों से भर जाएंगे। डिफ़ॉल्ट मान गलत है
शोवीक	यदि यह विकल्प सत्य है, तो कैलेंडर सप्ताह संख्याओं वाला एक कॉलम प्रदर्शित करेगा। डिफ़ॉल्ट मान गलत है
सप्ताहशीर्षक	शोवीक विकल्प द्वारा सक्षम सप्ताह संख्याओं के साथ कैलेंडर कॉलम का शीर्षक निर्दिष्ट करता है। डिफ़ॉल्ट मान "बुध" है

सप्ताह प्रदर्शन

कुछ अनुप्रयोगों में, वर्ष में उस सप्ताह की संख्या जानना महत्वपूर्ण है जिस दिन कोई विशेष तारीख आती है। उदाहरण के लिए, कई लेखांकन कार्यक्रमों में इसकी आवश्यकता होती है। डेटपिकर विजेट में, आप शोवीक और वीकहेडर विकल्पों का उपयोग करके सप्ताह की जानकारी के प्रदर्शन को नियंत्रित करते हैं, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showWeek: true, WeekHeader: "Week No." )); ) ) ;

यदि शोवीक विकल्प सत्य है, तो कैलेंडर में सप्ताह संख्याओं वाला एक कॉलम प्रदर्शित होता है। इस कॉलम के लिए डिफ़ॉल्ट हेडर "सप्ताह" है, लेकिन इसे वीकहेडर विकल्प का उपयोग करके बदला जा सकता है। उदाहरण सप्ताह कॉलम दिखाता है, जिसका नाम बदलकर "सप्ताह #" कर दिया गया है:

रिक्त कैलेंडर कक्षों को आसन्न महीनों की तारीखों से भरना

डिफ़ॉल्ट रूप से, कैलेंडर केवल वही तारीखें प्रदर्शित करता है जो चालू माह के अंतर्गत आती हैं। इसका मतलब है कि कैलेंडर ग्रिड में खाली सेल हो सकते हैं। आप showOtherMonths विकल्प को सत्य पर सेट करके खाली कोशिकाओं को पिछले और बाद के महीनों की तारीखों से भरने की अनुमति दे सकते हैं, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOtherMonths: true )); ));

परिणाम नीचे दिए गए चित्र में दिखाया गया है। इस मामले में, अन्य महीनों से संबंधित तिथियां उपलब्ध हो जाती हैं यदि चयन अन्य महीने का विकल्प सत्य पर सेट होता है:

अतिरिक्त बटनों के लिए सहायक पैनल का उपयोग करना

showButtonBar विकल्प को सही पर सेट करने से डेटपिकर विजेट विंडो के नीचे अतिरिक्त बटनों की एक पट्टी जुड़ जाती है। पॉप-अप कैलेंडर के मामले में, पैनल में दो बटन होते हैं: "आज" और "बंद करें"। आज बटन आपको वर्तमान तिथि पर लौटने की अनुमति देता है, और बंद करें बटन कैलेंडर विंडो बंद कर देता है। इन बटनों के लिए उपयोग किए गए टेक्स्ट को currentText औरcloseText विकल्पों का उपयोग करके बदला जा सकता है।

यदि goToCurrent विकल्प सत्य पर सेट है, तो कैलेंडर वर्तमान तिथि के बजाय चयनित तिथि पर वापस आ जाएगा। यदि डेटपिकर विजेट को एक विशिष्ट डिफॉल्टडेट विकल्प मान के साथ कॉन्फ़िगर किया गया है तो यह सुविधा उपयोगी है। यदि किसी तिथि को चुनने का उद्देश्य अतीत या भविष्य की घटनाओं से संबंधित है, तो वर्तमान तिथि पर लौटना हमेशा उचित नहीं होता है। एक संगत उदाहरण नीचे दिया गया है:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showButtonPanel: true, currentText: "Go", GotoCurrent: true, defaultDate : "+1m +1y" )).val("20.12.2014" ));

ध्यान दें कि goToCurrent विकल्प का उपयोग करने से चयनित तिथि पर जाने के लिए बटन दबाना पड़ता है। इस उदाहरण में, चयनित तिथि इनपुट तत्व का मान विशेषता है, लेकिन यदि उपयोगकर्ता एक अलग तिथि चुनता है और फिर कैलेंडर को फिर से खोलता है, तो बटन पर क्लिक करने से कैलेंडर आपके द्वारा निर्दिष्ट तिथि के बजाय उपयोगकर्ता द्वारा चयनित तिथि पर वापस आ जाएगा।

डेटपिकर विजेट विधियाँ

डेटपिकर विजेट द्वारा समर्थित विधियाँ नीचे दी गई तालिका में सूचीबद्ध हैं:

डेटपिकर विजेट विधियाँ विधि विवरण

डेटपिकर('नष्ट करें')	आधार तत्व से डेटपिकर विजेट कार्यक्षमता को पूरी तरह से हटा देता है
दिनांक चयनकर्ता('अक्षम करें')	आधार तत्व के लिए डेटपिकर विजेट को रोक देता है
दिनांक चयनकर्ता('सक्षम करें')	अंतर्निहित तत्व के लिए पहले से रोके गए डेटपिकर विजेट को फिर से शुरू करता है
डेटपिकर ("विकल्प", विकल्प)	आपको एक या अधिक डेटपिकर विजेट विकल्पों के मान प्राप्त करने या सेट करने की अनुमति देता है
डेटपिकर ("अक्षम है")	यदि डेटपिकर विजेट अक्षम है तो सत्य लौटाता है
दिनांक चयनकर्ता("छिपाएँ")	यदि पॉपअप कैलेंडर दिखाई दे तो उसे छुपा देता है
डेटपिकर ("दिखाएँ")	यदि यह अदृश्य है तो एक पॉपअप कैलेंडर प्रदर्शित करता है
दिनांक चयनकर्ता ("ताज़ा करें")	अंतर्निहित आइटम में किए गए परिवर्तनों को प्रतिबिंबित करने के लिए कैलेंडर को अद्यतन करता है
डेटपिकर ("गेटडेट")	कैलेंडर में चयनित तिथि प्राप्त करता है
डेटपिकर ("सेटडेट", दिनांक)	निर्दिष्ट मान को चयनित कैलेंडर दिनांक के रूप में सेट करता है

दिनांक को प्रोग्रामेटिक रूप से प्राप्त करना और बदलना

सबसे आम बार जब मैं गेटडेट और सेटडेट विधियों का उपयोग करता हूं, तब मैं उपयोगकर्ताओं को कई डेटपिकर विजेट्स का उपयोग करके संपूर्ण दिनांक सीमाओं का चयन करने की क्षमता देना चाहता हूं। ऐसी स्थितियों में, मैं टेक्स्ट फ़ील्ड में चयनित तिथियों को प्रदर्शित नहीं करना चाहता हूं और केवल निर्दिष्ट कटऑफ तिथियों के बीच दिनों की संख्या प्रदर्शित करना चाहता हूं। एक संगत उदाहरण नीचे दिया गया है:

jQuery यूआई लेबल (मार्जिन: 12पीएक्स) इनपुट (चौड़ाई: 200पीएक्स; टेक्स्ट-एलाइन: बाएं) #रैपर > * (फ्लोट: बाएं) #परिणाम (मार्जिन: ऑटो; पैडिंग: 10पीएक्स; चौड़ाई: 200पीएक्स; स्पष्ट: बाएं) $( function() ($("#result").hide(); $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#dateStart, #dateEnd").datepicker(( minDate: "-7d", maxDate: "+7d", onSelect: function(date, datepicker) ( if (datepicker.id == "dateStart") ( $("#dateEnd").datepicker("setDate", date) . datepicker("सक्षम").datepicker("option", "minDate", date) ) यदि (!$("#dateEnd").datepicker("isDisabled")) ( var प्रारंभ दिनांक = $("#dateStart")। डेटपिकर("गेटडेट"); वर एंडडेट = $("#डेटएंड").डेटपिकर("गेटडेट"); स्टार्टडेट.गेटडेट().दिखाएँ() ; ) )).फ़िल्टर('#dateEnd').datepicker('अक्षम' )); प्रारंभ: समाप्ति: दिनों की संख्या:

यह उदाहरण दो कैलेंडर बनाता है, जिनमें से एक दस्तावेज़ लोड होने के तुरंत बाद अक्षम स्थिति में होता है। उपयोगकर्ता की तिथियों के चयन पर प्रतिक्रिया देने के लिए, onSelect ईवेंट का उपयोग किया जाता है (जिसके बारे में हम बाद में अधिक विस्तार से बात करेंगे)।

एक बार जब उपयोगकर्ता पहले कैलेंडर में एक तारीख का चयन करता है, तो हम दूसरे कैलेंडर को तैयार करने के लिए सेटडेट विधि का उपयोग करते हैं, और दोनों कैलेंडर से तारीखों को पुनः प्राप्त करने के लिए गेटडेट विधि का उपयोग करते हैं और फिर पहली और दूसरी तारीखों के बीच दिनों के अंतर की गणना करते हैं (सरलता के लिए, हम मान लीजिए कि दोनों तारीखें एक ही और एक ही महीने की हैं)। ब्राउज़र विंडो में दस्तावेज़ दृश्य चित्र में दिखाया गया है:

डेटपिकर विजेट इवेंट

सभी jQuery यूआई विजेट्स की तरह, डेटपिकर विजेट घटनाओं के एक सेट का समर्थन करता है जो आपको एप्लिकेशन स्थिति में महत्वपूर्ण परिवर्तनों के बारे में सूचित करता है। ये घटनाएँ नीचे दी गई तालिका में दिखाई गई हैं:

मैं दोबारा प्रदर्शित नहीं करूंगा कि ऑनसेलेक्ट विधि कैसे काम करती है क्योंकि इसका उपयोग पहले से ही कुछ उदाहरणों में किया जा चुका है, जिसमें पिछले अनुभाग में चर्चा की गई विधि भी शामिल है। एकमात्र बात जो मैं इंगित करना चाहता हूं वह यह है कि ईवेंट हैंडलर को दिए गए तर्क चयनित तिथि और डेटपिकर उदाहरण के स्ट्रिंग प्रतिनिधित्व हैं जिन्होंने ईवेंट को उठाया है।

onChangeMonth ईवेंट आपको उस ईवेंट का जवाब देने की अनुमति देता है जो तब होता है जब उपयोगकर्ता एक अलग महीने या वर्ष का चयन करता है, चाहे वह चेंजमंथ और चेंजईयर विकल्प या माह पृष्ठ बटन के उपयोग के माध्यम से सक्षम ड्रॉप-डाउन सूचियों के माध्यम से हो।

ऑनक्लोज़ विधि का उपयोग करके, आप पॉपअप कैलेंडर के बंद होने पर प्रतिक्रिया दे सकते हैं। यदि उपयोगकर्ता ने कैलेंडर में कोई तारीख नहीं चुनी है तो भी यह ईवेंट सक्रिय हो जाता है। ईवेंट हैंडलर के तर्क दिनांक का एक स्ट्रिंग प्रतिनिधित्व हैं (या यदि उपयोगकर्ता ने चयन किए बिना विंडो बंद कर दी है तो एक खाली स्ट्रिंग) और डेटपिकर उदाहरण जिसने ईवेंट उठाया है।

विवरण: किसी दिनांक का चयन करने के लिए पॉप-अप विंडो या इनलाइन कैलेंडर से।

नया संस्करण: 1.0

JQuery यूआई डेटपिकर प्लगइन को अनुकूलित करने के लिए पेज ऊंचाई जोड़ने के लिए एक तारीख का चयन करें। आप दिनांक प्रारूप और भाषा को अनुकूलित कर सकते हैं, आपके द्वारा चुनी गई दिनांक सीमा को सीमित कर सकते हैं, बटन और अन्य नेविगेशन विकल्प जोड़ सकते हैं।

डिफ़ॉल्ट रूप से, जब किसी संबद्ध टेक्स्ट फ़ील्ड पर फ़ोकस होता है, तो एक छोटा ओपन डेट पिकर ओवरले दिखाई देता है। ऑनलाइन कैलेंडर के लिए, बस DIV या अंतराल से जुड़ी तारीख का चयन करें।

कीबोर्ड इंटरेक्शन

जब दिनांक चयनकर्ता खुला होता है, तो निम्नलिखित कीबोर्ड आदेश उपलब्ध होते हैं:

• पृष्ठ ऊपर: पिछले माह पर जाएँ।
• पृष्ठ नीचे: अगले महीने पर जाएँ।
• CTRL + पेज अप: पिछले वर्ष पर जाएँ।
• CTRL + पेज डाउन: अगले वर्ष पर जाएं।
• CTRL + होम: चालू माह ले जाएँ। यदि दिनांक चयनकर्ता बंद है, तो यह खुला है।
• CTRL + बाएँ: दिन पर जाएँ।
• CTRL + दाएँ: अगले दिन पर जाएँ।
• CTRL + UP: पिछले सप्ताह पर जाएं।
• CTRL + DOWN: अगले सप्ताह पर जाएँ।
• ENTER: फ़ोकस दिनांक चुनें.
• CTRL + END: दिनांक पिकर बंद करें और दिनांक साफ़ करें।
• पलायन: नल बंद करने की तारीख, बिना किसी विकल्प के।

उपयोगी फ़ंक्शन $ .datepicker.setDefaults (सेटिंग्स)

सभी दिनांक चयनकर्ताओं के लिए डिफ़ॉल्ट सेटिंग्स बदलें।

08/20/2012 रोमचिक

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

सबसे पहले, मैं एक स्पष्ट उदाहरण दूँगा कि मैं क्या करना चाहता हूँ:

खैर, यह स्पष्ट है कि तिथि चुनने के बाद, कैलेंडर गायब हो जाता है, और चयनित तिथि टेक्स्ट फ़ील्ड में दिखाई देती है।
आइए कार्यान्वयन शुरू करें।

कैलेंडर स्थापित करना और कनेक्ट करना - डेटपिकर विजेट।

आधिकारिक jQueryUI वेबसाइट पर जाएं. कुछ भी अनावश्यक डाउनलोड करने से बचने के लिए, "सभी घटकों को अचयनित करें" पर क्लिक करें

और "कोर" चुनें:

मूलतः बस इतना ही। लेकिन इस विजेट में प्रीसेट डिस्प्ले (थीम) हैं
ऊपरी दाएं कोने में आप एक उपयुक्त थीम का चयन कर सकते हैं, विजेट संस्करण का चयन कर सकते हैं और "डाउनलोड" पर क्लिक कर सकते हैं:

अगले चरण में, संग्रह को अनपैक करें।
आइए तुरंत अपने पेज की संरचना पर सहमत हों:

सीएसएस फ़ोल्डर - पृष्ठ के लिए शैलियाँ यहां संग्रहीत हैं

js फ़ोल्डर - पेज के लिए जावास्क्रिप्ट यहां संग्रहीत है

Index.php फ़ाइल हमारी पेज फ़ाइल है

अब हम डाउनलोड किए गए संग्रह से jquery-1.8.0.min.js और jquery-ui-1.8.23.custom.min.js फ़ाइलों को js फ़ोल्डर में रखते हैं। अब हम डाउनलोड किए गए संग्रह के सीएसएस फ़ोल्डर से डेटपिकर के लिए थीम के नाम वाला फ़ोल्डर (मेरे मामले में यह यूआई-लाइटनेस है) हमारे पेज के सीएसएस फ़ोल्डर में रखते हैं। यह jQuery डेटपिकर कैलेंडर विजेट की स्थापना को पूरा करता है।
आइए डेटपिकर को कनेक्ट करना शुरू करें। जैसा कि मैंने पहले ही कहा, मैं टेक्स्ट फ़ील्ड पर क्लिक करते समय कैलेंडर को कॉल करना चाहता हूं। आइए अपने इनपुट में id=”datepicker” जोड़ें ताकि हम इसे आसानी से एक्सेस कर सकें।

आइए अब एक छोटी jQuery स्क्रिप्ट लिखें जो इस परीक्षण फ़ील्ड पर क्लिक करने पर कैलेंडर को कॉल करेगी:

$(फ़ंक्शन())( $("#datepicker").datepicker(); ));

हम सहेजते हैं और जांचते हैं।

jQuery डेटपिकर का उपयोग करके एक कैलेंडर विजेट सेट करना।

पहली चीज़ जो हम स्थापित करेंगे वह हमारे कैलेंडर के लिए एक थीम है। नीचे मैं डेटपिकर के लिए थीम के नाम और उसके प्रदर्शन के साथ एक तालिका दूंगा:

यूआई हल्कापन
यूआई अंधकार
चिकनाई
शुरू
रेडमंड
धूप वाला
घटाटोप
ले मेंढक
झटका
मिर्च की चक्की
बैंगन
डार्क हाइव
क्यूपर्टिनो
दक्षिण गली
ब्लिट्जर
इंसानियत
हॉट स्नीकर्स
एक्साइट बाइक
वाडर
डॉट लव
मिंट चॉक
काली चाय
ट्रॉनटैस्टिक
शानदार पर्स

जैसा कि आप देख सकते हैं, सही थीम चुनने के लिए पर्याप्त थीम हैं, लेकिन अगर किसी कारण से आपको ऐसी कोई थीम नहीं मिली है, तो आप डेटपिकर के लिए स्टाइल फ़ाइल को बदलकर मानक थीम में से किसी एक को आसानी से बदल सकते हैं।
डेटपिकर सेटिंग्स यहीं समाप्त नहीं होती हैं, और डेटपिकर फ़ंक्शन को कॉल करते समय हम अतिरिक्त पैरामीटर पास कर सकते हैं:

पैरामीटर	विवरण	उदाहरण
अक्षम करें: सत्य (गलत) डिफ़ॉल्ट: ग़लत	दिनांक चयनकर्ता को सक्षम या अक्षम करें	$('.selector').datepicker((अक्षम: सत्य));
altField डिफ़ॉल्ट: खाली	उस तत्व के चयनकर्ता को निर्दिष्ट करता है जिसे अद्यतन किया जाएगा	$(“.selector”).datepicker(( altField: “#actualDate” ));
altFormat डिफ़ॉल्ट: खाली	dateFormat - altField के लिए उपयोग किया जाने वाला दिनांक प्रारूप	$(“.selector”).datepicker(( altFormat: “yy-mm-dd” ));
परिशिष्टटेक्स डिफ़ॉल्ट: खाली	प्रत्येक दिनांक फ़ील्ड के बाद प्रदर्शित किया जाने वाला पाठ	$(“.selector”).datepicker(( परिशिष्ट पाठ: “(yyyy-mm-dd)” ));
स्वत: आकार: सत्य (गलत) डिफ़ॉल्ट: ग़लत	स्वचालित आकार तत्व	$(“.selector”).datepicker(( autoSize: true ));
तारिख का प्रारूप: डिफ़ॉल्ट: मिमी/दिन/वर्ष नीचे दी गई तालिका में मैं दिखाऊंगा कि यह क्या मान ले सकता है।	दिनांक स्वरूप निर्दिष्ट करता है	$(“.selector”).datepicker(( dateFormat: “yy-mm-dd” ));
दिन के नाम गलती करना ["रविवार सोमवार मंगलवार बुधवार गुरुवार शुक्रवार शनिवार"]	सप्ताह के दिनों के पूरे नाम	$('.selector').datepicker(( दिन के नाम: ['सोमवार', 'मंगलवार', 'बुधवार', 'गुरुवार', 'शुक्रवार', 'शनिवार', 'रविवार'] ));
दिन के नामन्यूनतम गलती करना: ["सु", "मो", "तू", "हम", "थ", "फा", "सा"]	सप्ताह के दिनों का संक्षिप्त रूप	$('.selector').datepicker((dayNamesMin: ['सोम','मंगल','बुध','गुरु','शुक्र','शनि','रवि'] ));
दिन के नाम संक्षिप्त गलती करना: ["रविवार", "सोम", "मंगल", "बुध", "गुरु", "शुक्र", "शनि"]	सप्ताह के दिनों के संक्षिप्त नाम	$(“.selector”).datepicker((dayNamesShort: [“सोम”, “मंगल”, “बुध”, “गुरु”, “शुक्र”, “शनि”, “रवि”] ));
डिफ़ॉल्ट दिनांक डिफ़ॉल्ट: खाली पैरामीटर के रूप में dateFormat पैरामीटर का उपयोग करता है	डिफ़ॉल्ट दिनांक निर्दिष्ट करता है	$(“.selector”).datepicker(( defaultDate: +7 ));
महीने के नाम गलती करना: ["जनवरी", "फ़रवरी", "मार्च", "अप्रैल", "मई", "जून", "जुलाई", "अगस्त", "सितंबर", "अक्टूबर", "नवंबर", "दिसंबर"]	महीनों के पूरे नाम	$('.selector').datepicker(( महीने के नाम: ['जनवरी', 'फरवरी', 'मार्च', 'अप्रैल', 'मई', 'जून', 'जुलाई', 'अगस्त', 'सितंबर', "अक्टूबर नवम्बर दिसम्बर"] ));
महीने के नाम संक्षिप्त गलती करना ["जनवरी", "फ़रवरी", "मार्च", "अप्रैल", "मई", "जून", "जुलाई", "अगस्त", "सितंबर", "अक्टूबर", "नवंबर", "दिसंबर"]	महीनों का संक्षिप्त नाम	$('.selector').datepicker((monthNamesShort: ['जनवरी', 'फरवरी', 'मार्च', 'अप्रैल', 'मई', 'जून', 'जुलाई', 'अगस्त', 'सितंबर', "अक्टूबर", "नवंबर", "दिसंबर"] ));

यहां मैंने केवल बुनियादी पैरामीटर प्रदान किए हैं जो आपके लिए उपयोगी हो सकते हैं। यदि आप मापदंडों की पूरी सूची देखना चाहते हैं, तो आधिकारिक दस्तावेज़ पर जाएँ
अब आइए उन मानों को देखें जो dateFormat पैरामीटर लेता है

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