EU Common Date & Time - Check out the awesome HTML5 EU Common Date & Time Format INPUT alternative widgets.
Example: View Code Demo
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>HTML5 EU Common Date & Time Format Inputs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link href="http://w2ui.com/web/css/bootstrap.css" rel="stylesheet"> <script src="http://w2ui.com/web/js/jquery-1.9.1.min.js"></script> <script src="http://w2ui.com/web/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://w2ui.com/web/js/CodeMirror/lib/codemirror.css"> <script src="http://w2ui.com/web/js/CodeMirror/lib/codemirror.js"></script> <script src="http://w2ui.com/web/js/CodeMirror/mode/javascript.js"></script> <script src="http://w2ui.com/web/js/CodeMirror/mode/htmlmixed.js"></script> <script src="http://w2ui.com/web/js/CodeMirror/mode/css.js"></script> <script src="http://w2ui.com/web/js/CodeMirror/mode/xml.js"></script> <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-fields-1.0.min.css" /> <script type="text/javascript" src="http://w2ui.com/src/w2ui-fields-1.0.min.js"></script> <script src="http://w2ui.com/web/pages/code-mirror.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://w2ui.com/web/js/font-awesome/font-awesome.css" /> <style> /* Begin HTML5 EU Common Date & Time Format Inputs */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;} #content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;} .w2ui-label {float:left; margin-top:6px; margin-bottom:3px; width:100px; padding:0px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; min-height:20px;} .w2ui-field {margin-bottom:3px; margin-left:108px; padding:3px; min-height:20px;} span.legend {padding-left:20px; color:#888;} </style> </head> <body> <div id="content"> <h2>Date and Time</h2> <b>EU Common Format</b> <div style="height: 5px; clear: both"></div> <div class="w2ui-label"> Date: </div> <div class="w2ui-field"> <input type="eu-date" style="width: 100px"> </div> <div class="w2ui-label"> From-To: </div> <div class="w2ui-field"> <input type="eu-dateA" style="width: 100px"> <span class="legend">(from 10th to 20th of current month)</span></div> <div class="w2ui-label"> Blocked Days: </div> <div class="w2ui-field"> <input type="eu-dateB" style="width: 100px"> <span class="legend">(12,13,14 of current month are blocked)</span></div> <div class="w2ui-label"> Date Range: </div> <div class="w2ui-field"> <input type="eu-date1" style="width: 100px"> - <input type="eu-date2" style="width: 100px"> </div> <div class="w2ui-label"> Time: </div> <div class="w2ui-field"> <input type="eu-time" style="width: 100px"> </div> <div class="w2ui-label"> From-To: </div> <div class="w2ui-field"> <input type="eu-timeA" style="width: 100px"> <span class="legend">(from 8:00 am to 4:30 pm)</span></div> <div style="height: 20px; clear: both"></div> <script> $(function () { var month = (new Date()).getMonth() + 1; var year = (new Date()).getFullYear(); // EU Common Format $('input[type=eu-date]').w2field('date', { format: 'd.m.yyyy' }); $('input[type=eu-dateA]').w2field('date', { format: 'd.m.yyyy', start: '10.' + month + '.' + year, end: '20.' + month + '.' + year }); $('input[type=eu-dateB]').w2field('date', { format: 'd.m.yyyy', blocked: ['12.' + month + '.' + year, '13.' + month + '.' + year, '14.' + month + '.' + year]}); $('input[type=eu-date1]').w2field('date', { format: 'd.m.yyyy', end: $('input[type=eu-date2]') }); $('input[type=eu-date2]').w2field('date', { format: 'd.m.yyyy', start: $('input[type=eu-date1]') }); $('input[type=eu-time]').w2field('time', { format: 'h24' }); $('input[type=eu-timeA]').w2field('time', { format: 'h24', start: '8:00 am', end: '4:30 pm' }); }); </script> <br /><br /> <div id="code"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_167.html">HTML5 EU Common Date & Time Format Inputs Code Snippet</a> page. ] </div> </div> </body> </html>