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.

yup, you can disable keydown event for that input – mohamedrias Apr 18 '15 at 09:58 — mohamedrias, Apr 18 '15 at 09:58

score 97 · Accepted Answer · answered Apr 18 '15 at 09:56

97

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

<input type="date" onkeydown="return false" />

answered Apr 18 '15 at 09:56

mohamedrias

18,326
2
38
47

3

the keyboard still popup – ColacX May 08 '17 at 08:41
1

I get this working by adding semi-colon at the end. I'm using Razor file. onkeydown="return false;" – user14181068 Apr 28 '23 at 03:10

score 36 · Answer 2 · answered Jan 23 '19 at 16:05

36

For ReactJS above solutions don't work

I had to do:

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

answered Jan 23 '19 at 16:05

François Hereng

361
3
2

This doesn't work on Firefox. – Zahir Masoodi Jun 20 '23 at 06:26

score 4 · Answer 3 · answered Oct 05 '18 at 07:41

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>

Irfan wani · Answer 4 · 2020-12-21T06:26:40.440

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.

score 0 · Answer 5 · answered Mar 08 '22 at 10:37

0

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

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

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

<input type="date">

answered Mar 08 '22 at 10:37

Minhaz

114
2
8

score 0 · Answer 6 · answered Mar 24 '23 at 11:10

If you are using third party libraies for controlling the input like react-hook-form means you have to include the onKeyDown on form control also then only you will prevent the onKeyDown on input type date.

    <Controller
                    onKeyDown={(e) => e.preventDefault()}
                    name="date"
                    control={control}
                    render={({ field, value }) => (
                        <Form.Control
                            value={value}
                            {...field}
                            onKeyDown={(e) => e.preventDefault()}
                            type="date"
                            id="date"
                            className="formcontrol"
                            placeholder="Pick the date"
                            
                        />
                    )}
                />

score -1 · Answer 7 · edited Jun 18 '23 at 05:14

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>

This is the complete example:

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

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

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

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

Hope, this may help you.

score -1 · Answer 8 · answered Sep 01 '21 at 14:22

-1

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.

answered Sep 01 '21 at 14:22

Marko

1

Please add further details to expand on your answer, such as working code or documentation citations. – Community Sep 01 '21 at 14:55
This is true if you are making the application for yourself, this goes out the window the second you start making it FOR someone, because their mandated requirements trump ease of use, ease of design, or even improbability of operation. – easleyfixed Nov 09 '22 at 17:47

HTML 5 Input type='date' disable keyboard input

8 Answers8

Linked

Related