HTML 5 Input type='date' disable keyboard input

Question

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.

Answer 1

For ReactJS above solutions don't work

I had to do:

<input type="date" onKeyDown={(e) => e.preventDefault()} .... />

Answer 2

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>

Answer 3

If using django forms;

datetime = forms.DateTimeField(widget=forms.DateTimeInput(attrs={
            'onkeydown': 'return false' # If you want to disable the keyboard
            "onfocus": 'blur()' # If you also want to disable virtual keyboard(on smartphones).
        }))

OR

document.getElementById('id_datetime').onkeydown = (e) => {
    e.preventDefault();
}
document.getElementById('id_datetime').setAttribute('onfocus', 'blur()');

Django simply adds 'id' in front of the input field name and sets that as its id. Here the input field name is datetime, so the id will be id_datetime.

Answer 4

Easy Way To Enable & Disable Input Date:

Step 1: create input date.

<input type="date" id="dateEnd">

Step 2: create enable and disable button

<button onclick="disableBtn()">Disable Date Field</button>
<button onclick="undisableBtn()">Undisable Date Field</button>

Step 3: Javascript for enabling and disabling

<script>
function disableBtn() {
  document.getElementById("dateEnd").disabled = true;
}

function undisableBtn() {
  document.getElementById("dateEnd").disabled = false;
}
</script>

Hope, this may help you.

Answer 5

e.preventDefault() will do the job...

const inputDate = document.querySelector("input");

inputDate.addEventListener("keydown", function (e) {
  e.preventDefault();
});

<input type="date">

Answer 6

Disabling keyboard input is a great way to make your application less accessible to people with disabilities and make it less user friendly in general, in my opinion keyboard input is much easier to use than date pickers, especially if the expected format is clear. You'd be better off doing some basic field validation to ensure that the input is sensible before letting it be submitted, the HTML date field already has strong validation on it by default on Chrome Firefox and Edge.