使用 react native 和 expo 创建自定义日期选择器

Question

I would like to create a box to select the date as in the attached photo. What do you recommend to create something similar in react native with expo?

I tried using MUI's Mobile DatePicker API, but it doesn't work, errors occur.

Answer 1

https://www.npmjs.com/package/@react-native-community/datetimepicker

Works with Expo. Static version set at 3.xx (something version 3). So you won't have the full functionality that is described on their docs, but you'll have enough.

expo install @react-native-community/datetimepicker

instead of npm to ensure you get the compatible version.

This library can be a bit difficult to work with. The main suggestion I have for you is to create a custom component on your own that looks like your design. Then wrap it with a TouchableOpacity and onPress set the DateTimePicker to show its modal. Grab the value you need from the onChange result, and pass it to your local state. Dont try anything fancy after that because as I mentioned earlier, the library is difficult to work with and really fights hard against any customization. It works well though and will certainly solve your problem.