How to make data input readonly, but showing calendar?

user_13884596 0
Viewed 392

I can't find any solution for this anywhere. I would like to allow user to see calendar when clicking on my input, but when user will try to change the value, it shouldn't change (or immediately change back for value, what was at the beggining).

Readonly attribute removes calendar, so I was trying to do it different ways like use onchange/onclick functions to restore my value after event, but the value was changing anyway.

So for now my input looks like this:

<input class='test' type='date' value='2020-06-04' onkeydown='return false' >

So at least user can't change value of my input using keyboard. Could you help me?

html jquery javascript
2 Answers

You might try to set a time limit

<html>
<body>
<input type="date" value="2020-06-04">
<input type="date" value="2020-06-04" min="2020-06-04" max="2020-06-04">

</body>
</html>

user_78178690

If I understood correctly, this is what you want.

HTML

<input class='test' type='date' value='2020-06-04' />

JavaScript

const date = "2020-06-04";
const input = document.querySelector('.test');

input.onkeydown = function(e) {
    return false;
}

input.onchange = function(e) {
    this.value = date;
}

Check out this JSFiddle

EDIT

function preventInputChange(input, staticValue) {
  input.onchange = function(e) {
    this.value = staticValue;
  }
}
user_137478480
Related