JSFiddle - React, Tailwind, and code Playground

by Dave Salomon

HTML

<input type="date" placeholder="Pick a Date">
<input type="date" value="Pick a Date">

CSS

.datePlaceholder {
    position:absolute;
    font-family:Calibri;
    background-color:#fff;
}

JavaScript

$(document).ready(function () {
    var i = 0;

    $('input[type="date"]').each(function () {
        var str = '<div class="datePlaceholder" id="divph' + i + '">Choose a date</div>';
        $(this).after(str);
        var el = $('#divph' + i);

        var dateFieldPos = $(this).offset();
        el.css({
            top: dateFieldPos.top + 1,
            left: dateFieldPos.left + 1,
            width: $(this).width() + 1,
            height: $(this).height() + 1
        });
        var self = this;
        el.click(function () {
            $(this).hide();
            self.focus();
        });
        $(this).blur(function () {
            if (!$(this).val()) {
                el.show();
            } else {
                alert($(this).val());
            }
        });
        i++;

    });
});