React-datepicker: How to hide virtual keyboard on mobile device?

[wang3g]

I am using react-datepicker in my web page and it works well on desktop browser. However, when I open the webpage on the mobile phone or iPad and click the date input area, Android's or iOS's own virtual keyboard pops up,which blocks a part of calendar. How can I hide those virtual keyboards? Thanks!

[rafeememon]

We might be able to add readonly to the input, as suggested here: http://stackoverflow.com/questions/7610758/prevent-iphone-default-keyboard-when-focusing-an-input But this seems likely to break those who are using manual input.

[rafeememon]

Turns out we already have the (undocumented) readOnly property, which should help in this situation.

[martijnrusschen]

Shouldn't we document this somewhere? :)

On Wed, Feb 10, 2016 at 3:46 PM Rafee Memon [email protected]
wrote:

Closed #221 https://github.com/Hacker0x01/react-datepicker/issues/221.

—
Reply to this email directly or view it on GitHub
https://github.com/Hacker0x01/react-datepicker/issues/221#event-545852279
.

[uniphil]

We're using readOnly at the moment for its #itworks factor, but it would be nice to have this approach reviewed for accessibility. Are there users who need the keyboard input to work?

[rafeememon]

Maybe I closed this too soon =P

@uniphil, my thought process was that if a user wants to hide virtual keyboard (for whatever reason) they probably don't care about the user typing in a date, so readOnly would be safe.

If you're aiming to allow keyboard input when viewed on a desktop but still want to hide the virtual keyboard on mobile, I guess you could toggle the readOnly prop according to the browser/OS/etc. However I think this might fall beyond the scope of this library since it's so specific, but is still possible to implement with a browser-detection library and setting the prop accordingly.

Am I missing anything here?

[uniphil]

@rafeememon only thing missing is the input of someone with experience using alternate input methods on mobile devices. Hopefully the readOnly approach doesn't add any barriers! I'll throw up a test page, and see if I can find someone to review usability.

[rafeememon]

Agreed, we can settle this once and for all if someone with experience could take a look. Thanks for offering to help, let us know what you find out!

[rafeememon]

Closing for lack of activity and being sufficiently addressed for now

[preacher2041]

I need to implement this readonly functionality, how do I implement this readonly prop?

Thanks

[corse32]

I doubt this reply is useful after a year, but anyway - https://github.com/Hacker0x01/react-datepicker/blob/master/src/datepicker.jsx#L60 see the proptypes definition is bool, I think react itself expects these kinds of "trigger" HTML attributes to be a boolean prop, true = attribute, false = no attribute.

[ds82]

The readOnly workaround doesn't work any longer, because you are preventing the datepicker from showing altogether if readOnly=true. Is there another solution?

[ds82]

Found a workaround ..

const DatepickerInput = ({ ...props }) => (
  <input type="text" {...props} readOnly />
);

<DatePicker
  selected={localDatetime}
  withPortal
  customInput={<DatepickerInput />}
/>

[transcendr]

If you want to use readonly, you need to control the opening/closing of the datepicker manually. Try this implementation:

import React, { useState} from "react"
import DatePicker from "react-datepicker"

const SomeComponent = props => {
    const [datePickerOpen, setDatePickerOpen] = useState(false)

    const updateDate = date => {
        //do something with the date...
    }

    return ( 
        <div onClick={() => setDatePickerOpen(!datePickerOpen)}
            <DatePicker
              readOnly={true}
              onChange={date => {
                updateDate(date)
                setDatePickerOpen(false)
              }}
              onClickOutside={() => setDatePickerOpen(false)}
              open={datePickerOpen}
            />  
        </div>
    )
}

As a reminder, here are all the options available to you:

