अपने React.js ऐप में डेट पिकर जोड़ना इसकी उपयोगकर्ता-मित्रता को बेहतर बनाने का एक शानदार तरीका है। दिनांक पिकर उपयोगकर्ताओं को मैन्युअल रूप से दिनांक टाइप करने के बजाय, सीधे प्रपत्र फ़ील्ड में कैलेंडर से दिनांक का चयन करने की अनुमति देता है। यह आपके ऐप के उपयोगकर्ता अनुभव में काफी सुधार कर सकता है, जिससे उपयोगकर्ताओं के लिए आवश्यक तिथियों का चयन करना आसान हो जाता है।
आप मूल सुविधाओं का उपयोग करके या बाहरी लाइब्रेरी के साथ अपने React.js ऐप में डेट पिकर जोड़ सकते हैं।
डेट पिकर क्या है?
दिनांक पिकर एक इंटरफ़ेस तत्व है जो उपयोगकर्ता को कैलेंडर से दिनांक चुनने की अनुमति देता है।
यह आमतौर पर इसके बगल में एक कैलेंडर आइकन के साथ एक टेक्स्ट बॉक्स के रूप में दिखाई देता है, जिस पर क्लिक करने पर, एक कैलेंडर खुलता है जिससे उपयोगकर्ता एक तिथि का चयन कर सकता है। इसके बाद उपयोगकर्ता एप्लिकेशन के कॉन्फ़िगरेशन के आधार पर दिनांक टाइप कर सकता है या कैलेंडर से उसका चयन कर सकता है।
अपने React.js ऐप में डेट पिकर कैसे जोड़ें
आपके React.js एप्लिकेशन में डेट पिकर जोड़ने के कई तरीके हैं। इनमें मूल सुविधाओं का उपयोग करना और तृतीय-पक्ष पुस्तकालयों को एकीकृत करना शामिल है। आप अपने डेट पिकर में अतिरिक्त सुविधाएं भी जोड़ सकते हैं।
अंतर्निहित सुविधाओं का उपयोग करना
तुम कर सकते हो रिएक्ट हुक का उपयोग करें और मूल HTML5 दिनांक इनपुट प्रकार आपके एप्लिकेशन में दिनांक पिकर जोड़ने के लिए। यह डेट पिकर जोड़ने का एक सीधा तरीका है, क्योंकि इसके लिए किसी अतिरिक्त लाइब्रेरी या कोड की आवश्यकता नहीं है। हालाँकि, इसमें कुछ कमियाँ हैं, जैसे कि डिफ़ॉल्ट स्टाइलिंग और बुनियादी सुविधाओं की सीमाएँ।
आयात प्रतिक्रिया, {useRef, useState} से 'प्रतिक्रिया';कॉन्स्ट डेटपिकर = () => {
कॉन्स्ट [डेट, सेटडेट] = यूज़स्टेट ('');
कॉन्स्ट dateInputRef = useRef (व्यर्थ);
कॉन्स्ट हैंडल चेंज = (ई) => {
तारीख सेट करें(इ।लक्ष्य।कीमत);
};
वापस करना (
<डिव>
<इनपुट
टाइप ="तारीख"
ऑन चेंज = {हैंडल चेंज}
रेफ = {डेटइनपुट रिफ}
/>
<पी>चयनित तिथि: {दिनांक}</पी>
</div>
);
};
निर्यातगलती करना खजूर बीनने वाला;
दिनांक पिकर बनाने के लिए उपरोक्त कोड मूल HTML5 दिनांक इनपुट प्रकार का उपयोग करता है। यह चयनित दिनांक का ट्रैक रखने के लिए useState हुक का उपयोग करता है और दिनांक इनपुट फ़ील्ड का संदर्भ प्राप्त करने के लिए useRef हुक का उपयोग करता है। यह तब एक ऑन चेंज हैंडलर बनाता है जो उपयोगकर्ता द्वारा दिनांक का चयन करने पर दिनांक स्थिति को अपडेट करता है।
अंतर्निहित सुविधाओं का उपयोग करने के नुकसान
मूल HTML5 दिनांक इनपुट प्रकार का उपयोग करने का मुख्य नुकसान यह है कि यह कोई अतिरिक्त सुविधाएँ या अनुकूलन प्रदान नहीं करता है। यह डिफ़ॉल्ट सुविधाओं के एक छोटे सेट तक सीमित है और कोई अतिरिक्त विकल्प प्रदान नहीं करता है, जैसे कि तिथियों की एक सीमा का चयन करना।
जब आप इनपुट फ़ील्ड में स्टाइल जोड़ सकते हैं, तो कोई अतिरिक्त सुविधाएँ जोड़ना संभव नहीं है।
प्रतिक्रिया-डेटपिकर लाइब्रेरी का उपयोग करना
रिएक्ट-डेटपिकर लाइब्रेरी आपके React.js ऐप में डेट पिकर जोड़ने के लिए एक लोकप्रिय और व्यापक रूप से उपयोग की जाने वाली लाइब्रेरी है। यह विकल्पों और सुविधाओं की एक विस्तृत श्रृंखला प्रदान करता है, जैसे कि तिथियों की एक श्रृंखला का चयन करने, स्टाइल को अनुकूलित करने और अतिरिक्त सुविधाओं को जोड़ने की क्षमता।
आयात प्रतिक्रिया, {useState} से 'प्रतिक्रिया';
आयात खजूर बीनने वाला से 'प्रतिक्रिया-डेटपिकर';कॉन्स्ट डेटपिकर उदाहरण = () => {
कॉन्स्ट [स्टार्टडेट, सेटस्टार्टडेट] = यूज़स्टेट (नयातारीख());
वापस करना (
<खजूर बीनने वाला
चयनित = {प्रारंभ दिनांक}
ऑन चेंज = {तारीख => सेटस्टार्टडेट (तारीख)}
/>
);
};
निर्यातगलती करना डेटपिकर उदाहरण;
यह कोड डेट पिकर बनाने के लिए रिएक्ट-डेटपिकर लाइब्रेरी का उपयोग करता है। चयनित तिथि का ट्रैक रखने के लिए उपयोगस्टेट हुक का उपयोग करें और फिर इसे डेटपिकर घटक में पास करें। यह चयनित दिनांक के साथ दिनांक पिकर प्रस्तुत करेगा।
रिएक्ट-डेट-पिकर लाइब्रेरी का उपयोग करना
रिएक्ट-डेट-पिकर लाइब्रेरी आपके React.js ऐप में डेट पिकर जोड़ने के लिए एक अन्य लोकप्रिय लाइब्रेरी है। यह रिएक्ट-डेटपिकर लाइब्रेरी के समान सुविधाएँ और विकल्प प्रदान करता है, जैसे कि तिथियों की एक श्रृंखला का चयन करने, स्टाइल को अनुकूलित करने और अतिरिक्त सुविधाएँ जोड़ने की क्षमता। यदि आप अतिरिक्त सुविधाओं के साथ अधिक मजबूत तिथि चयनकर्ता की तलाश कर रहे हैं तो यह एक अच्छा विकल्प है।
आयात प्रतिक्रिया, {useState} से 'प्रतिक्रिया';
आयात खजूर बीनने वाला से 'प्रतिक्रिया-तारीख-पिकर';कॉन्स्ट डेटपिकर उदाहरण = () => {
कॉन्स्ट [स्टार्टडेट, सेटस्टार्टडेट] = यूज़स्टेट (नयातारीख());
वापस करना (
<खजूर बीनने वाला
मान = {प्रारंभ दिनांक}
ऑन चेंज = {तारीख => सेटस्टार्टडेट (तारीख)}
/>
);
};
निर्यातगलती करना डेटपिकर उदाहरण;
यह कोड डेट पिकर बनाने के लिए रिएक्ट-डेट-पिकर लाइब्रेरी का उपयोग करता है। यह पिछले कोड के समान है, लेकिन यह प्रतिक्रिया-डेटपिकर के बजाय प्रतिक्रिया-डेट-पिकर लाइब्रेरी का उपयोग करता है। यह लाइब्रेरी डेट-पिकर कैलेंडर में अलग-अलग स्टाइल और सुविधाएँ प्रदान करती है। आप CSS या का उपयोग करके कस्टम स्टाइलिंग भी जोड़ सकते हैं Tailwind जैसा CSS फ़्रेमवर्क.
अतिरिक्त सुविधाएँ जोड़ना
एक बार जब आप अपने React.js ऐप में डेट पिकर जोड़ लेते हैं, तो आप इसे अधिक उपयोगकर्ता के अनुकूल और सहज बनाने के लिए अतिरिक्त सुविधाएँ और विकल्प जोड़ सकते हैं। उदाहरण के लिए, आप तिथियों की एक श्रृंखला का चयन करने की क्षमता जोड़ सकते हैं, स्टाइल को अनुकूलित कर सकते हैं और समय चयन जैसी अतिरिक्त सुविधाएं जोड़ सकते हैं। आप यह सुनिश्चित करने के लिए कस्टम सत्यापन भी जोड़ सकते हैं कि उपयोगकर्ता एक वैध तिथि का चयन करता है।
आयात प्रतिक्रिया, {useState} से 'प्रतिक्रिया';
आयात खजूर बीनने वाला से 'प्रतिक्रिया-तारीख-पिकर';कॉन्स्ट डेटपिकर उदाहरण = () => {
कॉन्स्ट [स्टार्टडेट, सेटस्टार्टडेट] = यूज़स्टेट (नयातारीख());
कॉन्स्ट [एंडडेट, सेटएंडडेट] = यूज़स्टेट (नयातारीख());
वापस करना (
<डिव>
<खजूर बीनने वाला
मान = {प्रारंभ दिनांक}
ऑन चेंज = {तारीख => सेटस्टार्टडेट (तारीख)}
/>
<खजूर बीनने वाला
मूल्य = {समाप्ति}
ऑन चेंज = {तारीख => सेटएंडडेट (तारीख)}
/>
</div>
);
};
निर्यातगलती करना डेटपिकर उदाहरण;
यह कोड डेट पिकर बनाने के लिए रिएक्ट-डेट-पिकर लाइब्रेरी का उपयोग करता है। यह प्रारंभ तिथि और समाप्ति तिथि का ट्रैक रखने के लिए उपयोगस्टेट हुक का उपयोग करता है, उन्हें डेटपिकर घटकों में पास करता है। यह दो दिनांक चयनकर्ताओं को प्रस्तुत करेगा, एक आरंभ तिथि का चयन करने के लिए और एक समाप्ति तिथि चुनने के लिए।
आप यह सुनिश्चित करने के लिए कस्टम सत्यापन भी जोड़ सकते हैं कि उपयोगकर्ता एक वैध तिथि का चयन करता है। आप मान्य तिथियों की जांच करने के लिए ऑन चेंज इवेंट हैंडलर का उपयोग करके ऐसा कर सकते हैं और यदि उपयोगकर्ता अमान्य तिथि का चयन करता है तो एक त्रुटि संदेश प्रदर्शित करता है।
दिनांक चयनकर्ताओं के साथ उपयोगकर्ता सहभागिता में सुधार करें
दिनांक पिकर के साथ, उपयोगकर्ता अधिक विश्वसनीयता के साथ अधिक तेज़ी से दिनांकों का चयन कर सकते हैं। इससे उपयोगकर्ताओं के लिए आवश्यक तिथियों का चयन करना आसान हो जाता है, जिससे उनके द्वारा आपके एप्लिकेशन का उपयोग करने की संभावना बढ़ जाती है। इसके अलावा, आप अपने एप्लिकेशन के लुक और फील को फिट करने के लिए डेट पिकर को कस्टमाइज़ कर सकते हैं, जिससे यह अधिक उपयोगकर्ता के अनुकूल और सहज हो जाता है।
उपयोगकर्ताओं द्वारा मान्य दिनांक दर्ज करना सुनिश्चित करने के लिए आप अपने दिनांक चयनकर्ताओं और प्रपत्रों में सत्यापन भी जोड़ सकते हैं। यह उपयोगकर्ताओं को अमान्य तिथियों में प्रवेश करने से रोकने में सहायता करता है जो आपके आवेदन में त्रुटियों का कारण बन सकता है।