JqueryUI - खजूर

JQueryUI में Datepickers उपयोगकर्ताओं को आसानी से और नेत्रहीन तारीखों को दर्ज करने की अनुमति देता है। आप दिनांक प्रारूप और भाषा को अनुकूलित कर सकते हैं, चयन तिथि सीमाओं को सीमित कर सकते हैं और बटन और अन्य नेविगेशन विकल्पों को आसानी से जोड़ सकते हैं।

jQueryUI प्रदान करता है datepicker()वह विधि जो एक तिथि-निर्धारण बनाती है और नए सीएसएस वर्गों को जोड़कर एक पृष्ठ पर HTML तत्वों की उपस्थिति को बदलती है। लिपटे हुए नियंत्रण में सेट किए गए इनपुट में <input>, <div>, और <span> तत्वों को बदल देता है।

डिफ़ॉल्ट रूप से, <इनपुट> तत्वों के लिए, संबंधित पाठ क्षेत्र लाभ फ़ोकस करने पर डेटपिकर कैलेंडर एक छोटे से ओवरले में खुलता है। इनलाइन कैलेंडर के लिए, बस डेटपिकर को <div>, या <span> तत्व से जोड़ दें।

वाक्य - विन्यास

datepicker() विधि का उपयोग दो रूपों में किया जा सकता है -

  • $ (चयनकर्ता, संदर्भ) .datepicker (विकल्प) विधि

  • $ (चयनकर्ता, संदर्भ) .datepicker ("कार्रवाई", [params]) विधि

$ (चयनकर्ता, संदर्भ) .datepicker (विकल्प) विधि

datepicker (विकल्प) विकल्प

वाक्य - विन्यास

$(selector, context).datepicker(options);

आप जावास्क्रिप्ट ऑब्जेक्ट का उपयोग करके एक समय में एक या अधिक विकल्प प्रदान कर सकते हैं। यदि एक से अधिक विकल्प प्रदान किए जाने हैं, तो आप उन्हें निम्नानुसार अल्पविराम का उपयोग करके अलग कर देंगे -

$(selector, context).datepicker({option1: value1, option2: value2..... });

निम्न तालिका उन विभिन्न विकल्पों को सूचीबद्ध करती है जिनका उपयोग इस विधि के साथ किया जा सकता है -

अनु क्रमांक। विकल्प और विवरण
1 altField

यह विकल्प एक फ़ील्ड के लिए एक jQuery चयनकर्ता को निर्दिष्ट करता है जिसे किसी भी तिथि चयन के साथ अद्यतन किया जाता है। AltFormat विकल्प इस मूल्य के लिए प्रारूप निर्धारित करने के लिए इस्तेमाल किया जा सकता। उपयोगकर्ता को अधिक उपयोगकर्ता-अनुकूल प्रारूप प्रदर्शित करते हुए, सर्वर पर प्रस्तुत किए जाने वाले छिपे हुए इनपुट तत्व में दिनांक मान सेट करने के लिए यह काफी उपयोगी है। डिफ़ॉल्ट रूप से इसका मूल्य है""।

Option - altField

यह विकल्प एक फ़ील्ड के लिए एक jQuery चयनकर्ता को निर्दिष्ट करता है जिसे किसी भी तिथि चयन के साथ अद्यतन किया जाता है। AltFormat विकल्प इस मूल्य के लिए प्रारूप निर्धारित करने के लिए इस्तेमाल किया जा सकता। उपयोगकर्ता को अधिक उपयोगकर्ता-अनुकूल प्रारूप प्रदर्शित करते हुए, सर्वर पर प्रस्तुत किए जाने वाले छिपे हुए इनपुट तत्व में दिनांक मान सेट करने के लिए यह काफी उपयोगी है। डिफ़ॉल्ट रूप से इसका मूल्य है""।

Syntax

$(".selector").datepicker(
   { altField: "#actualDate" }
);
2 altFormat

इस विकल्प का उपयोग तब किया जाता है जब एक altField विकल्प निर्दिष्ट किया जाता है। यह वैकल्पिक तत्व को लिखे जाने वाले मूल्य के लिए प्रारूप प्रदान करता है। डिफ़ॉल्ट रूप से इसका मूल्य है""।

Option - altFormat

इस विकल्प का उपयोग तब किया जाता है जब एक altField विकल्प निर्दिष्ट किया जाता है। यह वैकल्पिक तत्व को लिखे जाने वाले मूल्य के लिए प्रारूप प्रदान करता है। डिफ़ॉल्ट रूप से इसका मूल्य है""।

Syntax

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
3 appendText

यह विकल्प <इनपुट> तत्व के बाद रखा जाने वाला स्ट्रिंग मान है, जिसका उद्देश्य उपयोगकर्ता को निर्देश दिखाना है। डिफ़ॉल्ट रूप से इसका मूल्य है""।

Option - appendText

यह विकल्प <इनपुट> तत्व के बाद रखा जाने वाला स्ट्रिंग मान है, जिसका उद्देश्य उपयोगकर्ता को निर्देश दिखाना है। डिफ़ॉल्ट रूप से इसका मूल्य है""।

Syntax

$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);
4 ऑटो साइज़

यह विकल्प जब सही पर सेट होता है , डेट इनपुट को निर्धारित करने के लिए <इनपुट> तत्व का उपयोग करता है, जैसा कि डेटफ़ॉर्मैट विकल्प के साथ सेट होता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Option - autoSize

यह विकल्प जब सही पर सेट होता है , डेट इनपुट को निर्धारित करने के लिए <इनपुट> तत्व का उपयोग करता है, जैसा कि डेटफ़ॉर्मैट विकल्प के साथ सेट होता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Syntax

$(".selector").datepicker(
   { autoSize: true }
);
5 beforeShow

यह विकल्प एक कॉलबैक फ़ंक्शन है जिसे डेट इनपुट से पहले प्रदर्शित किया जाता है, पैरामीटर के साथ <इनपुट> तत्व और डेटपिकर उदाहरण के साथ। यह फ़ंक्शन डेटपिकर को संशोधित करने के लिए उपयोग किए गए एक विकल्प हैश लौटा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है""।

