Disable calendar in mobile date field

Question

I am developing an HTML5 site and would like to know if it is possible to disable the date field calendar on mobile, forcing the user to type.

Answer 1

Completing. To remove the arrow that opens the Datapicker and Removing the adjustment arrows "step by step" you can use this code.

Within the @media vc puts the minimum screen value to apply the datapicker rule in the input. See in the example:

@media only screen and (max-width: 567px) {
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

<input type="date">

Now if you press Alt + Down Arrow The calendar continues to open. To fix this you would have to do a JS preventing the use of the keys.

It would be something like this to prevent the user from opening the datapicker on the keyboard: OBS: I tested this JS here, but continued opening... I think you need to fix something in it, but the tip is!

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

Here are other clarifications and options with jQuery: https://stackoverflow.com/questions/11270675/how-can-i-disable-the-new-chrome-html5-date-input

Answer 2

You can do it like this:

CSS

input::-webkit-calendar-picker-indicator{
    display: none;
}

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}

Using jQuery:

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();