Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm cách nào để hiển thị bộ chọn ngày và giờ trong ReactNative?

Để hiển thị bộ chọn ngày và giờ trong ứng dụng của bạn, bạn phải cài đặt một gói như hình dưới đây -

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

Sau khi bạn cài đặt xong, bây giờ chúng ta hãy tiến hành cách hiển thị Datepicker trước.

Ví dụ:DateTimePicker trong ReactNative

Trước tiên, hãy nhập thành phần datetimepicker như được hiển thị bên dưới -

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

Thành phần DateTimePicker cơ bản trông như sau -

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

Dưới đây là một số thuộc tính quan trọng của DateTimePicker.

Đạo cụ Mô tả
chế độ xác định loại bộ chọn bạn muốn. Các tùy chọn là ngày, giờ, ngày giờ và đếm ngược.
Từ các tùy chọn trên, datetime vàcountdown chỉ khả dụng trên iOS.
hiển thị Các giá trị cho Android là mặc định, vòng xoay, lịch và đồng hồ. Đối với iOS, các giá trị là mặc định, spinner, compact và inline.
giá trị Ngày hoặc giờ được sử dụng trong yourDateTimePicker.
onChange Sự kiện được gọi khi người dùng thay đổi ngày hoặc giờ.
MaximumDate Ngày tối đa được đặt trên thedatepicker.
Minimum Ngày Ngày tối thiểu được đặt trên thedatepicker.

Chúng tôi sẽ sử dụng Ngày hiện tại trong DateTimePicker của chúng tôi. Chế độ được đặt cập nhật như sau -

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

Đây là thành phần DateTimePicker -

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

Bây giờ là mã hoàn chỉnh để hiển thị Công cụ chọn ngày -

Ví dụ

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 (
   <SafeAreaView style={styles.container}>
      <View>
         <Button onPress={displayDatepicker} title="Show date picker!" />
            </View>
               {isDisplayDate && (
                  <DateTimePicker
                     testID="dateTimePicker"
                     value={mydate}
                     mode={displaymode}
                     is24Hour={true}
                     display="default"
                     onChange={changeSelectedDate}
            />
         )}
      </SafeAreaView>
   );
};
const styles = StyleSheet.create({
   container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center"
   },
});

Đầu ra

Làm cách nào để hiển thị bộ chọn ngày và giờ trong ReactNative?

Nhấp vào Hiển thị công cụ chọn ngày để xem Bộ chọn.

Bây giờ hãy để chúng tôi xem bộ chọn thời gian.

Chúng ta chỉ cần hiển thị chế độ theo thời gian như trong ví dụ bên dưới -

Ví dụ

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 (
      <SafeAreaView style={styles.container}>
         <View>
            <Button onPress={displayTimepicker} title="Your Time Picker" />
         </View>
         {isDisplayDate && (
            <DateTimePicker
               value={mydate}
               mode={displaymode}
               is24Hour={true}
               display="default"
               onChange={changeSelectedDate}
            />
         )}
      </SafeAreaView>
   );
};
const styles = StyleSheet.create({
   container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center"
   },
});

Làm cách nào để hiển thị bộ chọn ngày và giờ trong ReactNative?

Nhấp vào nút bấm THỜI GIAN CỦA BẠN để xem bộ chọn thời gian.