Disable calendar in the date field of mobile

You can do 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();

Completing. To remove the set that opens the Datapicker and Removing the set of step by step you can use this code.

Within @media you set the minimum screen value to apply the datapicker rule to 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 by preventing the use of the keys.

It would be something of the kind to prevent the user from opening the datapicker from the keyboard: NOTE: I tested this JS here, but kept opening ... I think you need to pack something in it, but the tip is!

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

Here are some other clarifications and options with jQuery: link