Option - beforeShow

यह विकल्प एक कॉलबैक फ़ंक्शन है जिसे डेट इनपुट से पहले प्रदर्शित किया जाता है, पैरामीटर के साथ <इनपुट> तत्व और डेटपिकर उदाहरण के साथ। यह फ़ंक्शन डेटपिकर को संशोधित करने के लिए उपयोग किए गए एक विकल्प हैश लौटा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है""।

6 beforeShowDay

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

Option - beforeShowDay

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

  • [०] - तारीख को चयन योग्य बनाने के लिए सही है, अन्यथा गलत ।

  • [१] -एक लागू करने के लिए सीएसएस श्रेणी के नामों का स्पेस-सीमांकित स्ट्रिंग या कोई भी रिक्त स्ट्रिंग लागू करने के लिए

  • [२] - दिन के तत्व के लिए टूलटिप लगाने के लिए वैकल्पिक स्ट्रिंग

डिफ़ॉल्ट रूप से इसका मूल्य है null।

7 buttonImage

यह विकल्प बटन पर बटन या दोनों में से किसी एक पर शोऑन विकल्प को सेट करके सक्षम किए जाने वाले चित्र के लिए एक पथ को निर्दिष्ट करता है । यदि buttonText भी प्रदान की जाती है, बटन पाठ हो जाता है ऑल्ट बटन की विशेषता। डिफ़ॉल्ट रूप से इसका मूल्य है""।

Option - buttonImage

यह विकल्प बटन पर बटन या दोनों में से किसी एक पर शोऑन विकल्प को सेट करके सक्षम किए जाने वाले चित्र के लिए एक पथ को निर्दिष्ट करता है । यदि buttonText भी प्रदान की जाती है, बटन पाठ हो जाता है ऑल्ट बटन की विशेषता। डिफ़ॉल्ट रूप से इसका मूल्य है""।

Syntax

$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);
8 buttonImageOnly

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

Option - buttonImageOnly

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

Syntax

$(".selector").datepicker(
   { buttonImageOnly: true }
);
9 टेक्स्ट बटन

यह विकल्प एक बटन या दोनों में से शोऑन विकल्प सेट करके सक्षम बटन के लिए कैप्शन को निर्दिष्ट करता है । डिफ़ॉल्ट रूप से इसका मूल्य है"..."।

Option - buttonText

यह विकल्प एक बटन या दोनों में से शोऑन विकल्प सेट करके सक्षम बटन के लिए कैप्शन को निर्दिष्ट करता है । डिफ़ॉल्ट रूप से इसका मूल्य है"..."।

Syntax

$(".selector").datepicker(
   { buttonText: "Choose" }
);
10 calculateWeek

यह विकल्प लोन पैरामीटर के रूप में पारित तिथि के लिए सप्ताह की संख्या की गणना और वापस करने के लिए एक कस्टम फ़ंक्शन है। डिफ़ॉल्ट कार्यान्वयन $ .datepicker.iso8601Week () उपयोगिता फ़ंक्शन द्वारा प्रदान किया गया है ।

Option - calculateWeek

यह विकल्प लोन पैरामीटर के रूप में पारित तिथि के लिए सप्ताह की संख्या की गणना और वापस करने के लिए एक कस्टम फ़ंक्शन है। डिफ़ॉल्ट कार्यान्वयन $ .datepicker.iso8601Week () उपयोगिता फ़ंक्शन द्वारा प्रदान किया गया है ।

Syntax

$(".selector").datepicker(
   { calculateWeek: myWeekCalc }
);
1 1 changeMonth

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

Option - changeMonth

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

Syntax

$(".selector").datepicker(
   { changeMonth: true }
);
12 changeYear

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

Option - changeYear

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

Syntax

$(".selector").datepicker(
   { changeYear: true }
);
13 closeText

यह विकल्प पाठ को बंद बटन के लिए Done के डिफ़ॉल्ट कैप्शन को बदलने के लिए निर्दिष्ट करता है। इसका उपयोग तब किया जाता है जब बटन पैनल को शो-बॉटनप्नेल विकल्प के माध्यम से प्रदर्शित किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य है"Done"।

Option - closeText

यह विकल्प पाठ को बंद बटन के लिए Done के डिफ़ॉल्ट कैप्शन को बदलने के लिए निर्दिष्ट करता है। इसका उपयोग तब किया जाता है जब बटन पैनल को शो-बॉटनप्नेल विकल्प के माध्यम से प्रदर्शित किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य है"Done"।

Syntax

$(".selector").datepicker(
   { closeText: "Close" }
);
14 constrainInput

यह विकल्प यदि सही (डिफ़ॉल्ट) सेट होता है, तो वर्तमान इनपुटफ़ॉर्मैट विकल्प द्वारा अनुमति दिए गए <इनपुट> तत्व में पाठ प्रविष्टि को बाध्य किया जाता है । डिफ़ॉल्ट रूप से इसका मूल्य हैtrue।

Option - constrainInput

यह विकल्प यदि सही (डिफ़ॉल्ट) सेट होता है, तो वर्तमान इनपुटफ़ॉर्मैट विकल्प द्वारा अनुमति दिए गए <इनपुट> तत्व में पाठ प्रविष्टि को बाध्य किया जाता है । डिफ़ॉल्ट रूप से इसका मूल्य हैtrue।

Syntax

$(".selector").datepicker(
   { constrainInput: false }
);
15 currentText

यह विकल्प वर्तमान बटन के लिए आज के डिफ़ॉल्ट कैप्शन को बदलने के लिए पाठ को निर्दिष्ट करता है। इसका उपयोग तब किया जाता है जब बटन पैनल को शो-बॉटनप्नेल विकल्प के माध्यम से प्रदर्शित किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैToday।

Option - currentText

