0

I want to create an input field where the user can input the date. But I want to enter it only using keyboard. Can I prevent the default date picker from opening, which opens when I tap or click on the input field?

<input type="date" id="pickerFromDate" placeholder="dd-mm-yyyy" name="pickerFromDate" min="1900-01-01" max="2100-01-01">
Rajeev Jeganathan
  • 1

2 Answers2

0

All you need is an <input type="text"> as it still can hold a date but just not as a date object: 

<input type="text" placeholder="dd-mm-yy">

For more style:

let x = 0, l = 0, original = "dd-mm-yy";
function redirect(elem) {
  elem.focus();
}
function log(el) {
  let str = el.innerText,
  end = document.getElementById("end"),
  newtxt = "", texxt = el.innerText + "c", len = str.length;
  
  let orig = original + "c";
  newtxt = orig.slice(len, -1);
  
  end.innerText = newtxt;
}
#inp {
  width: 200px;
  height: 20px;
  border: 1px solid lightgrey;
  font-family: Arial;
} #end {
  color: grey;
} #date:focus {
  outline: none;
}
<div id="inp" onclick="redirect(document.getElementById('date'))">
<span id="date" onkeyup="log(this)" contenteditable></span><span id="end">dd-mm-yy</span>
</div>
Angshu31
  • 1,172
  • 1
  • 8
  • 19
  • While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – leopal Feb 07 '20 at 14:12
0

you can use pattern with text input.

<input type="text" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />

Or you can add below code in style file (.scss) to hide calendar picker indicator.

[type="date"]::-webkit-calendar-picker-indicator {
      display: none;
    }

Hope this helps you.

Ema.jar
  • 2,370
  • 1
  • 33
  • 43
Ganga
  • 41
  • 3