interface ReactDatePickerProps {
    adjustDateOnChange?: boolean;
    allowSameDay?: boolean;
    autoComplete?: string;
    autoFocus?: boolean;
    calendarClassName?: string;
    calendarContainer?(props: { children: React.ReactNode[] }): React.ReactNode;
    children?: React.ReactNode;
    className?: string;
    clearButtonTitle?: string;
    customInput?: React.ReactNode;
    customInputRef?: string;
    dateFormat?: string | string[];
    dateFormatCalendar?: string;
    dayClassName?(date: Date): string | null;
    disabled?: boolean;
    disabledKeyboardNavigation?: boolean;
    dropdownMode?: 'scroll' | 'select';
    endDate?: Date | null;
    excludeDates?: Date[];
    excludeTimes?: Date[];
    filterDate?(date: Date): boolean;
    fixedHeight?: boolean;
    forceShowMonthNavigation?: boolean;
    formatWeekDay?(date: Date): string;
    formatWeekNumber?(date: Date): string | number;
    highlightDates?: Array<HighlightDates|Date>;
    id?: string;
    includeDates?: Date[];
    includeTimes?: Date[];
    injectTimes?: Date[];
    inline?: boolean;
    isClearable?: boolean;
    locale?: string | Locale;
    maxDate?: Date | null;
    maxTime?: Date;
    minDate?: Date | null;
    minTime?: Date;
    monthsShown?: number;
    name?: string;
    nextMonthButtonLabel?: string;
    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
    onChange(date: Date | null, event: React.SyntheticEvent<any> | undefined): void;
    onChangeRaw?(event: React.FocusEvent<HTMLInputElement>): void;
    onClickOutside?(event: React.MouseEvent<HTMLDivElement>): void;
    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
    onInputClick?(): void;
    onInputError?(err: {code: number; msg: string}): void;
    onKeyDown?(event: React.KeyboardEvent<HTMLDivElement>): void;
    onMonthChange?(date: Date): void;
    onSelect?(date: Date, event: React.SyntheticEvent<any> | undefined): void;
    onWeekSelect?(firstDayOfWeek: Date, weekNumber: string | number, event: React.SyntheticEvent<any> | undefined): void;
    onYearChange?(date: Date): void;
    open?: boolean;
    openToDate?: Date;
    peekNextMonth?: boolean;
    placeholderText?: string;
    popperClassName?: string;
    popperContainer?(props: { children: React.ReactNode[] }): React.ReactNode;
    popperModifiers?: Popper.Modifiers;
    popperPlacement?: string;
    popperProps?: {};
    preventOpenOnFocus?: boolean;
    previousMonthButtonLabel?: string;
    readOnly?: boolean;
    renderCustomHeader?(params: {
        date: Date;
        changeYear(year: number): void;
        changeMonth(month: number): void;
        decreaseMonth(): void;
        increaseMonth(): void;
        prevMonthButtonDisabled: boolean;
        nextMonthButtonDisabled: boolean;
    }): React.ReactNode;
    renderDayContents?(dayOfMonth: number): React.ReactNode;
    required?: boolean;
    scrollableMonthYearDropdown?: boolean;
    scrollableYearDropdown?: boolean;
    selected?: Date | null;
    selectsEnd?: boolean;
    selectsStart?: boolean;
    shouldCloseOnSelect?: boolean;
    showDisabledMonthNavigation?: boolean;
    showMonthDropdown?: boolean;
    showMonthYearDropdown?: boolean;
    showMonthYearPicker?: boolean;
    showTimeSelect?: boolean;
    showTimeSelectOnly?: boolean;
    showWeekNumbers?: boolean;
    showYearDropdown?: boolean;
    startDate?: Date | null;
    startOpen?: boolean;
    strictParsing?: boolean;
    tabIndex?: number;
    timeCaption?: string;
    timeFormat?: string;
    timeIntervals?: number;
    title?: string;
    todayButton?: React.ReactNode;
    useShortMonthInDropdown?: boolean;
    useWeekdaysShort?: boolean;
    value?: string;
    weekLabel?: string;
    withPortal?: boolean;
    yearDropdownItemNumber?: number;
    timeInputLabel?: string;
    showTimeInput?: boolean;
    inlineFocusSelectedMonth?: boolean;
    onDayMouseEnter?: (date: Date) => void;
    onMonthMouseLeave?: () => void;
}