type date - input using only calendar picker HTML5

Question

Is there any way not to allow to edit date manually? I mean that I would like to force user to pick date using only calendar.

Having

<input type="date"   value="yyyy-mm-dd" class="input-medium search-query">

user can type in something into input form. I have tried to do this way:

<input type="date"   value="yyyy-mm-dd" class="input-medium search-query" disabled>

but it frozen the whole form.

Any hints? Or maybe is there any fast way to prevent user to break date format? (Because I use bootstrap I would not prefer to use jquery)

It may not be possible, but why take away this possibility in the first place? — Pekka
– Pekka, Commented Apr 24, 2013 at 15:59
1. You're damaging your own page's UX by removing basic UI that an user would expect; 2. You will simply turn your page unusable to browsers that do not support date inputs; 3. Do proper validation instead of relying on a client-side thing that can be easily bypassed. — Fabrício Matté
– Fabrício Matté, Commented Apr 24, 2013 at 16:04
@FabrícioMatté +1 thanks for good remarks. Indeed, validation seems to be a better solution. — JosephConrad
– JosephConrad, Commented Apr 24, 2013 at 16:09

George · Accepted Answer · 2013-04-24 15:59:41Z

13

You could return false when the user presses a key, if your prepared to throw a bit of JS in there:

<input type="date"   value="yyyy-mm-dd" class="input-medium search-query" onkeypress="return false">

answered Apr 24, 2013 at 15:59

George

36.9k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

is there a way to display whole name of month like January?

onkeypress="return false" doesn't prevent backspace but onkeydown="return false" does

MichaelJC · Accepted Answer · 2021-03-25 09:23:54Z

0

In old browsers, type=date is not supported and will degrade to type=text. Then, the onkeydown='return false' method will make input impossible.

answered Mar 25, 2021 at 9:23

MichaelJC

113 bronze badges