अपने ऐप में दिनांक और समय पिकर प्रदर्शित करने के लिए आपको एक पैकेज स्थापित करना होगा जैसा कि नीचे दिखाया गया है -
npm इंस्टाल @react-native-community/datetimepicker --save
एक बार जब आप इंस्टॉल कर लेते हैं, तो आइए अब आगे बढ़ते हैं कि पहले डेटपिकर को कैसे प्रदर्शित किया जाए।
उदाहरण:ReactNative में DateTimePicker
पहले डेटाटाइमपिकर घटक आयात करें जैसा कि नीचे दिखाया गया है -
'@react-native-community/datetimepicker' से डेटटाइम पिकर आयात करें;
एक मूल डेटटाइम पिकर घटक इस प्रकार दिखता है -
डेटटाइम पिकर के कुछ महत्वपूर्ण गुण यहां दिए गए हैं।
| Props | विवरण |
|---|---|
| मोड | आपके इच्छित पिकर के प्रकार को परिभाषित करता है। विकल्प दिनांक, समय, दिनांक समय और उलटी गिनती हैं। उपरोक्त विकल्पों में से डेटाटाइम और काउंटडाउन केवल आईओएस पर उपलब्ध हैं। |
| प्रदर्शन | Android के लिए मान डिफ़ॉल्ट, स्पिनर, कैलेंडर और घड़ी हैं। आईओएस के लिए मान डिफ़ॉल्ट, स्पिनर, कॉम्पैक्ट और इनलाइन हैं। |
| मान | आपकेDateTimePicker में उपयोग की जाने वाली तिथि या समय। |
| परिवर्तन पर | इवेंट को तब कहा जाता है जब उपयोगकर्ता द्वारा दिनांक या समय बदल दिया जाता है। |
| अधिकतमदिनांक | डेटपिकर पर सेट की जाने वाली अधिकतम तिथि। |
| न्यूनतम दिनांक | डेटपिकर पर सेट की जाने वाली न्यूनतम तिथि। |
हम अपने डेटटाइम पिकर में वर्तमान तिथि का उपयोग करने जा रहे हैं। आज का मोड इस प्रकार सेट किया गया है -
const [mydate, setDate] =useState(new date());const [displaymode, setMode] =useState('date'); यहां डेटटाइम पिकर घटक है -
अब दिनांक पिकर प्रदर्शित करने के लिए पूरा कोड -
उदाहरण
<पूर्व>आयात प्रतिक्रिया, {useState} 'प्रतिक्रिया' से; आयात {देखें, बटन, प्लेटफ़ॉर्म, SafeAreaView, StyleSheet} 'प्रतिक्रिया-मूल' से; '@ प्रतिक्रिया-मूल-समुदाय/datetimepicker' से डेटटाइम पिकर आयात करें; निर्यात डिफ़ॉल्ट फ़ंक्शन ऐप () { const [mydate, setDate] =useState (नई तिथि ()); कॉन्स [डिस्प्लेमोड, सेटमोड] =यूज़स्टेट ('दिनांक'); const [isDisplayDate, setShow] =useState(false); कॉन्स्ट चेंज सिलेक्टेडडेट =(इवेंट, सिलेक्टेडडेट) => {कॉन्स्ट करंटडेट =सिलेक्टेडडेट || मेरी तारीख; setDate(currentDate);};const showMode =(currentMode) => {setShow(true); setMode(currentMode);};const displayDatepicker =() => {showMode('date');};return (आउटपुट
दिनांक पिकर दिखाएं पर क्लिक करें पिकर देखने के लिए बटन।
आइए अब टाइम पिकर देखें।
हमें बस समय-समय पर मोड प्रदर्शित करना है जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है -
उदाहरण
<पूर्व>आयात प्रतिक्रिया, {useState} 'प्रतिक्रिया' से; आयात {देखें, बटन, प्लेटफ़ॉर्म, SafeAreaView, StyleSheet} 'reactnative' से; '@ प्रतिक्रिया-मूल-समुदाय/datetimepicker' से डेटटाइम पिकर आयात करें; निर्यात डिफ़ॉल्ट फ़ंक्शन ऐप ( ) { const [mydate, setDate] =useState (नई तिथि ()); कॉन्स [डिस्प्लेमोड, सेटमोड] =यूज़स्टेट ('टाइम'); const [isDisplayDate, setShow] =useState(false); कॉन्स्ट चेंज सिलेक्टेडडेट =(इवेंट, सिलेक्टेडडेट) => {कॉन्स्ट करंटडेट =सिलेक्टेडडेट || मेरी तारीख; सेटडेट (वर्तमान दिनांक); }; कॉन्स्ट शोमोड =(करंटमोड) => {सेटशो (सच); सेटमोड (वर्तमान मोड); }; कॉन्स्ट डिस्प्लेटाइमपिकर =() => {शोमोड ('टाइम'); }; वापसी (
आपका टाइम पिकर बटन पर क्लिक करें टाइम पिकर देखने के लिए।