JSFiddle - React, Tailwind, and code Playground

by Chitkala More

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<input type="text" data-date="" data-date-format="MM/DD/YYYY" value="2015-08-09">

CSS

input {
    position: relative;
    width: 150px; height: 20px;
   /*color: white;*/
}

input:before {
    position: fixed;
    top: 30px;
    left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

/* input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none;
} */

input::-webkit-calendar-picker-indicator {
    /* position: fixed; */
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
}

JavaScript

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
        .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")