How to take the scroll out of an input date field?

Question

I have an input date field, when I change the date and continue to focus on the field, if I use the scroll, the date changes. I need to disable this scroll when the field has selected.

Answer 1

Good, you can disable the field input pattern input="date" with Javascript, for example.

let campoInput = window.document.querySelectorAll("input[type=date]");
for(let i = 0; i < campoInput.length; i++){
  campoInput[i].addEventListener("wheel", function(event)
  {
     event.preventDefault();
  })
}

label {display: block;margin-top:10px}

<label for="campo1">Campo 1</label>
<input type="date" name="" id="campo1">
<label for="campo2">Campo 2</label>
<input type="date" name="" id="campo2">
<label for="campo3">Campo 3</label>
<input type="date" name="" id="campo3">

In the code snippet above we have a variable campoInput that selects all the input guy date and places them in an array and in it is added an event with the addEventListener and the event is wheel that is triggered when the mouse wheel is rolled. And then it will call an anonymous function by disabling the field input pattern input="date" which is to scroll the mouse scroll and change the date.

A better way to do this script is with the loop for each, however, not supported in some browsers like IE. Follow:

let campoInput = window.document.querySelectorAll("input[type=date]");

campoInput.forEach(input =>{
    input.addEventListener("wheel", function(event);
})

Answer 2

You can try to solve with javascript

$('#seuForm').on('focus', 'input[type=date]', function (e) {
  $(this).on('mousewheel.disableScroll', function (e) {
  e.preventDefault()
  })
})

*{font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;}
input[type=date] {display: block;margin-bottom:10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="seuform" action="/action_page.php">
  Teste: <input type="date" name="teste">
  Teste 2: <input type="date" name="teste2">
  Teste 4: <input type="date" name="teste3">
  Teste 5: <input type="date" name="teste4">
  <input type="submit">
</form>