React Native में डेट और टाइम पिकर कैसे प्रदर्शित करें

अपने ऐप में डेट और टाइम पिकर प्रदर्शित करने के लिए आपको नीचे दिखाए अनुसार एक पैकेज इंस्टॉल करना होगा:

npm install @react-native-community/datetimepicker --save

एक बार इंस्टॉलेशन पूरा हो जाने पर, आइए अब देखते हैं कि डेटपिकर पहले कैसे प्रदर्शित करें।

उदाहरण: React Native में DateTimePicker

पहले datetimepicker कंपोनेंट को इम्पोर्ट करें जैसा कि नीचे दिखाया गया है:

import DateTimePicker from '@react-native-community/datetimepicker';

एक बेसिक DateTimePicker कंपोनेंट इस प्रकार दिखता है:

<DateTimePicker testID="dateTimePicker" value={mydate} mode={displaymode} is24Hour={true} display="default" onChange={onChangeFunc} />

DateTimePicker की कुछ महत्वपूर्ण प्रॉपर्टीज यहां दी गई हैं।

हम अपने DateTimePicker में वर्तमान डेट का उपयोग करने जा रहे हैं। Mode को date पर सेट किया गया है:

const [mydate, setDate] = useState(new Date());
const [displaymode, setMode] = useState('date');

यहां DateTimePicker कंपोनेंट है:

<DateTimePicker
    value={mydate}
    mode={displaymode}
    is24Hour={true}
    display="default"
    onChange={changeSelectedDate} />

अब डेट पिकर प्रदर्शित करने का पूरा कोड:

उदाहरण

import React, {useState} from 'react';
import {View, Button, Platform, SafeAreaView , StyleSheet} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
export default function App() {
    const [mydate, setDate] = useState(new Date());
    const [displaymode, setMode] = useState('date');
    const [isDisplayDate, setShow] = useState(false);
    const changeSelectedDate = (event, selectedDate) => {
        const currentDate = selectedDate || mydate;
        setDate(currentDate);
    };
    const showMode = (currentMode) => {
        setShow(true);
        setMode(currentMode);
    };
    const displayDatepicker = () => {
        showMode('date');
    };
    return (
        
            
                
            
            {isDisplayDate && (
                
            )}
        
    );
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
});

आउटपुट

Show Date Picker बटन पर क्लिक करके पिकर देखें।

आइए अब टाइम पिकर देखते हैं।

हमें बस mode को time पर सेट करके प्रदर्शित करना है जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:

उदाहरण

import React, {useState} from 'react';
import {View, Button, Platform, SafeAreaView , StyleSheet} from 'reactnative';
import DateTimePicker from '@react-native-community/datetimepicker';
export default function App() {
    const [mydate, setDate] = useState(new Date());
    const [displaymode, setMode] = useState('time');
    const [isDisplayDate, setShow] = useState(false);
    const changeSelectedDate = (event, selectedDate) => {
        const currentDate = selectedDate || mydate;
        setDate(currentDate);
    };
    const showMode = (currentMode) => {
        setShow(true);
        setMode(currentMode);
    };
    const displayTimepicker = () => {
        showMode('time');
    };
    return (
        
            
                
            
            {isDisplayDate && (
                
            )}
        
    );
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
});

YOUR TIME PICKER button पर क्लिक करके टाइम पिकर देखें।