Call $(":date").dateinput() and your <input type="date" />'s will work. Here's one.
You can navigate between days with your Arrow Keys or with VIM keyboard shortcuts HJKL. Page UP/DOWN navigates between months and Enter selects the day. The Home key will navigate to the current day.
Here is the entire code for the above example:
<script src="/media/js/jquery.tools.min.js">
</script>
<!-- dateinput styling -->
<link rel="stylesheet" type="text/css" href="dateinput.css"/>
<!-- HTML5 date input -->
<input type="date" />
<!-- make it happen -->
<script>
$(":date").dateinput();
</script>
The HTML5 date input is now powered with jQuery Tools cross-browser dateinput that can be skinned with CSS. If we use a browser that supports date inputs natively, the input field's type is changed to text so that the native version is not disturbing us. It is only being displayed if JavaScript is disabled.
You need to place the script block after the HTML code or you can alternatively use jQuery's $(document).ready to execute the script as soon as the webpage's Document Object Model (DOM) has been loaded. Read more about that from the User's Manual.
Here we use following CSS file for the look and feel of the calendar control. Take a look at the skinning documentation to understand how it works.