Single date picker selection not working in web #492
Description
Current behaviour
I'm trying to use DatePickerModal with single selection. When I open the modal I see the a calendar of the current month's days, but trying to select a day just opens the year selection so I'm not able to actually pick a date. Additionally the date that gets passed to onConfirm is undefined.
This is the case when I pass in a date or leave the prop blank.
This is only an issue with mode="single", and the normal text input in the modal still works.
Expected behaviour
The date picker modal to be able to select a date.
How to reproduce?
Here's the most stripped down code that I've ran.
import { useState } from 'react';
import { AppRegistry } from 'react-native';
import { Button, PaperProvider } from 'react-native-paper';
import { registerTranslation, en, DatePickerModal } from 'react-native-paper-dates'
registerTranslation('en', en);
const root = document.getElementById('root');
if (!root) {
throw new Error('Failed to mount react');
}
function App() {
const [open, setOpen] = useState<boolean>(false);
return (
<PaperProvider>
<Button onPress={() => { setOpen(true) }}>press me</Button>
<DatePickerModal
locale="en"
mode="single"
visible={open}
onConfirm={(d) => {
console.log(d)
setOpen(false)
}}
onDismiss={() => { setOpen(false) }}
/>
</PaperProvider>
);
}
AppRegistry.registerComponent('App', () => App);
AppRegistry.runApplication('App', { rootTag: root });Preview
Here's a recording of what's happening. Not really apparent, but there were a few clicks on the number 5 where nothing happened (it's not interactive because that spot is the gap between year buttons).
Screen.Recording.2025-08-18.at.6.49.02.PM.mov
What have you tried so far?
From inspecting the DOM and keeping track of exactly where the mouse icon changes, it seems like it's displaying the day picker but the year selection is getting rendered invisibly and overlaying the day buttons. When a year is selected it alternates between being visible and invisible.
Your Environment
I'm using react-native-web bundled with Vite instead of through Expo. I haven't tested with Expo, but I don't think my setup is doing anything wildly different than plain Expo for web.
| software | version |
|---|---|
| react-native | 0.80.2 |
| react-native-web | 0.21.0 |
| react-native-paper | 5.14.5 |
| node | 20.19.0 |
| npm | 11.5.2 |
| vite | 6.3.5 |