You Should Be Using Date & Time Inputs June 22, 2017

By doing the following, you instantly add support for date and time pickers on all (well mostly all) devices and operating systems:

<input type="time" placeholder="12:00am" />

<input type="date" placeholder="2016-10-10" />

One small caveat

The one issue you may notice with this approach is that the input placeholder attributes are no longer visible. This is sad indeed. Thankfully there is a workaround!

    h3 { margin-left: 10px; }

    input { 
        color: transparent; 
        display: block; 
        margin: 10px; 
        padding: 10px; 
    } 

    input:invalid:before { 
        color: grey; 
        content: attr(placeholder); 
        padding-left: 10px; 
        pointer-events: none; 
        position: absolute; 
        left: 20px; 
    } 

    input:valid, input:focus, input:active { 
        color: black; 
    }

    input:before { 
        display: none; 
    }