United States of America Date & Time - Check out the awesome HTML5 United States of America 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 USA 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 USA 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>United States of America Format</b>
<div style="height: 5px; clear: both"></div>
<div class="w2ui-label"> Date: </div>
<div class="w2ui-field"> <input type="us-date" style="width: 100px"> </div>
<div class="w2ui-label"> From-To: </div>
<div class="w2ui-field"> <input type="us-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="us-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="us-date1" style="width: 100px"> - <input type="us-date2" style="width: 100px"> </div>
<div class="w2ui-label"> Time: </div>
<div class="w2ui-field"> <input type="us-time" style="width: 100px"> </div>
<div class="w2ui-label"> From-To: </div>
<div class="w2ui-field"> <input type="us-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();
// US Format
$('input[type=us-date]').w2field('date');
$('input[type=us-dateA]').w2field('date', { format: 'm/d/yyyy', start: month + '/10/' + year, end: month + '/20/' + year });
$('input[type=us-dateB]').w2field('date', { format: 'm/d/yyyy', blocked: [ month+'/12/2014',month+'/13/2014',month+'/14/' + year,]});
$('input[type=us-date1]').w2field('date', { format: 'm/d/yyyy', end: $('input[type=us-date2]') });
$('input[type=us-date2]').w2field('date', { format: 'm/d/yyyy', start: $('input[type=us-date1]') });
$('input[type=us-time]').w2field('time', { format: 'h12' });
$('input[type=us-timeA]').w2field('time', { format: 'h12', 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_166.html">HTML5 USA Date & Time Format Inputs Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|
Scroll