यह विकल्प वर्तमान बटन के लिए आज के डिफ़ॉल्ट कैप्शन को बदलने के लिए पाठ को निर्दिष्ट करता है। इसका उपयोग तब किया जाता है जब बटन पैनल को शो-बॉटनप्नेल विकल्प के माध्यम से प्रदर्शित किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैToday।

Syntax

$(".selector").datepicker(
   { currentText: "Now" }
);
16 डेटा प्रारूप

यह विकल्प उपयोग किए जाने वाले दिनांक प्रारूप को निर्दिष्ट करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैmm/dd/yy।

Option - dateFormat

यह विकल्प उपयोग किए जाने वाले दिनांक प्रारूप को निर्दिष्ट करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैmm/dd/yy।

Syntax

$(".selector").datepicker(
   { dateFormat: "yy-mm-dd" }
);
17 dayNames

यह विकल्प 7-तत्व सरणी है, जिसमें पूरे दिन के नाम दिए गए हैं, जो रविवार को 0 वें तत्व का प्रतिनिधित्व करता है। नियंत्रण को स्थानीय बनाने के लिए इस्तेमाल किया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]।

Option - dayNames

यह विकल्प 7-तत्व सरणी है, जिसमें पूरे दिन के नाम दिए गए हैं, जो रविवार को 0 वें तत्व का प्रतिनिधित्व करता है। नियंत्रण को स्थानीय बनाने के लिए इस्तेमाल किया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]।

Syntax

$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);
18 dayNamesMin

यह विकल्प एक 7-तत्व सरणी है, जो रविवार को प्रतिनिधित्व करने वाले 0 तत्व के साथ न्यूनतम दिन के नाम प्रदान करता है, जिसका उपयोग कॉलम हेडर के रूप में किया जाता है। नियंत्रण को स्थानीय बनाने के लिए इस्तेमाल किया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]।

Option - dayNamesMin

यह विकल्प एक 7-तत्व सरणी है, जो रविवार को प्रतिनिधित्व करने वाले 0 तत्व के साथ न्यूनतम दिन के नाम प्रदान करता है, जिसका उपयोग कॉलम हेडर के रूप में किया जाता है। नियंत्रण को स्थानीय बनाने के लिए इस्तेमाल किया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]।

Syntax

$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);
19 dayNamesShort

यह विकल्प एक 7-तत्व सरणी को निर्दिष्ट करता है जो कि रविवार को प्रतिनिधित्व करने वाले 0 वें तत्व के साथ लघु दिन के नाम प्रदान करता है। नियंत्रण को स्थानीय बनाने के लिए इस्तेमाल किया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]।

Option - dayNamesShort

यह विकल्प एक 7-तत्व सरणी को निर्दिष्ट करता है जो कि रविवार को प्रतिनिधित्व करने वाले 0 वें तत्व के साथ लघु दिन के नाम प्रदान करता है। नियंत्रण को स्थानीय बनाने के लिए इस्तेमाल किया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]।

Syntax

$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);
20 defaultDate

यह विकल्प नियंत्रण के लिए प्रारंभिक तिथि निर्धारित करता है, आज के डिफ़ॉल्ट मूल्य को ओवरराइड करता है, अगर <इनपुट> तत्व का कोई मूल्य नहीं है। यह एक दिनांक उदाहरण, आज से दिनों की संख्या , या एक निरपेक्ष या सापेक्ष तिथि निर्दिष्ट करने वाली स्ट्रिंग हो सकती है । डिफ़ॉल्ट रूप से इसका मूल्य हैnull।

Option - defaultDate

यह विकल्प नियंत्रण के लिए प्रारंभिक तिथि निर्धारित करता है, आज के डिफ़ॉल्ट मूल्य को ओवरराइड करता है, अगर <इनपुट> तत्व का कोई मूल्य नहीं है। यह एक दिनांक उदाहरण, आज से दिनों की संख्या , या एक निरपेक्ष या सापेक्ष तिथि निर्दिष्ट करने वाली स्ट्रिंग हो सकती है । डिफ़ॉल्ट रूप से इसका मूल्य हैnull।

Syntax

$(".selector").datepicker(
   { defaultDate: +7 }
);
21 अवधि

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

Option - duration

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

Syntax

$(".selector").datepicker(
   { duration: "slow" }
);
22 पहला दिन

यह विकल्प निर्दिष्ट करता है कि किस दिन को सप्ताह का पहला दिन माना जाता है, और इसे बाएं-सबसे कॉलम के रूप में प्रदर्शित किया जाएगा। डिफ़ॉल्ट रूप से इसका मूल्य है0।

Option - firstDay

यह विकल्प निर्दिष्ट करता है कि किस दिन को सप्ताह का पहला दिन माना जाता है, और इसे बाएं-सबसे कॉलम के रूप में प्रदर्शित किया जाएगा। डिफ़ॉल्ट रूप से इसका मूल्य है0।

Syntax

$(".selector").datepicker(
   { firstDay: 1 }
);
23 gotoCurrent

यह विकल्प जब सही पर सेट होता है , तो वर्तमान दिन लिंक चयनित तिथि पर सेट किया जाता है, आज के डिफ़ॉल्ट को ओवरराइड करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Option - gotoCurrent

यह विकल्प जब सही पर सेट होता है , तो वर्तमान दिन लिंक चयनित तिथि पर सेट किया जाता है, आज के डिफ़ॉल्ट को ओवरराइड करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Syntax

$(".selector").datepicker(
   { gotoCurrent: true }
);
24 hideIfNoPrevNext

यह विकल्प यदि सही पर सेट है , तो अगले और पिछले लिंक को छुपाता है (केवल उन्हें अक्षम करने के विपरीत) जब वे लागू नहीं होते हैं, जैसा कि टकसाल और मैक्सडेट विकल्पों की सेटिंग्स द्वारा निर्धारित किया जाता है । डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Option - hideIfNoPrevNext

यह विकल्प यदि सही पर सेट है , तो अगले और पिछले लिंक को छुपाता है (केवल उन्हें अक्षम करने के विपरीत) जब वे लागू नहीं होते हैं, जैसा कि टकसाल और मैक्सडेट विकल्पों की सेटिंग्स द्वारा निर्धारित किया जाता है । डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Syntax

