Is there a way to disable typing/pasting into the date input and only allowing users to select from the date picker?

[poushy]

[rafeememon]

Use the readOnly prop: https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md

EDIT (Sept. 19, 2018): This behavior changed with https://github.com/Hacker0x01/react-datepicker/pull/1419, and this is no longer valid.

[vicky-blr]

I thought to use readOnly to make sure user can't paste something in this. If I use readOnly, required is not working for me. Any reasons why? Can we not use both together?

[KarloZKvasin]

In react-datepicker 1.6.0 - readOnly disabled all component. I can not select from the datepicker.

[steinarb]

I have the same experience as the previous poster: setting readOnly to true, prevented the date picker from popping up. Version 1.6.0 for me as well

[steinarb]

Looks like the new behaviour is intentional and new with 1.6.0, see https://github.com/Hacker0x01/react-datepicker/issues/1480#issuecomment-418777648

[vicky-blr]

Then is there any other option to disable typing/pasting directly into date-picker? Currently users can type texts as well in this. Obviously I can do verification by writing my custom logic but I'm just checking if there is already some flag that can disable manual typing or pasting something into this.

[RohitoOo]

@vicky-blr Please share your logic for validate dates

[vicky-blr]

@RohitoOo I'm just using required to make sure it not blank or null (like below)

<DatePicker minDate={minStartDate} maxDate={maxDate} selected={startDate} onChange={this.onChangeStartDate} required />

But as soon as I add readOnly (below), required is not working and its allowing blank value which is weird.

<DatePicker minDate={minStartDate} maxDate={maxDate} selected={startDate} onChange={this.onChangeStartDate} required readOnly />

[SandeepKapalawai]

the same issue with me and also until unless we don't strict the keyboard entering here, we have a write many validation conditions to check valid date entered and if there are any 2 fields like start date and end date, in this case, there are validations that need to write based on the comparison

[joe-oli]

as answered by @rafeememon and closed soon after, using 'readOnly' is not really an answer. It disables the whole component, including the popup calendar. What you can do is give the DatePicker component an id, then on componentDidMount use getElementById to find the embedded input element, and use JS to set it to .readOnly = true.

[rafeememon]

Reopening, as this behavior changed in #1419

[shellandbull]

I think its important to have an API where the end user is only allowed to select a date rather than manually inputting one. It guards us from input errors and odd behaviours

[daws]

I was able to get the desired behavior by adding a handler to onChangeRaw and preventing default:

handleDateChangeRaw = (e) => {
  e.preventDefault();
}

...

render() {
  ...
  <DatePicker onChangeRaw={this.handleDateChangeRaw} ... />
  ...
}

[vicky-blr]

I was able to get the desired behavior by adding a handler to onChangeRaw and preventing default:

handleDateChangeRaw = (e) => {
  e.preventDefault();
}

...

render() {
  ...
  <DatePicker onChangeRaw={this.handleDateChangeRaw} ... />
  ...
}

This gives expected behavior, thanks a lot for this option :)

[rbar2]

Any plans to add an option to allow only selecting a date as @mariogintili mentioned?

@daws's option works for desktop, but not for mobile since the keyboard still shows. The only way to prevent the keyboard from showing on mobile appears to be reverting to version 1.5.0

[Demonico]

I think its important to have an API where the end user is only allowed to select a date rather than manually inputting one. It guards us from input errors and odd behaviours

On the surface I want to agree with you but this excludes anyone that has trouble with a mouse/pointing device.

[charmstead]

Try this. works for me

const CustomInput = (props) => {
    return (
        <input
            className={[classes.TransparentInput, "uk-input"].join(" ")}
            onClick={props.onClick}
            value={props.value}
            type="text"
            readOnly={true}
        />
    )
}
<DatePicker
  customInput={<CustomInput />}
  name={'from'}
  value={values['from']}
  onChange={e => setFieldValue('from', moment(e).format('L'))}
 />

[mccombsr]

Ahh yes. Wilarz89, you are right, I scrolled right past that one and it never even occurred to me to look at it a bit closer, but changing it to a button instead of an input seems like the perfect solution. Thanks for sharing!

