Day.js का उपयोग करके रिएक्ट में दिनांक और समय प्रबंधन कैसे करें

दिनांक और समय प्रबंधन किसी भी एप्लिकेशन के लिए महत्वपूर्ण है, और रिएक्ट कोई अपवाद नहीं है। जबकि जावास्क्रिप्ट अंतर्निहित दिनांक और समय हेरफेर कार्य प्रदान करता है, वे बोझिल हो सकते हैं। सौभाग्य से, कई तृतीय-पक्ष पुस्तकालय रिएक्ट में दिनांक और समय प्रबंधन को आसान बना सकते हैं। ऐसी ही एक लाइब्रेरी है Day.js.

Day.js जावास्क्रिप्ट में पार्सिंग, सत्यापन, हेरफेर और स्वरूपण दिनांक और समय के लिए एक हल्का पुस्तकालय है।

स्थापित कर रहा है Day.js

डे.जे.एस पुस्तकालय एक आधुनिक विकल्प है Moment.js, जो दिनांक और समय को संभालने के लिए उपयोग की जाने वाली एक अन्य लाइब्रेरी है. Day.js कम पदचिह्न और तेज़ प्रदर्शन के साथ समान API प्रदान करता है।

अपने रिएक्ट एप्लिकेशन में Day.js का उपयोग करने के लिए, आपको पहले इसे इंस्टॉल करना होगा। आप अपने टर्मिनल में निम्न कमांड चलाकर ऐसा कर सकते हैं:

एनपीएम स्थापित करें

पार्सिंग और स्वरूपण दिनांक और समय

Day.js प्रदान करता है एक साधारण एपीआई पार्सिंग और स्वरूपण तिथियों के लिए। आप का उपयोग करके दिनांक और समय प्राप्त कर सकते हैं

दिनज () विधि, लेकिन पहले, आपको इसे Day.js लाइब्रेरी से आयात करना होगा।

उदाहरण के लिए:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात js से'dayjs';
समारोहअनुप्रयोग() {
कॉन्स्ट दिनांक = दिनज ();
सांत्वना देनालॉग (तारीख); 
वापस करना (



तारीख और समय प्रबंधन</p>
 </div>
 )
}
निर्यातगलती करना अनुप्रयोग

दिनज () विधि एक विशिष्ट दिनांक और समय का प्रतिनिधित्व करने वाला एक नया Day.js ऑब्जेक्ट बनाता है। उपरोक्त उदाहरण में, दिनज () विधि वर्तमान दिनांक और समय का प्रतिनिधित्व करने वाला Day.js ऑब्जेक्ट बनाती है।

आपके कंसोल में, Day.js ऑब्जेक्ट इस तरह दिखाई देगा:

दिनज () विधि एक वैकल्पिक दिनांक तर्क स्वीकार करती है जो एक स्ट्रिंग, एक संख्या (यूनिक्स टाइमस्टैम्प) हो सकती है, एक जावास्क्रिप्ट दिनांक वस्तु, या अन्य Day.js वस्तु। विधि निर्दिष्ट दिनांक तर्क का प्रतिनिधित्व करने वाला एक Day.js ऑब्जेक्ट उत्पन्न करेगी।

उदाहरण के लिए:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात js से'dayjs';
समारोहअनुप्रयोग() {
कॉन्स्ट तारीख = दिनज ('2023-05-01');
सांत्वना देनालॉग (तारीख); // Day.js ऑब्जेक्ट निर्दिष्ट तिथि का प्रतिनिधित्व करता है
कॉन्स्ट यूनिक्सडेट = दिनज (1651382400000);
सांत्वना देनालॉग (यूनिक्सडेट); // Day.js ऑब्जेक्ट निर्दिष्ट तिथि का प्रतिनिधित्व करता है
वापस करना (



तारीख और समय प्रबंधन</p>
 </div>
 )
}
निर्यातगलती करना अनुप्रयोग

