react-native-web, DatePicker component?

Question

I was hoping to use https://github.com/xgfe/react-native-datepicker with react-native-web but it's not compatible I think.

Is there other library that offers native datepicker look as in the image which are compatible with react-native-web?

Answer 1

Something like this will work. You can call this component instead of the native one if you are on a web platform and it will use the default web date picker.

export default function DateTimePicker({ value, onChange }: Props) {
  
  return createElement('input', {
    type: 'date',
    value: value,
    onInput: onChange,
  })
}

Answer 2

one possibility is to write a native input with "date" type with the createElement function from react-native-web library like i did here with select and option tags: https://gist.github.com/orYoffe/1f5d1651bab5d477730aec317ed405fc

Then you would have native behaviour on mobile web and other native supported features

Answer 3

I was facing the same problem with "react-native-date-picker" but while searching for another web-compatible library I found the "react-native-paper-dates" which works perfectly fine in Android iOS and Web.

Answer 4

I created a very similar to @Kheva Mann solution, because I had some problem by the date display :

    const MyWebDatePicker = () => {
    const [date, setDate] = useState(new Date(Date.now()));


       return createElement('input', {
           type: 'date',
           value: date.toISOString().split("T")[0],
           onChange: (event) => {
             setDate(new Date(event.target.value))
             },
           style: {height: 30, padding: 5, border: "2px solid #677788", borderRadius: 5,  width: 250}
         })
    }