I like using Metro UI CSS FW. I have moved all my websites on sunamo.cz . over to it. But there is one thing about it that annoys me quite often: imperfect documentation. Take a look, for example, at 👻 This URL stopped leading anywhere long ago – the GPS lost its signal for good.. This page shows that first of all you need to add references to these JS files: metro-calendar.js and metro-datepicker.js. Then we can start writing the HTML code:
<div>
<input type="text">
<button class="btn-date"> </button>
</div>Then we add the JavaScript code:
<script>
$("#datepicker").datepicker();
</script>And that should be all it takes to make it work, at least according to the documentation. Wrong! The JavaScript code is correct, but the div has to look at least like this:
<div>
<input type="text">
<button class="btn-date" type="button"> </button>
</div>I added datepicker twice to the attributes of the div – this lets you pick a date by clicking into the input field (not just the button with the calendar icon). Then I added type="button" to the <button> – this keeps the button from reloading the page instead of showing the calendar.