$(".selector").datepicker(
   { hideIfNoPrevNext: true }
);
25 isRTL

यह विकल्प जब सही पर सेट होता है , तो स्थानीयकरण को दाईं-बाईं भाषा के रूप में निर्दिष्ट करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Option - isRTL

यह विकल्प जब सही पर सेट होता है , तो स्थानीयकरण को दाईं-बाईं भाषा के रूप में निर्दिष्ट करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Syntax

$(".selector").datepicker(
   { isRTL: true }
);
26 maxDate

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

Option - maxDate

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

Syntax

$(".selector").datepicker(
   { maxDate: "+1m +1w" }
);
27 minDate

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

Option - minDate

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

Syntax

$(".selector").datepicker(
   { minDate: new Date(2007, 1 - 1, 1) }
);
28 monthNames

यह विकल्प एक 12-तत्व सरणी है जो पूरे महीने के नाम प्रदान करता है जिसमें 0 तत्व का प्रतिनिधित्व जनवरी है। नियंत्रण को स्थानीय बनाने के लिए इस्तेमाल किया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]।

Option - monthNames

यह विकल्प एक 12-तत्व सरणी है जो पूरे महीने के नाम प्रदान करता है जिसमें 0 तत्व का प्रतिनिधित्व जनवरी है। नियंत्रण को स्थानीय बनाने के लिए इस्तेमाल किया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]।

Syntax

$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);
29 monthNamesShort

यह विकल्प एक 12-तत्व सरणी को निर्दिष्ट करता है, जो जनवरी महीने का प्रतिनिधित्व करने वाले 0 वें तत्व के साथ छोटे महीने के नाम प्रदान करता है। नियंत्रण को स्थानीय बनाने के लिए इस्तेमाल किया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]।

Option - monthNamesShort

यह विकल्प एक 12-तत्व सरणी को निर्दिष्ट करता है, जो जनवरी महीने का प्रतिनिधित्व करने वाले 0 वें तत्व के साथ छोटे महीने के नाम प्रदान करता है। नियंत्रण को स्थानीय बनाने के लिए इस्तेमाल किया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]।

Syntax

$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);
30 navigationAsDateFormat

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

Option - navigationAsDateFormat

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

Syntax

$(".selector").datepicker(
   { navigationAsDateFormat: true }
);
31 nextText

यह विकल्प अगले महीने के नेविगेशन लिंक के लिए अगले के डिफ़ॉल्ट कैप्शन को बदलने के लिए पाठ को निर्दिष्ट करता है। ThemeRoller इस टेक्स्ट को आइकन से बदल देता है। डिफ़ॉल्ट रूप से इसका मूल्य हैNext।

Option - nextText

यह विकल्प अगले महीने के नेविगेशन लिंक के लिए अगले के डिफ़ॉल्ट कैप्शन को बदलने के लिए पाठ को निर्दिष्ट करता है। ThemeRoller इस टेक्स्ट को आइकन से बदल देता है। डिफ़ॉल्ट रूप से इसका मूल्य हैNext।

Syntax

$(".selector").datepicker(
   {  nextText: "Later" }
);
32 NUMBEROFMONTHS

यह विकल्प डेटपिकर में दिखाने के लिए महीनों की संख्या निर्दिष्ट करता है। डिफ़ॉल्ट रूप से इसका मूल्य है1।

Option - numberOfMonths

यह विकल्प डेटपिकर में दिखाने के लिए महीनों की संख्या निर्दिष्ट करता है। डिफ़ॉल्ट रूप से इसका मूल्य है1। समर्थित कई प्रकार -

  • Number - एक ही पंक्ति में प्रदर्शित करने के लिए महीनों की संख्या।

  • Array - प्रदर्शित करने के लिए पंक्तियों और स्तंभों की संख्या को परिभाषित करने वाला एक सरणी।

Syntax

$(".selector").datepicker(
   { numberOfMonths: [ 2, 3 ] }
);
33 onChangeMonthYear

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

Option - onChangeMonthYear

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

34 OnClose

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

Option - onClose

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

35 onSelect

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

Option - onSelect

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

36 prevText

यह विकल्प पाठ का डिफ़ॉल्ट शीर्षक बदलने के लिए निर्दिष्ट करता पिछला पिछले महीने नेविगेशन लिंक के लिए। (ध्यान दें कि ThemeRoller इस टेक्स्ट को एक आइकन से बदल देता है)। डिफ़ॉल्ट रूप से इसका मूल्य हैPrevdefaultDatedayNamesMin।

Option - prevText

यह विकल्प पाठ का डिफ़ॉल्ट शीर्षक बदलने के लिए निर्दिष्ट करता पिछला पिछले महीने नेविगेशन लिंक के लिए। (ध्यान दें कि ThemeRoller इस टेक्स्ट को एक आइकन से बदल देता है)। डिफ़ॉल्ट रूप से इसका मूल्य हैPrev।

Syntax

$(".selector").datepicker(
   { prevText: "Earlier" }
);
37 selectOtherMonths

यदि यह विकल्प सही है , तो प्रदर्शित महीने (ओं) के पहले या बाद के दिनों को चुना जा सकता है । ऐसे दिनों को तब तक प्रदर्शित नहीं किया जाता जब तक कि showOtherMonths विकल्प सही नहीं होता । डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Option - selectOtherMonths

यदि यह विकल्प सही है , तो प्रदर्शित महीने (ओं) के पहले या बाद के दिनों को चुना जा सकता है । ऐसे दिनों को तब तक प्रदर्शित नहीं किया जाता जब तक कि showOtherMonths विकल्प सही नहीं होता । डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Syntax

$(".selector").datepicker(
   { selectOtherMonths: true }
);
38 shortYearCutoff

