Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library


Category: HTML5 Codes Library >> Inputs >> United States of America Date & Time

Code Snippet </> Info

Snippet Name: United States of America Date & Time

Description: Check out the awesome HTML5 United States of America Date & Time Format INPUT alternative widgets.
Example: View Code Demo



Last Modified: 2015-08-26 22:19:59

Language: html5

Highlight Mode: html

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor

  About Copying

<!DOCTYPE html> <html xmlns="" 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=""></script> <![endif]--> <link href="" rel="stylesheet"> <script src=""></script> <script src=""></script> <link rel="stylesheet" href=""> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <link rel="stylesheet" type="text/css" href="" /> <script type="text/javascript" src=""></script> <script src=""></script> <link rel="stylesheet" type="text/css" media="screen" href="" /> <style> /* Begin HTML5 USA Date & Time Format Inputs */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The 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="">HTML5 USA Date & Time Format Inputs Code Snippet</a> page. ] </div> </div> </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library