React-native-modal-datetime-picker: Web support

[nandorojo]

Ask your Question

Are there plans to support web? It would be awesome to have a universal date picker that also works on web.

[mmazzarolo]

Hey,
That sounds like a nice idea. I know the community picker supports Windows, but I don't see any plan to support the web anytime soon... We could still build it directly in this project, but at the same time I'm wondering if showing a date/time picker in a modal is a nice UX on the web 🤔

[jpca999]

we need the picker working on web ++

[mmazzarolo]

we need the picker working on web ++

PRs, ideas, and suggestions are welcome!

[nandorojo]

I agree a modal _might_ not be the best UX on web. But if it is, react-native-web supports modals now. Perhaps a native input with a simple date picker could be a good start for web, or some sort of popover using react-native-popover-view. Whatever feels simplest.

[nandorojo]

Here is an example of a nice modal picker on web: https://material-ui.com/components/pickers/ Could just fall back to that on web for now?

[mmazzarolo]

I'd go for a native solution like this one https://codepen.io/getify/pen/LYZbaGj?editors=1111, which looks native on the web both on desktop and mobile

[nandorojo]

That's true. It doesn't have as much browser support, but I think the native input makes sense.

[ltaljaard]

I'd go for a native solution like this one https://codepen.io/getify/pen/LYZbaGj?editors=1111, which looks native on the web both on desktop and mobile

The native support is not there for browsers like Safari (the underlying "input" control falls back to text-only on such browsers) so I wouldn't go that route until all browsers have caught up.

I am now using react-datepicker in my web solution which is not terrible, maybe you can just wrap that to add web support for now: https://www.npmjs.com/package/react-datepicker

It can run in inline mode as well as in portal mode (modal-like), there are a few tricks to get it working properly but not too bad and now that it works it looks quite good compared to the other things i've tried. I can share that code if you're interested.

[nandorojo]

Yeah that'd be great if you could share, I had some trouble with it when I tried it. Don't love the design but it's simple.

[ltaljaard]

I'll just sum it up here. This is for an Expo Web app which will then work on the mobile as well as web.

Add these to your project (in addition to react-native-modal-datetime-picker):

npm i react-datepicker
npm i @date-io/[email protected] date-fns
npm i react-popper @popperjs/core

Import this at the top of your main form:
import {DateTimePickerModal as MobileDateTimePickerModal} from "react-native-modal-datetime-picker"; import ReactDatePicker from "react-datepicker"; import "ReactDatePicker_CSSHelper";
The above CSS helper import is to get around the general silliness with regards to import/require and discrepancies between what works on the mobile vs the web app. Add the following two files to your project with the contents as below:

File 1: filename must be "ReactDatePicker_CSSHelper.js":
import * as css from "react-datepicker/dist/react-datepicker.css"; export default css;

File 2: filename must be "ReactDatePicker_CSSHelper.native.js":
export default undefined;

The state stuff at the top of your main form:
const initialState = { model: new <your data model here e.g. as defined in schema.graphql or just your own class, your class must include a field called date1, mine is of type AWSDateTime>({ }), ...<whatever else you want to initialize in the initial state>... };

The state stuff declared at the top inside the function() {...} block:
const [formState, updateFormState] = useState(initialState); const [isMobileDatePickerVisible_date1, setMobileDatePickerVisibility_date1] = useState(false);

Add these functions to your main form inside the function() {...} block:
function setFormState_model(key, value) { updateFormState({...formState, model: {...formState.model, [key]: value } }); } const WebDatePicker_date1_CustomTimeInput = ({ date, value, onChange }) => ( <ReactDatePicker selected={formState.model.date1!=undefined ? new Date(formState.model.date1) : new Date()} onChange={selectedDati => { setFormState_model("date1", selectedDati.toISOString()) }} showTimeSelect showTimeSelectOnly timeIntervals={1} timeCaption="Time" dateFormat="HH:mm" timeFormat="HH:mm" /> ); const showMobileDatePicker_date1 = () => { setMobileDatePickerVisibility_date1(true); }; const hideMobileDatePicker_date1 = () => { setMobileDatePickerVisibility_date1(false); }; const handleMobileDatePickerConfirm_date1 = date => { setFormState_model("date1", date.toLocaleString()); hideMobileDatePicker_date1(); }; function _DateTimePicker_date1() { if(Platform.OS === "ios" || Platform.OS === "android") { return( <View> <MobileDateTimePickerModal isVisible={isMobileDatePickerVisible_date1} onConfirm={handleMobileDatePickerConfirm_date1} onCancel={hideMobileDatePicker_date1} mode={"datetime"} is24Hour={true} date={formState.model.date1!=undefined ? new Date(formState.model.date1) : new Date()} value={formState.model.date1} /> <Text style={[globalStyles.detailsLabel]}>Label for date1</Text> <Input disabled={true} onTouchEnd={()=>{showMobileDatePicker_date1(); console.log({touchEnd:"touchEnd"});}} placeholder="Placeholder text for date1" value={formState.model.date1} style={globalStyles.detailsLabel} /> </View> ); } else { return( <View> <Text style={[globalStyles.detailsLabel]}>Label for date1</Text> <div> <ReactDatePicker portalId="root-portal" selected={ formState.model.date1!=undefined ? new Date(formState.model.date1) : new Date() } onChange={ selectedDati => { setFormState_model("date1", selectedDati.toISOString()); } } peekNextMonth showMonthDropdown showYearDropdown dropdownMode="select" todayButton="Today" timeIntervals={1} customTimeInput={<WebDatePicker_date1_CustomTimeInput/>} showTimeInput dateFormat="yyyy/MM/dd HH:mm" /> </div> </View> ); } }