यह विकल्प यदि इसकी संख्या, 0 और 99 वर्ष के बीच का मान निर्दिष्ट करता है, जिसके पहले कोई भी 2-अंकीय वर्ष मान पिछली शताब्दी से संबंधित माना जाएगा। यदि यह विकल्प एक स्ट्रिंग है, तो मान एक संख्यात्मक रूपांतरण से गुजरता है और वर्तमान वर्ष में जोड़ा जाता है। डिफ़ॉल्ट है+10 जो वर्तमान वर्ष से 10 वर्ष का प्रतिनिधित्व करता है।

Option - shortYearCutoff

यह विकल्प यदि इसकी संख्या, 0 और 99 वर्ष के बीच का मान निर्दिष्ट करता है, जिसके पहले कोई भी 2-अंकीय वर्ष मान पिछली शताब्दी से संबंधित माना जाएगा। यदि यह विकल्प एक स्ट्रिंग है, तो मान एक संख्यात्मक रूपांतरण से गुजरता है और वर्तमान वर्ष में जोड़ा जाता है। डिफ़ॉल्ट है+10 जो वर्तमान वर्ष से 10 वर्ष का प्रतिनिधित्व करता है।

Syntax

$(".selector").datepicker(
   { shortYearCutoff: 50 }
);
39 showAnim

यह विकल्प निर्दिष्ट करता है कि तिथि-निर्धारण को दिखाने और छिपाने के लिए एनीमेशन के नाम का उपयोग किया जाए। यदि निर्दिष्ट किया गया है, तो एक शो (डिफ़ॉल्ट), फ़ेडइन, स्लाइडडाउन या किसी भी jQuery UI शो / वीडियो एनिमेशन में से एक होना चाहिए । डिफ़ॉल्ट रूप से इसका मूल्य हैshow।

Option - showAnim

यह विकल्प निर्दिष्ट करता है कि तिथि-निर्धारण को दिखाने और छिपाने के लिए एनीमेशन के नाम का उपयोग किया जाए। यदि निर्दिष्ट किया गया है, तो एक शो (डिफ़ॉल्ट), फ़ेडइन, स्लाइडडाउन या किसी भी jQuery UI शो / वीडियो एनिमेशन में से एक होना चाहिए । डिफ़ॉल्ट रूप से इसका मूल्य हैshow।

Syntax

$(".selector").datepicker(
   { showAnim: "fold" }
);
40 showButtonPanel

यह विकल्प यदि सही पर सेट किया गया है , तो डेट-टिकर के नीचे एक बटन पैनल प्रदर्शित होता है, जिसमें करंट और क्लोज बटन होते हैं। इन बटन के कैप्शन को currentText और closeText विकल्पों के माध्यम से प्रदान किया जा सकता है । डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Option - showButtonPanel

यह विकल्प यदि सही पर सेट किया गया है , तो डेट-टिकर के नीचे एक बटन पैनल प्रदर्शित होता है, जिसमें करंट और क्लोज बटन होते हैं। इन बटन के कैप्शन को currentText और closeText विकल्पों के माध्यम से प्रदान किया जा सकता है । डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Syntax

$(".selector").datepicker(
   { showButtonPanel: true }
);
41 showCurrentAtPos

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

Option - showCurrentAtPos

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

Syntax

$(".selector").datepicker(
   { showCurrentAtPos: 3 }
);
42 showMonthAfterYear

यह विकल्प निर्दिष्ट करता है यदि सही पर सेट किया गया है , तो महीने और वर्ष की स्थिति डेटपिकर के हेडर में उलट हो जाती है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Option - showMonthAfterYear

यह विकल्प निर्दिष्ट करता है यदि सही पर सेट किया गया है , तो महीने और वर्ष की स्थिति डेटपिकर के हेडर में उलट हो जाती है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Syntax

$(".selector").datepicker(
   { showMonthAfterYear: true }
);
43 दिखा दो

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

Option - showOn

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

फ़ोकस (डिफ़ॉल्ट) <इनपुट> तत्व लाभ फ़ोकस होने पर दिनांक को प्रदर्शित करता है।

बटन का कारण बनता है कि बटन <इनपुट> तत्व (लेकिन किसी भी एप्लेटेड पाठ से पहले) के बाद बनाया जाता है जो क्लिक होने पर डेटकपर को ट्रिगर करता है।

दोनों ट्रिगर बटन बनाने का कारण बनता है, और फोकस घटनाओं के लिए भी डेटकिकर को ट्रिगर करना है।

Syntax

$(".selector").datepicker(
   { showOn: "both" }
);
44 showOptions

जब कोई jQuery UI एनीमेशन showAnim विकल्प के लिए निर्दिष्ट किया जाता है, तो यह विकल्प एनीमेशन को पास करने के लिए एक हैश प्रदान करता है । डिफ़ॉल्ट रूप से इसका मूल्य है{}।

Option - showOptions

जब कोई jQuery UI एनीमेशन showAnim विकल्प के लिए निर्दिष्ट किया जाता है, तो यह विकल्प एनीमेशन को पास करने के लिए एक हैश प्रदान करता है । डिफ़ॉल्ट रूप से इसका मूल्य है{}।

Syntax

$(".selector").datepicker(
   { showOptions: { direction: "up" } }
);
45 showOtherMonths

यह विकल्प यदि चालू माह के पहले और अंतिम दिनों के पहले या बाद के तारीखों को सही , निर्धारित किया जाता है। ये तिथियां तब तक चयन करने योग्य नहीं हैं जब तक कि SelectOtherMonths विकल्प भी सही पर सेट न हो। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Option - showOtherMonths

यह विकल्प यदि चालू माह के पहले और अंतिम दिनों के पहले या बाद के तारीखों को सही , निर्धारित किया जाता है। ये तिथियां तब तक चयन करने योग्य नहीं हैं जब तक कि SelectOtherMonths विकल्प भी सही पर सेट न हो। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse।

Syntax

$(".selector").datepicker(
   { showOtherMonths: true }
);
46 showWeek

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

Option - showWeek

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

Syntax

$(".selector").datepicker(
   { showWeek: true }
);
47 stepMonths

