I’m trying to customize DatePickerInput component from react native paper dates : https://web-ridge.github.io/react-native-paper-dates/docs/date-picker/input-date-picker
The component creates a clickable which opens a modal on click. I want to customize the modal: text color, background of the selected dates …
Everything is in purple with the default theme.
I tried applying a lot of props including the theme prop:
<DatePickerInput
theme={{colors:
{
primary:"#4E73DF",
accent:"#4E73DF",
onSurface:"#4E73DF",
onBackground:"#4E73DF",
onPrimary:"#4E73DF",
surface:"#4E73DF",
backdrop: 'rgba(0, 0, 255, 0.2)',
onSurfaceVariant:"#4E73DF"
}}}
activeUnderlineColor="#4E73DF"
iconColor="#4E73DF"
locale="en"
label="Date de début"
style={{ backgroundColor: "white" }}
value={inputDate}
onChange={(d) => setInputDate(d)}
inputMode="start"
/>
Looking at the documentation / issues, but I cannot find something working for me.
1
the modal prop is set to a custom CustomModal component, which allows you to customize the styles and content of the modal.
import { Modal } from 'eact-native-paper';
const CustomModal = () => {
return (
<Modal
contentContainerStyle={{ backgroundColor: 'white' }}
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
>
{/* Your custom modal content here */}
</Modal>
);
};
<DatePickerInput
modal={CustomModal}
locale="en"
label="Date"
value={inputDate}
onChange={(d) => setInputDate(d)}
inputMode="start"
/>