In your main form's return statement:
return ( <View> <ScrollView> {_DateTimePicker_date1()} </ScrollView> </View> );

@mmazzarolo I'm pretty sure the above could easily be pulled into react-native-modal-datetime-picker to provide Expo Web support.

[mmazzarolo]

Very happy we're having this discussion 💥

Let me ask you all a question: why do you feel adding support for the web to this component would be a good idea?
Since those examples aren't using a modal (it's more of a popover, right?), wouldn't it make more sense if the support was added to the community datetimepicker instead -- which already supports a similar solution for Windows?

To clarify: I'm __not__ against adding support for it here 👍 I'm just wondering if it's the right approach or not, given that what this modal datetimepicker is doing is just wrapping the community picker and expose it into a unified modal-UI.

[ltaljaard]

I hear you, i think maybe it does not belong inside either of these because they are both based on native - and the react-datepicker is not native.

Actually i think it would make most sense to create a new component based on the code i sent earlier which then uses react- native-modal-datetimepicker for mobile and react-datepicker for the web.

The purpose of such a component would simply be to provide a reasonable out-of-the-box component that people can use in an Expo Web / React Native Web app which works from the mobile as well as from the web. Because currently there is nothing even close to decent and cross-browser out there that does both, at least none that i could find. What do you think?

[mmazzarolo]

i think maybe it does not belong inside either of these because they are both based on native

I don't see this as the main problem in all honesty. I think the "native" word in the react-native ecosystem is more scoped to the platform where the code itself run... meaning for the web it will be JS, which is fine.
My concern here is just that react-native-modal-datetimepicker is focused on showing the content on a modal... and the more I think about it, the more I think the approach on the web is leaning toward a popover-like style (which would be totally out-of-scope in this repo).
I feel that react-native-datetimepicker _might_ suit better this use case. That said, I'm pretty sure the maintainers there are quite busy nowadays, so this is something that should be kickstarted by who's interested in it (while still pinging the maintainers beforehand).
Just my 2 cents.

[ltaljaard]

Ok, but i mean the true web native control for picking a date is the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date - which is not supported by all modern browsers. So react-datepicker is not the actual native thing. But maybe that doesn't matter that much.

But anyway i just thought i would share my code as i struggled a bit to get it working. I don't have the time right now to do a separate wrapper for it but i think it would work well, so if anyone else wants to run with it please feel free.

I have added a reference to this thread on the react-native-datetimepicker project: https://github.com/react-native-datetimepicker/datetimepicker/issues/318. Maybe they will consider incorporating it there.

[nandorojo]

My concern here is just that react-native-modal-datetimepicker is focused on showing the content on a modal.

I've come to agree with this.

I have tried a number of web date pickers in the past few days. Materials UI's has been the best one to use on web for a number of reasons.

1) great developer experience, easy to use, and the API is very similar to this package
2) the design is great
3) perhaps most importantly, the modal behavior on web feels very consistent with the modal behavior on other devices when used with this library.

I understand the motivation to use a native HTML date picker to stay closer to the browser's api. That said, I think such a picker belongs in @react-native-community's picker. (Turns out the HTML picker has terrible browser support so I maybe still wouldn't use it there, but in principle, that's where it belongs.)

This library is a modal date time picker, and it should have a modal experience on all platforms IMO. The material UI one is very smooth, lightweight, and has a design that's consistent with this modal picker.

[khevamann]

Just wanted to put this out there as of Oct 22 Safari now supports the date, time, and date-time picker. So they are fully supported across all browsers except IE. I am using the web-native date pickers and think it's the way to go. However, I would agree that maybe it doesn't belong in this repo.

[nandorojo]

Relevant package: https://github.com/web-ridge/react-native-paper-dates

[nigranac]

...

[mmazzarolo]

Hey @nigranac ! This is not the right place to discuss your issue :) Please ask on Stackoverflow, thanks!