यह विकल्प निर्दिष्ट करता है कि एक महीने के नेविगेशन नियंत्रणों पर क्लिक करने पर कितने महीने चलना है। डिफ़ॉल्ट रूप से इसका मूल्य है1।

Option - stepMonths

यह विकल्प निर्दिष्ट करता है कि एक महीने के नेविगेशन नियंत्रणों पर क्लिक करने पर कितने महीने चलना है। डिफ़ॉल्ट रूप से इसका मूल्य है1।

Syntax

$(".selector").datepicker(
   { stepMonths: 3 }
);
48 weekHeader

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

Option - weekHeader

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

Syntax

$(".selector").datepicker(
   { weekHeader: "W" }
);
49 yearRange

यह विकल्प सीमा, जिस पर वर्ष के रूप में ड्रॉपडाउन में प्रदर्शित किए जाते हैं को निर्दिष्ट करने के लिए: से जब changeYear है सच । मान निरपेक्ष या सापेक्ष हो सकते हैं (उदाहरण के लिए: 2005: +2, 2005 से 2 साल के लिए अब से)। उपसर्ग c का उपयोग वर्तमान वर्ष के बजाय चयनित वर्ष से सापेक्ष मूल्यों को ऑफसेट करने के लिए किया जा सकता है (उदाहरण: c-2: c + 3)। डिफ़ॉल्ट रूप से इसका मूल्य हैc-10:c+10।

Option - yearRange

यह विकल्प सीमा, जिस पर वर्ष के रूप में ड्रॉपडाउन में प्रदर्शित किए जाते हैं को निर्दिष्ट करने के लिए: से जब changeYear है सच । मान निरपेक्ष या सापेक्ष हो सकते हैं (उदाहरण के लिए: 2005: +2, 2005 से 2 साल के लिए अब से)। उपसर्ग c का उपयोग वर्तमान वर्ष के बजाय चयनित वर्ष से सापेक्ष मूल्यों को ऑफसेट करने के लिए किया जा सकता है (उदाहरण: c-2: c + 3)। डिफ़ॉल्ट रूप से इसका मूल्य हैc-10:c+10।

Syntax

$(".selector").datepicker(
   { yearRange: "2002:2012" }
);
50 yearSuffix

यह विकल्प डेटपिकर हेडर में वर्ष के बाद अतिरिक्त पाठ प्रदर्शित करता है। डिफ़ॉल्ट रूप से इसका मूल्य है""।

Option - yearSuffix

यह विकल्प डेटपिकर हेडर में वर्ष के बाद अतिरिक्त पाठ प्रदर्शित करता है। डिफ़ॉल्ट रूप से इसका मूल्य है""।

Syntax

$(".selector").datepicker(
   { yearSuffix: "CE" }
);

निम्न अनुभाग आपको दिनांकित कार्यक्षमता के कुछ कार्य उदाहरण दिखाएगा।

डिफ़ॉल्ट कार्यक्षमता

निम्न उदाहरण डेटापिक कार्यक्षमता का एक सरल उदाहरण प्रदर्शित करता है जिसमें कोई पैरामीटर नहीं है datepicker() तरीका।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-1" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-1"></p>
   </body>
</html>

हमें एक HTML फ़ाइल में उपरोक्त कोड को बचाने के लिए datepickerexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा। अब, आप परिणाम के साथ खेल सकते हैं -

इनलाइन डेटपिकर

निम्न उदाहरण इनलाइन डेटापिक कार्यक्षमता का एक सरल उदाहरण प्रदर्शित करता है।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-2" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      Enter Date: <div id = "datepicker-2"></div>
   </body>
</html>

हमें एक HTML फ़ाइल में उपरोक्त कोड को बचाने के लिए datepickerexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा। अब, आप परिणाम के साथ खेल सकते हैं -

उपरोक्त उदाहरण में हम इनलाइन तिथि पिकर प्राप्त करने के लिए <div> तत्व का उपयोग करते हैं।

AppendText, dateFormat, altField और altFormat का उपयोग

निम्नलिखित उदाहरण तीन महत्वपूर्ण विकल्पों के उपयोग को दर्शाता है (a) appendText (b) dateFormat (c) altField तथा (d) altFormat JqueryUI की तारीख समारोह में।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-3" ).datepicker({
               appendText:"(yy-mm-dd)",
               dateFormat:"yy-mm-dd",
               altField: "#datepicker-4",
               altFormat: "DD, d MM, yy"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-3"></p>
      <p>Alternate Date: <input type = "text" id = "datepicker-4"></p>
   </body>
</html>

हमें एक HTML फ़ाइल में उपरोक्त कोड को बचाने के लिए datepickerexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा। अब, आप परिणाम के साथ खेल सकते हैं -

ऊपर दिए गए उदाहरण में, आप देख सकते हैं कि पहले इनपुट के लिए फॉर्म की तिथि yy-mm-dd के रूप में सेट की गई है । यदि आप डेटपिकर से कुछ तारीख का चयन करते हैं तो उसी तारीख को दूसरे इनपुट क्षेत्र में परिलक्षित किया जाता है जिसका दिनांक प्रारूप "DD, d MM, yy" के रूप में सेट किया गया है।

ShowDay से पहले का उपयोग

निम्न उदाहरण विकल्प के उपयोग को दर्शाता है beforeShowDay JqueryUI की तारीख समारोह में।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-5" ).datepicker({
               beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                  // 0 : Sunday, 1 : Monday, ...
                  if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                  else return [true];
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-5"></p>
   </body>
</html>

हमें एक HTML फ़ाइल में उपरोक्त कोड को बचाने के लिए datepickerexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा। अब, आप परिणाम के साथ खेल सकते हैं -

उपरोक्त उदाहरण में रविवार और शनिवार को विकलांग हैं।

शोऑन, बटनइमेज और बटनइमेजऑनली का उपयोग

