Datetimepicker: Which date picker should I use with expo, this or react-native-datepicker ?

[kopax]

Which date picker should I use with expo

I am reading https://docs.expo.io/versions/latest/sdk/date-time-picker/ and it seems that the current snack demo is outdated : https://snack.expo.io/@aboutreact/date-picker-example?session_id=snack-session-TT5a8E!7q

I would like to see it work, is there a way to update broken example or support snack using an old SDK ?

Also, I was only able to see a ios/android/web working but with a different project: https://github.com/xgfe/react-native-datepicker

There is even a working snack demo that work also for web: https://snack.expo.io/@aboutreact/date-picker-example?session_id=snack-session-TT5a8E!7q

It is on npm : https://www.npmjs.com/package/react-native-datepicker

So should I use the expo recommended one or the most recent and working one ?

related issues

• https://forums.expo.io/t/date-time-picker-demo-is-outdated/34899
• https://github.com/xgfe/react-native-datepicker/issues/410

Thanks in advance for advice,

[vonovak]

hello, you're mentioning some snack demo, but I'm not sure where you found it?

When using expo, please follow the installation instructions posted here https://docs.expo.io/versions/latest/sdk/date-time-picker/

as for https://github.com/xgfe/react-native-datepicker - it imports time and date pickers directly from RN, and those imports are deprecated. Also, see that

Latest commit
2a209bd
on 22 Apr 2018

that seems like a dead project to me, tbh

Hope this helps, thank you

[vonovak]

https://github.com/mmazzarolo/react-native-modal-datetime-picker seems like a good solution that builds on top of ours

[Nandinidoppalapudi]

Can I know what date picker we can use for both web, android and iOS in expo

[luancurti]

@Nandinidoppalapudi you can use datetimpicker see expo docs

[ltaljaard]

@Nandinidoppalapudi you can use datetimpicker see expo docs

Datetimepicker does not work on Expo Web. I was not able to find a decent one for Expo Web. The expo team should extend its functionality to work for Expo Web as well.

[jaelarmasm]

@Nandinidoppalapudi I was looking for something similar, but I could not find, what I did was use this package and add another one for the web, the package I used on the web is React Datepicker, it is quite cutomizable if you are interested

[AKclown]

https://github.com/mmazzarolo/react-native-modal-datetime-picker似乎是建立在我们基础之上的好解决方案

thanks

[himrocks33]

https://github.com/mmazzarolo/react-native-modal-datetime-picker seems like a good solution that builds on top of ours

@vonovak This library doesn't seem to support web either? Or does it just not specify that it does in the docs?

Thanks,

[ur-gh]

@himrocks33 I am also looking for similar web support.. Thanks for raising this. Did you have luck in finding one?

[himrocks33]

@ur-gh Hi, I was unable to find a react-native library that worked for all three platforms. What I ended up doing was use community/datetimepicker for iOS and Android. Then I create a platform specific file for my web component. .web.tsx. For my web component I used react-datepicker which is a reactjs library. I'll post the link to this below. This seemed to work well for me.

https://www.npmjs.com/package/react-datepicker

[ur-gh]

Thank you so much for quick response. I am curious how you navigate between web pages built using react native web and this date picker page using web.tsx.. Sorry prolly don't understand enough how to have both world working in react native..

[himrocks33]

So in my components directory I created two new files:
TmcDatePicker.tsx
TmcDatePicker.web.tsx

The first file exports a component using the community datetimepicker
The second file exports a component using react-datepicker
Both components take exactly the same properties, even if you may not need a property for one or the other

Then I just import the component where I need to use it on a screen as normal and use it:
import { TmcDatePicker } from '../../components/TmcDatePicker';

Notice I didn't specify the extension on the import. By doing this React Native will choose the correct Platform specific file extension for you. So if you are on the web it will choose .web.tsx else it will choose .tsx.

[ur-gh]

Got it thanks much.. I have been having similar issues with WebView as it
is not available in Web - so this gives me a good pointer to implement
something similar there as well.

On Thu, Sep 3, 2020 at 2:33 PM himrocks33 [e-mail] wrote:

So in my components directory I created two new files:
TmcDatePicker.tsx
TmcDatePicker.web.tsx

The first file exports a component using the community datetimepicker
The second file exports a component using react-datepicker
Both components take exactly the same properties, even if you may not need
a property for one or the other

Then I just import the component where I need to use it on a screen as
normal and use it:
import { TmcDatePicker } from '../../components/TmcDatePicker';

Notice I didn't specify the extension on the import. By doing this React
Native will choose the correct Platform specific file extension for you. So
if you are on the web it will choose .web.tsx else it will choose .tsx.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/react-native-community/datetimepicker/issues/137#issuecomment-686712802,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AOXZZUILXWOQKFXEZ2FLQ5TSD7VSHANCNFSM4LTMUO2Q
.

[nknaveen007]

@Nandinidoppalapudi can you please give me the sample code for react datepicker.