JSFiddle - React, Tailwind, and code Playground

by jfrej

HTML

WebKit standard:
<input type="date"/>
<br/>No spin buttons:
<input type="date" class="no-spin" />
<br/>No native calendar arrow:
<input type="date" class="no-calendar" />
<br/>No spin, no calendar visible:
<input type="date" class="unstyled" />
<br/>
<br/>Calendar completely disabled:
<input type="date" id="dateInput" class="unstyled" />

CSS

.no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.no-calendar::-webkit-calendar-picker-indicator {
    display: none;
}

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

JavaScript

dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);