निम्नलिखित उदाहरण तीन महत्वपूर्ण विकल्पों के उपयोग को दर्शाता है (a) showOn (b) buttonImage तथा (c) buttonImageOnly JqueryUI की तारीख समारोह में।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-6" ).datepicker({
               showOn:"button",
               buttonImage: "/jqueryui/images/calendar-icon.png",
               buttonImageOnly: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-6"></p>
   </body>
</html>

हमें एक HTML फ़ाइल में उपरोक्त कोड को बचाने के लिए datepickerexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा। अब, आप परिणाम के साथ खेल सकते हैं -

उपर्युक्त उदाहरण में एक आइकन प्रदर्शित किया गया है, जिसे तारीख करने के लिए b पर क्लिक करने की आवश्यकता है।

डिफ़ॉल्ट का उपयोग करें, दिननाम, और अवधि

निम्नलिखित उदाहरण तीन महत्वपूर्ण विकल्पों के उपयोग को दर्शाता है (a) dayNamesMin (b) dayNamesMin तथा (c) duration JqueryUI की तारीख समारोह में।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-7" ).datepicker({
               defaultDate:+9,
               dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
               duration: "slow"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-7"></p>
   </body>
</html>

हमें एक HTML फ़ाइल में उपरोक्त कोड को बचाने के लिए datepickerexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा। अब, आप परिणाम के साथ खेल सकते हैं -

उपरोक्त उदाहरण में दिन के नाम dayNMMin का उपयोग करके बदल दिए गए हैं । आप यह भी देख सकते हैं कि एक डिफ़ॉल्ट तिथि निर्धारित है।

PrevText, nextText, showOtherMonths और SelectOtherMonths का उपयोग