[gotkk]

Use component withPortal Let see more https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md

[dharmen1901]

I was able to get the desired behavior by adding a handler to onChangeRaw and preventing default:

handleDateChangeRaw = (e) => {
  e.preventDefault();
}

...

render() {
  ...
  <DatePicker onChangeRaw={this.handleDateChangeRaw} ... />
  ...
}

Thanks

[apnerve]

I was able to get the desired behavior by adding a handler to onChangeRaw and preventing default:

handleDateChangeRaw = (e) => {
  e.preventDefault();
}

...

render() {
  ...
  <DatePicker onChangeRaw={this.handleDateChangeRaw} ... />
  ...
}

I think this issue can be closed now as using onChangeRaw seems to be the right way to achieve the functionality we require. @rafeememon

[steinarb]

I think this issue can be closed now as using onChangeRaw seems to be the right way to achieve the functionality we require. @rafeememon

I think adding a handler onChangeRaw to get the desired behaviour (i.e. set the value from the calendar but not edit the date value) is a kludge.

[DinAlla]

My solution is:

1. Set readOnly for input
2. Set function for prop "onChangeRaw" like "e => e.preventDefault()"

[rayatemukund]

I used KeyboardDatePicker from material -

work around i create is -

onKeyPress={() => { this.handleKeypress(event)}}

//handle key press event handleKeypress = (e: Event) => { e.preventDefault(); return false }

It worked for me.

[thomath47D]

I used KeyboardDatePicker from material -

work around i create is -

onKeyPress={() => { this.handleKeypress(event)}}

//handle key press event handleKeypress = (e: Event) => { e.preventDefault(); return false }

It worked for me.

Tried all those solutions nothing works. But this work for me @rayatemukund Thanks man

[addiegupta]

Another option can be to use a custom input button

https://reactdatepicker.com/#example-custom-input

() => {
 const [startDate, setStartDate] = useState(new Date());
 const ExampleCustomInput = ({ value, onClick }) => (
   <button className="example-custom-input" onClick={onClick}>
     {value}
   </button>
 );
 return (
   <DatePicker
     selected={startDate}
     onChange={date => setStartDate(date)}
     customInput={<ExampleCustomInput />}
   />
 );
};

[OlegGedzjuns]

I was able to get the desired behavior by adding a handler to onChangeRaw and preventing default:

handleDateChangeRaw = (e) => {
  e.preventDefault();
}

...

render() {
  ...
  <DatePicker onChangeRaw={this.handleDateChangeRaw} ... />
  ...
}

Worked for me, thanks!

[LukaGiorgadze]

What about

<KeyboardDatePicker
    inputProps={{ readOnly: true }}
    ...

[max-programming]

I finally found out the solution. Hope it helps others

// Style the button as you want I was using a UI framework
<DatePicker
  customInput={<button>{date.toLocaleDateString()}</button>}
  selected={date}
  onChange={changeDate}
  required
  withPortal // your choice
/>

[arjunneeliyath]

### You just need to override the TextFieldComponent`.

import React from "react"; import ReactDOM from "react-dom"; import TextField from '@material-ui/core/TextField'; import { KeyboardDatePicker, MuiPickersUtilsProvider, } from "@material-ui/pickers"; import DateFnsUtils from '@date-io/date-fns';

const TextFieldComponent = (props) => { return <TextField {...props} disabled={true} /> } function App() { const [selectedDate, setSelectedDate] = React.useState( new Date("2014-08-18T21:11:54") ); const handleDateChange = date => { setSelectedDate(date); }; return ( <MuiPickersUtilsProvider utils={DateFnsUtils}> <KeyboardDatePicker disableToolbar variant="inline" format="MM/dd/yyyy" margin="normal" id="date-picker-inline" label="Date picker inline" value={selectedDate} onChange={handleDateChange} KeyboardButtonProps={{ "aria-label": "change date" }} TextFieldComponent={TextFieldComponent} /> </MuiPickersUtilsProvider> ); }

const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);###