इस कोड ब्लॉक का Day.js ऑब्जेक्ट का आउटपुट पिछले कोड ब्लॉक के समान होगा लेकिन अलग-अलग प्रॉपर्टी वैल्यू होंगे।

Day.js ऑब्जेक्ट के रूप में जनरेट की गई तारीखों को प्रदर्शित करने के लिए, आपको इसका उपयोग करने की आवश्यकता है प्रारूप() तरीका। प्रारूप() Day.js लाइब्रेरी की विधि आपको एक विशिष्ट प्रारूप स्ट्रिंग के अनुसार एक Day.js ऑब्जेक्ट को एक स्ट्रिंग के रूप में स्वरूपित करने की अनुमति देती है।

विधि एक प्रारूप स्ट्रिंग को इसके तर्क के रूप में लेती है। स्ट्रिंग तर्क में अक्षरों और विशेष वर्णों का संयोजन शामिल हो सकता है, प्रत्येक एक विशिष्ट अर्थ के साथ,

उदाहरण के लिए:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात js से'dayjs';
समारोहअनुप्रयोग() {
कॉन्स्ट तारीख = दिनज ('2023-05-01')।प्रारूप('dddd, MMMM D, YYYY'); // सोमवार, 1 मई, 2023
कॉन्स्ट समय = दिनज ()। प्रारूप ('एचएच: मिमी: एसएस'); //09:50:23
कॉन्स्ट यूनिक्सडेट = दिनज (1651382400000)।प्रारूप('माह/दिन/वर्ष'); // 05/01/22
वापस करना (



{दिनांक</p>

{यूनिक्सडेट</p>

{समय</p>
 </div>
 )
}
निर्यातगलती करना अनुप्रयोग

तारीख वेरिएबल इस प्रारूप में दिनांक प्रदर्शित करेगा 'बुधवार, 26 अप्रैल, 2023'। प्रारूप स्ट्रिंग है 'dddd, MMMM D, YYYY' कहाँ ddd सप्ताह का दिन है, एमएमएमएम शब्दों में महीना है, डी महीने का दिन एक या दो अंकों में है, और YYYY वर्ष चार अंकों में है।

unixDate चर को प्रारूप स्ट्रिंग का उपयोग करके एक स्ट्रिंग के रूप में स्वरूपित किया जाता है 'माह/दिन/वर्ष,' जो महीने को दो अंकों में, महीने के दिन को दो अंकों में और वर्ष को चार अंकों में दर्शाता है।

समय चर वर्तमान समय को निर्दिष्ट प्रारूप में प्रदर्शित करता है। प्रारूप स्ट्रिंग है 'एचएच: मिमी: एसएस' जहां एचएच घंटे का प्रतिनिधित्व करता है मिमी मिनटों का प्रतिनिधित्व करता है, और एस एस सेकंड का प्रतिनिधित्व करता है।

दिनांक और समय में हेरफेर करना

Day.js कई तरीके प्रदान करता है जो दिनांक और समय में हेरफेर करना आसान बनाता है। आप इसका उल्लेख कर सकते हैं डे.जे.एस दिनांक और समय में हेरफेर करने के लिए उपलब्ध विधियों की पूरी सूची प्राप्त करने के लिए आधिकारिक दस्तावेज़ीकरण।

उदाहरण के लिए:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात js से'dayjs';
समारोहअनुप्रयोग() {
कॉन्स्ट दिनांक = दिनज ()। जोड़ें (7,'दिन')।प्रारूप('dddd, MMMM D, YYYY'); // बुधवार, 16 जून, 2023 
कॉन्स्ट समय = दिनज ()। घटाना (2, 'घंटे')।प्रारूप('एचएच: मिमी: एसएस'); // 07:53:00
वापस करना (



{दिनांक</p>

{समय</p>
 </div>
 )
}
निर्यातगलती करना अनुप्रयोग

उपरोक्त कोड ब्लॉक का उपयोग करता है जोड़ना() वर्तमान तिथि में 7 दिन जोड़ने की विधि। जोड़ना() विधि आपको Day.js ऑब्जेक्ट में निर्दिष्ट समय जोड़ने की अनुमति देती है। विधि दो तर्क लेती है, संख्याओं में जोड़ने के लिए समय की मात्रा और जोड़ने के लिए समय की इकाई।

साथ घटाना () विधि, आप से एक निर्दिष्ट समय घटा सकते हैं डे.जे.एस वस्तु। समय चर का उपयोग करके वर्तमान समय से 2 घंटे घटाता है घटाना () तरीका।

सापेक्ष समय प्रदर्शित करना

Day.js सहित कई तरीके प्रदान करता है अभी से(), अभी के लिए(), को(), और से() सापेक्ष समय प्रदर्शित करने के लिए, जैसे "2 घंटे पहले" या "3 दिनों में"। इन विधियों का उपयोग करने के लिए आयात करें सापेक्ष समय प्लगइन से dayjs/प्लगइन/सापेक्ष समय आपके रिएक्ट एप्लिकेशन में।

उदाहरण के लिए:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात js से'dayjs';
आयात सापेक्ष समय से'dayjs/प्लगइन/सापेक्ष समय';
समारोहअनुप्रयोग() {
 dayjs.extend (सापेक्ष समय);

कॉन्स्ट दिनांक = दिनज ()। जोड़ें (7, 'दिन')
कॉन्स्ट सापेक्ष दिनांक = दिनांक। अब से (); // 7 दिनों में
कॉन्स्ट date2 = dayjs ()। घटाना (2, 'घंटे');
कॉन्स्ट सापेक्ष दिनांक 2 = दिनांक 2. से अब (); // 2 घंटे में
कॉन्स्ट पिछला साल = दिनज ()। घटाना (1, 'वर्ष');
कॉन्स्ट अंतर = दिनांक। से (पिछले वर्ष); // एक वर्ष में
कॉन्स्ट diff2 = date.to (पिछले वर्ष) // एक साल पहले
वापस करना (



{सापेक्षतारीख }</p>

{सापेक्षतारीख2</p>

{ अंतर/p>

{diff2</p>
 </div>
 )
}
निर्यातगलती करना अनुप्रयोग

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

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

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

ध्यान दें, आप एक वैकल्पिक बूलियन तर्क में भी पारित कर सकते हैं अभी से(), अभी के लिए(), से(), और को() यह निर्दिष्ट करने के तरीके कि प्रत्यय को शामिल करना है या बाहर करना है (उदाहरण के लिए "पहले" या "में")।

उदाहरण के लिए:

कॉन्स्ट दिनांक = दिनज ()। जोड़ें (7, 'दिन')
कॉन्स्ट सापेक्ष दिनांक = दिनांक.अब से (सत्य); // 7 दिन
कॉन्स्ट date2 = dayjs ()। घटाना (2, 'घंटे');
कॉन्स्ट सापेक्ष दिनांक 2 = दिनांक 2. से अब (सत्य); // 2 घंटे
कॉन्स्ट पिछला साल = दिनज ()। घटाना (1, 'वर्ष');
कॉन्स्ट अंतर = दिनांक.से (पिछले साल, सत्य) // एक साल
कॉन्स्ट diff2 = date.to (पिछला साल, सत्य) // एक साल

पासिंग असत्य तर्क के लिए प्रत्यय के साथ दिनांक प्रदर्शित करेगा।

दिनांक और समय को प्रभावी ढंग से प्रबंधित करना

दिनांक और समय का प्रबंधन किसी भी एप्लिकेशन का एक महत्वपूर्ण पहलू है, और Day.js रिएक्ट एप्लिकेशन में इन कार्यों को संभालने के लिए उपयोग में आसान और लचीली लाइब्रेरी प्रदान करता है। अपने प्रोजेक्ट में Day.js को शामिल करके, आप आसानी से दिनांक और समय को प्रारूपित कर सकते हैं, स्ट्रिंग्स को पार्स कर सकते हैं और अवधियों में हेरफेर कर सकते हैं।

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