निम्नलिखित उदाहरण तीन महत्वपूर्ण विकल्पों के उपयोग को दर्शाता है (a) prevText (b) nextText (c) showOtherMonths तथा (d) selectOtherMonths JqueryUI की तारीख समारोह में।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      
      <script>
         $(function() { $( "#datepicker-8" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: false
            });
            $( "#datepicker-9" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
      <p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
   </body>
</html>

हमें एक HTML फ़ाइल में उपरोक्त कोड को बचाने के लिए datepickerexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा। अब, आप परिणाम के साथ खेल सकते हैं -

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

ChangeMonth, ChangeYear, और numberOfMonths का उपयोग करें

निम्नलिखित उदाहरण तीन महत्वपूर्ण विकल्पों के उपयोग को दर्शाता है (a) changeMonth (b) changeYear तथा (c) numberOfMonths JqueryUI की तारीख समारोह में।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-10" ).datepicker({
               changeMonth:true,
               changeYear:true,
               numberOfMonths:[2,2]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-10"></p>
   </body>
</html>

हमें एक HTML फ़ाइल में उपरोक्त कोड को बचाने के लिए datepickerexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा। अब, आप परिणाम के साथ खेल सकते हैं -

उपरोक्त उदाहरण में, आप मंथ एंड ईयर फ़ील्ड के लिए ड्रॉपडाउन मेनू देख सकते हैं। और हम [2,2] की एक सरणी संरचना में 4 महीने का वितरण कर रहे हैं।

शो वीक, ईयरसफिक्स और शोएनिम का उपयोग

निम्नलिखित उदाहरण तीन महत्वपूर्ण विकल्पों के उपयोग को दर्शाता है (a) showWeek (b) yearSuffix तथा (c) showAnim JqueryUI की तारीख समारोह में।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-11" ).datepicker({
               showWeek:true,
               yearSuffix:"-CE",
               showAnim: "slide"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-11"></p>
   </body>
</html>

हमें एक HTML फ़ाइल में उपरोक्त कोड को बचाने के लिए datepickerexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा। अब, आप परिणाम के साथ खेल सकते हैं -

उपर्युक्त उदाहरण में, आप देख सकते हैं कि सप्ताह संख्याएँ डेट-टिकर के बाईं ओर प्रदर्शित की जाती हैं क्योंकि showeek सच पर सेट है । वर्ष "-सीई" का एक प्रत्यय है।

$ (चयनकर्ता, संदर्भ) .datepicker ("कार्रवाई", [params]) विधि

Datepicker (कार्रवाई, पैरामीटर) विधि एक नई तिथि का चयन के रूप में इस तरह के जैसे कैलेंडर, पर कोई क्रिया कर सकते हैं। action पहले तर्क में एक स्ट्रिंग के रूप में निर्दिष्ट किया गया है और वैकल्पिक रूप से, एक या अधिक params दिए गए कार्रवाई के आधार पर प्रदान किया जा सकता है।

मूल रूप से, यहां क्रियाएं कुछ भी नहीं हैं, लेकिन वे jQuery के तरीके हैं जिन्हें हम स्ट्रिंग के रूप में उपयोग कर सकते हैं।

वाक्य - विन्यास

$(selector, context).datepicker ("action", [params]);

निम्न तालिका इस पद्धति के कार्यों को सूचीबद्ध करती है -

अनु क्रमांक। कार्रवाई और विवरण
1 नष्ट ()

यह क्रिया डेटपिकर कार्यक्षमता को पूरी तरह से हटा देती है। यह तत्व को अपनी पूर्व-स्थिति पर वापस लौटा देगा। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Action - destroy()

यह क्रिया डेटपिकर कार्यक्षमता को पूरी तरह से हटा देती है। यह तत्व को अपनी पूर्व-स्थिति पर वापस लौटा देगा। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Syntax

$(".selector").datepicker("destroy");
2 संवाद (दिनांक [, onSelect] [, सेटिंग्स] [, pos])

यह क्रिया jQuery UI डायलॉग बॉक्स में डेटपिकर प्रदर्शित करती है।

Action - dialog( date [, onSelect ] [, settings ] [, pos ] )

यह क्रिया jQuery UI डायलॉग बॉक्स में डेटपिकर प्रदर्शित करती है। कहाँ -

  • तारीख प्रारंभिक तारीख है।

  • जब तारीख का चयन किया जाता है तो onSelect एक कॉलबैक फ़ंक्शन होता है। फ़ंक्शन दिनांक पाठ और दिनांक पिकर आवृत्ति पैरामीटर के रूप में प्राप्त करता है।

  • सेटिंग्स तारीख पिकर के लिए नई सेटिंग्स है।

  • स्थिति संवाद की शीर्ष / बाईं ओर की स्थिति है जैसे कि x, y] या एक माउसइवेंट जिसमें निर्देशांक होते हैं। यदि निर्दिष्ट नहीं है तो संवाद स्क्रीन पर केंद्रित है।

Syntax

$(".selector").datepicker( "dialog", "10/12/2012" );
3 तारीख लें()

यह क्रिया चयनित दिनांक के अनुरूप दिनांक लौटाती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Action - getDate()

यह क्रिया चयनित दिनांक के अनुरूप दिनांक लौटाती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Syntax

$(".selector").datepicker("getDate");
4 छिपाना()

यह क्रिया पहले से खोले गए दिनांक पिकर को बंद कर देती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Action - hide()

यह क्रिया पहले से खोले गए दिनांक पिकर को बंद कर देती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Syntax

$(".selector").datepicker("hide");
5 अक्षम है()

यह क्रिया जाँचता है कि दिनांक पिकर funcitonality अक्षम है या नहीं। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Action - isDisabled()

यह क्रिया जाँचता है कि दिनांक पिकर funcitonality अक्षम है या नहीं। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Syntax

$(".selector").datepicker("isDisabled");
6 विकल्प (विकल्पनाम)

यह क्रिया वर्तमान में निर्दिष्ट विकल्प के साथ जुड़े मूल्य को पुनः प्राप्त करती है ।

Action - option( optionName )

यह क्रिया वर्तमान में निर्दिष्ट विकल्प के साथ जुड़े मूल्य को पुनः प्राप्त करती है ।

Syntax

$(".selector").datepicker( "option", "disabled");
7 विकल्प ()

इस क्रिया को वर्तमान डेटपिकर विकल्प हैश का प्रतिनिधित्व करने वाली कुंजी / मान जोड़े वाली एक वस्तु मिलती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Action - option()

इस क्रिया को वर्तमान डेटपिकर विकल्प हैश का प्रतिनिधित्व करने वाली कुंजी / मान जोड़े वाली एक वस्तु मिलती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Syntax

var options = $( ".selector" ).datepicker( "option" );
8 विकल्प (विकल्पनाम, मान)

यह क्रिया निर्दिष्ट विकल्प के साथ जुड़े दिनांकविकल्प विकल्प का मान निर्धारित करती है।

Action - option( optionName, value )

यह क्रिया निर्दिष्ट विकल्प के साथ जुड़े दिनांकविकल्प विकल्प का मान निर्धारित करती है।

Syntax

$(".selector").datepicker( "option", "disabled", true );
9 विकल्प (विकल्प)

यह क्रिया दिनांक-निर्धारण के लिए एक या अधिक विकल्प सेट करती है।

Action - option( options )

यह क्रिया दिनांक-निर्धारण के लिए एक या अधिक विकल्प सेट करती है।

Syntax

$(".selector").datepicker("option", { disabled: true });
10 ताज़ा ()

कुछ बाहरी संशोधन करने के बाद, यह क्रिया दिनांक पिकर को फिर से तैयार करती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Action - refresh()

कुछ बाहरी संशोधन करने के बाद, यह क्रिया दिनांक पिकर को फिर से तैयार करती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Syntax

$(".selector").datepicker("refresh");
1 1 सेटडेट (दिनांक)

यह क्रिया निर्दिष्ट तिथि को दिनांक की वर्तमान तिथि के रूप में निर्धारित करती है।

Action - setDate()

यह क्रिया निर्दिष्ट तिथि को दिनांक की वर्तमान तिथि के रूप में निर्धारित करती है।

Syntax

$(".selector").datepicker("setDate", "10/12/2012");
12 प्रदर्शन()

यह क्रिया दिनांक पिकर खोलता है। यदि डेटपिकर किसी इनपुट से जुड़ा हुआ है, तो डेटपिकर को दिखाए जाने के लिए इनपुट दिखाई देना चाहिए। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Action - show()

यह क्रिया दिनांक पिकर खोलता है। यदि डेटपिकर किसी इनपुट से जुड़ा हुआ है, तो डेटपिकर को दिखाए जाने के लिए इनपुट दिखाई देना चाहिए। यह विधि किसी भी तर्क को स्वीकार नहीं करती है।

Syntax

$(".selector").datepicker("show");
13 विजेट ()

यह क्रिया एक jQuery ऑब्जेक्ट देता है जिसमें डेटकपर होता है।

Action - widget()

यह क्रिया एक jQuery ऑब्जेक्ट देता है जिसमें डेटकपर होता है।

Syntax

$(".selector").datepicker("widget");

निम्नलिखित उदाहरण उपरोक्त तालिका में सूचीबद्ध कुछ कार्यों का उपयोग दिखाते हैं।

सेटडेट () कार्रवाई का उपयोग

अब हम उपरोक्त तालिका से क्रियाओं का उपयोग करके एक उदाहरण देखते हैं। निम्न उदाहरण सेट किए गए कार्यों के उपयोग को दर्शाता है ।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-12" ).datepicker();
            $( "#datepicker-12" ).datepicker("setDate", "10w+1");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-12"></p>
   </body>
</html>

हमें एक HTML फ़ाइल में उपरोक्त कोड को बचाने के लिए datepickerexample.htm और इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा -

दिखावा () क्रिया का उपयोग

निम्न उदाहरण एक्शन शो के उपयोग को दर्शाता है ।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-13" ).datepicker(); $( "#datepicker-13" ).datepicker("show");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-13"></p>
   </body>
</html>

हमें एक HTML फ़ाइल में उपरोक्त कोड को बचाने के लिए datepickerexample.htm और इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा -

डेटपिकर तत्वों पर इवेंट मैनेजमेंट

अब तक कोई तारीख घटना के तरीके नहीं हैं!