Disable manually typing in date/time

[tylerzika]

[ ] Bug report [x] Feature request [x] Support request

I'd like it to be: when the user inputs the date/time, they can only make changes by using the pop out calendar/clock. Allowing them to type it in manually is prone to errors.

[rikkit]

isn't this what the input option is for? just set it to false.

[tylerzika]

@rikkit, that's is not what input currently does. When I set it to false, it completely hides the input field.

Setting input to false.

Setting input to true.

[rikkit]

Whether to show an input field to edit the date manually.

Sorry, I guess I interpreted it wrong, I thought the option referred to the text input field i.e. html input element.

Would CSS work for you?

.rdt input {
  display: none;
}

[AtomicAlienZ]

@tylerzika wouldn't readOnly input prop solve your problem or am I missing some use case?

[jpmoyn]

@tylerzika check this issue and see if it helps.

[tylerzika]

@AtomicAlienZ see below.

@jpmoyn this is what my component looks like

<ReactDateTime
   onChange={sendDateTime => this.updateSurveySentRecord({target: {name: "SEO__Survey_Sent__c", value: sendDateTime}})}
   className="slds-datepicker"
   closeOnSelect={true}
   value={this.state.sendDateTime}
   readOnly={true}
 />

and look what I can still do...

😕

[jpmoyn]

@tylerzika if you followed the link i sent you should have seen that the syntax for the specific input props is inputProps={{readOnly: true}}, not just readOnly={true}. That will fix your problem.

[tylerzika]

@jpmoyn thanks, sorry I didn't look at it right, I thought inputProps was a variable... Works perfectly!

[mouradmamassi]

you can add in your input this attribut onkeydown="return false"

[otelom]

@mouradmamassi I can't make it work, can you show me some code?

[mouradmamassi]

@otelom Yes off course this is my code //HTML <input type="text" id="datefin_search" onkeydown="return false"> //JS var mycalanderfin = new dhtmlXCalendarObject(["datefin_search"]);

[otelom]

@mouradmamassi I'm using this code and I do not understand how exactly should I apply your code suggestion in react js.

[otelom]

@mouradmamassi, I'm using react-datetime for ReactJS

Com os melhores cumprimentos, Otelo Magalhães

2018-02-14 15:23 GMT+00:00 Mourad MAMASSI notifications@github.com:

@otelom https://github.com/otelom Are you using datepicker for reactJS ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/YouCanBookMe/react-datetime/issues/339#issuecomment-365640767, or mute the thread https://github.com/notifications/unsubscribe-auth/AMMknt_buoHtekc7WGd8cbWV5jAEarmaks5tUvqKgaJpZM4NoDSW .

[mouradmamassi]

@otelom I hope this method can do the job for you ;) https://codepen.io/anon/pen/jZGEXX?editors=1111

[otelom]

@mouradmamassi Thanks, that did the job. But I'm using ES6 so it was a little bit different but after I adapted it worked. Thanks again ;)

[mouradmamassi]

@otelom you're welcome

[adish1997]

If you want to want it to remain clickable/editable but just disable input via keyboard you can try React: <input type="date" onKeyDown={(e) => e.preventDefault()} .... />

HTML: