javascript – Implementing Dynamic Date Picker Activation in React for iOS Utilizing an Enter Facade

I have to create a date enter discipline that helps additionally Safari iOS(13+) since in Google, Edge, and so on the “placeholder” on Date enter doesn’t present “any textual content”, it might swap the enter sort dynamically from textual content thus far.

The code under works on Android, Google, Edge, as anticipated, however NOT iOS.

// facade element that renders a date enter together with your `placeholder`.
perform CustomizedDateInput(placeholder) {
    const [isFocused, setIsFocused] = useState()
    const dateRef = useRef(null)

    const handleDateFormat = () = > {
        dateRef.present.sort="textual content"
        //... different logic to format my textual content
    }

    useEffect(() => {
        if (!dateRef.present) return
        
        if (isFocused) {
            dateRef.present.sort="date"
            return
        }
        
        handleDateFormat()
    }, [])

    const handleFocus = () => {setFocused(true)}

    return (
        <enter 
          ref={dateRef}
          sort="date" 
          placeholder={placeholder} 
          onFocus={handleFocus}>
        />
    )
}

Different posts like html5-date-picker-doesnt-show-on-safari, and input-type-date-appearance-in-safari-on-ios helped to determine a option to make it work on different browsers and gadgets, however for iOS, when the consumer clicks the enter, the keyboard exhibits as an alternative of the datePicker itself. Since I have to cowl iOS 13+ some HTML strategies, like `showPicker` won’t work for me. I additionally tried stopping default, altering the enter sort by utilizing onFocus, onClick, however nothing workedout.