JSFiddle - React, Tailwind, and code Playground

HTML

<h1>HTML Datepicker</h1>
<h2>Features</h2>
<ul>
    <li>Easy to read</li>
    <li>Easy to understand</li>
    <li>Accessible</li>
    <li>Keyboard compatible</li>
    <li>tab compatible (You can browse the fields with the tab key)</li>
    <li>Small (only one line of text)</li>
    <li>TouchEvents compatible (works on iPad and even Android)</li>
    <li>Static (doesn't change position event the selected month have more days</li>
    <li>Starting week day agnostic (compatible with weeks starting on monday, sunday or even Friday)</li>
    <li><strong>450 bytes</strong> <span title="pbpaste | gzip | wc -c">with compression</span> ( that is 0.45kb )</li>
    <li>User tested</li>
    <li>Looks like a date selector, where the user could think that he needs to pick a date</li>
</ul>
<h2>Things to improve</h2>
<ul>
    <li>Validation are done server side</li>
    <li>Errors need and external plugin called <code>div</code>to properly show the errors</li>
</ul>
<h2>Example</h2>
<form>
<label>Year
<select name="user[calendar(1i)]">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option selected="selected" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
</label>

<label>Month
<select id="user_calendar_2i" name="user[calendar(2i)]">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option selected="selected" value="11">November</option>
<option value="12">December</option>
</select>
</label>
   ...

CSS

* {
    font-family: Arial;
    line-height: 20px;
}


p {
    margin-bottom: 20px;
}

li {
    line-height: 20px;
}
h1,h2 {
    margin-bottom: 10px;
    margin-top: 20px;
}

span {
    border-bottom: 1px dotted gray;
}

JavaScript

function htmlEntities(str) {
    return (""+str).replace(/&/g, '&amp;').
        replace(/</g, '&lt;').
        replace(/>/g, '&gt;').
        replace(/"/g, '&quot;');
}

document.getElementById("code").innerHTML = htmlEntities(document.getElementsByTagName("form")[0].innerHTML);