Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML 5 Input type='date' disable keyboard input

I am working on a Chrome Packaged App so my code should only work in Chrome.

I have the following input

<input type="date" />

https://jsfiddle.net/jhbo4q2k/

On Chrome this automatically adds a DatePicker. I would like to only keep this Datepicker and disable the input by keyboard.

Is this possible?

EDIT:

The accepted answer works. Just be wary of this

https://developer.chrome.com/extensions/tut_migration_to_manifest_v2#inline_scripts

You cant use inline scripts in a packaged app.

like image 408
b-m-f Avatar asked Apr 18 '15 09:04

b-m-f


People also ask

How do you stop typing in input type date?

< p >To disable the date field, double click the "Disable" button. // Set disabled = true.

How do I disable a calendar in HTML?

In short, you can set a min attribute on your <input> , and it will not allow dates before that minimum to be selected.

Is input Type date accessible?

Is there enough support for input type="date" to make it safe to use as part of an accessible website, or web based application? While some browsers have pretty good support for input type=”date”, including our accessibility requirements, our answer, sadly, has to be… “No”.


3 Answers

You can use onkeydown and prevent user from entering the value.

<input type="date" onkeydown="return false" />
like image 144
mohamedrias Avatar answered Oct 17 '22 05:10

mohamedrias


For ReactJS above solutions don't work

I had to do:

<input type="date" onKeyDown={(e) => e.preventDefault()} .... />
like image 31
François Hereng Avatar answered Oct 17 '22 05:10

François Hereng


Hi you can prevent keyboard popup by using onfocus="blur()". Since when the element has the focus we will remove the focus out of it(native keyboards won't show) however with onclick we can continue with our operations.

 <input type="date" class="form-control"  onfocus="blur()" onclick="dosomework()" name="some-name" id="some-id" >
<script>

function dosomework(){
 alert('hi');
 }

<script>
like image 4
Krishnamoorthy Acharya Avatar answered Oct 17 '22 06:10

Krishnamoorthy Acharya