Shadow Root Swap on <input>

by TJ VanToll

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="" rel="stylesheet">
<script src=""></script>
<script src=""></script>
    

<input type="date">

CSS

input {
    height: 2em;
    width: 15em;
}

body { padding-top: 4em; /* for embeddding spacing */

JavaScript

var dateRoot = document.querySelector( "input" )
    .createShadowRoot();

$( "input" ).datepicker({
    dateFormat: "yy-mm-dd",
    onSelect: function( dateText ) {
        dateRoot.innerHTML = dateText;
    }
});