推荐文章标题: 使用React Native Modern Datepicker打造极致日期选择体验
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
const DatePickerComponent = () => {
const [date, setDate] = useState(new Date(1598062817709)); // 默认选中的日期
const [mode, setMode] = useState('date'); // 默认日期模式
const [show, setShow] = useState(false); // 控制日期选择器的显示与隐藏
const onChange = (event, selectedDate) => {
const currentDate = selectedDate || date;
setShow(false);
setDate(currentDate);
};
return (
<View>
<Button onPress={() => setShow(true)} title="选择日期" />
{show && (
<DateTimePicker
value={date}
mode={mode}
is24Hour={true} // 24小时制
onChange={onChange}
/>
)}
</View>
);
};
export default DatePickerComponent;
这段代码展示了如何在React Native应用中集成日期选择器组件,并允许用户选择日期。通过使用@react-native-community/datetimepicker
库,开发者可以方便地在移动应用中实现日期时间的选择功能。代码简洁,注释充足,对于学习React Native日期选择组件的开发者来说,是一个很好的示例。
评论已关闭