Keyboard typing inside html 5 date picker not enabling after css override

user_4060595 0
Viewed 853

I was facing issue with one of the HTML5 date picker wherein I wanted to open it on click inside input text box - Open HTML5 date picker inside input box click

For which one of the user had suggested a fix here but wanted to keep the existing functionality of the HTML5 date picker where I can also type in the date using keyboard.

Please find the css that was used to override the date picker. Any leads on enabling keyboard typing for the existing picker..

I tried doing this <input type="date" onkeydown="return true" /> but didn't work.

    input[type="date"] {
        position: relative;
    }
    
    /* create a new arrow, because we are going to mess up the native one
    see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
    input[type="date"]:after {
        content: "\25BC"; 
        color: #555;
        padding: 0 10px;
    }
    
    /* change color of symbol on hover */
    input[type="date"]:hover:after {
        color: #bf1400;
    }
    
    /* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
    
    input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        top: 0;
        left: 0px;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        color: transparent;
        background: transparent;
    }
    
    /* adjust increase/decrease button */
    input[type="date"]::-webkit-inner-spin-button {
        z-index: 1;
    }
    
     /* adjust clear button */
     input[type="date"]::-webkit-clear-button {
         z-index: 1;
     }
datepicker date css html javascript
2 Answers

If you mean something like this DEMO IS HERE.

HTML:

<input type="text" name="startDate" id="datePick" class="input--small"  onkeydown="myFunc()" />

CSS:

input[type="date"] {
    position: relative;
}

input[type="date"]:after {
    content: "\25BC"; 
    color: #555;
    padding: 0 10px;
}

/* change color of symbol on hover */input[type="date"]:hover:after {
    color: #bf1400;
}


input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 10px;
    left: 0px;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}

 input[type="date"]::-webkit-clear-button {
     z-index: 1;
 }

JS:

function myFunc(){
document.getElementById('datePick').type = 'date';
  
}
user_100021420

In HTML 5, you cannot type in a <input type="date">. As far as I am aware, there is no way to enable this.

user_137100150
Related