我需要从react-native-paper实现日期选择器,开始日期和结束日期,我需要从日历中选择日期。
这是我需要实现的设计
我创造了这个,但它不一样。
import * as React from 'react';
import { Button } from 'react-native-paper';
import { DateTimePickerModal } from 'react-native-paper-datetimepicker';
function SingleDatePage() {
const [visible, setVisible] = React.useState(false);
const onDismiss = React.useCallback(() => {
setVisible(false);
}, [setVisible]);
const onChange = React.useCallback(({ date }) => {
setVisible(false);
console.log({ date });
}, []);
const date = new Date();
return (
<>
<DateTimePickerModal
visible={visible}
onDismiss={onDismiss}
date={date}
onConfirm={onChange}
label="Pick A Date"
/>
<TextInput value={date.toLocaleString()} />
<IconButton
iconPath={require('@assets/icons/calendar.png')}
type="solid"
borderColor="yellow" onPress={() => setVisible(true)}>Pick date</IconButton>
</>
);
}
用这个密码我得到了这个
2条答案
按热度按时间v8wbuo2f1#
我推荐使用https://github.com/react-native-datetimepicker/datetimepicker#usage,因为React Native Paper遵循Material UI设计和大量的样式,这些样式在库中被硬编码。
mpgws1up2#
使用toLocaleDateString()代替toLocaleString()
在代码中,更改:
<TextInput value={date.toLocaleString()} />
到
<TextInput value={date.toLocaleDateString()} />
世博小吃链接:https://snack.expo.dev/@prime4567/datepicker-with-tolocaledatestring?platform=android
参考:https://www.w3schools.com/jsref/jsref_obj_date.asp