Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

97 lines (91 sloc) 4.906 kb
<!DOCTYPE html>
<html lang="en">
<head>
<!--meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQueryMobile - DateBox Demo</title>
<!--link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css" /-->
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="../css/jqm-datebox.css" rel="stylesheet" />
<!-- NOTE: Script load order is significant! -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<!--script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script-->
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="../demos/extras.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.core.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.calbox.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.datebox.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.flipbox.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.durationbox.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.slidebox.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.customflip.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.custombox.js"></script>
<script type="text/javascript" src="./jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script type="text/javascript">
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'usePlaceholder': true,
'useNewStyle': false
});
</script>
<style>
.ui-icon-dice { background-image: url('img/dice.png') !important; background-repeat: no-repeat; background-position: 99% 50%; }
</style>
</head>
<body>
<div data-role="page" data-theme="b" id="main">
<div data-role="header" data-position="fixed">
<h1>jQueryMobile - Dev Page</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="l1">l1</label>
<input name="l1" type="text" value="" data-role="datebox" data-options='{"mode": "timeflipbox", "useFocus": true, "centerHoriz":true, "themeHeader":"b", "themeDatePick":"b", "overrideTimeOutput": "%-I:%M %p"}' id="l1" />
</div>
<div data-role="fieldcontain">
<label for="lang1">calbox</label>
<input name="lang1" type="text" data-role="datebox" data-options='{"calShowWeek":true, "calUsePickers":true, "mode": "calbox"}' id="lang1" />
</div>
<div data-role="fieldcontain">
<label for="c2">custom box</label>
<input name="c2" type="text" data-role="datebox" data-options='{"mode": "custombox", "overrideStyleClass":"ui-icon-dice"}' id="c2" />
</div>
<div data-role="fieldcontain">
<label for="c1">custom flip</label>
<input name="c1" type="text" data-role="datebox" data-options='{"mode": "customflip", "overrideStyleClass":"ui-icon-dice"}' id="c1" />
</div>
<div data-role="fieldcontain">
<label for="aa1">text comparison</label>
<input name="aa1" type="text" id="aa1"/>
</div>
<div data-role="fieldcontain">
<label for="lang2">datebox</label>
<input name="lang2" type="text" data-role="datebox" data-options='{"mode": "datebox"}' id="lang2" />
</div>
<div data-role="fieldcontain">
<label for="lang3">flipbox</label>
<input name="lang3" type="text" data-role="datebox" data-options='{"mode": "flipbox"}' id="lang3" />
</div>
<div data-role="fieldcontain">
<label for="lang4">slidebox</label>
<input name="lang4" type="text" data-role="datebox" data-options='{"mode": "slidebox", "overrideSlideFieldOrder":["y","m","d","h","i"], "minuteStep": 10}' id="lang4" />
</div>
<div data-role="fieldcontain">
<label for="lang5">timebox</label>
<input name="lang5" type="text" data-role="datebox" data-options='{"mode": "timebox", "overrideTimeFieldOrder":["y","m","d","h","i","a"], "minuteStep": 10, "minuteStepRound": 0}' id="lang5" />
</div>
<div data-role="fieldcontain">
<label for="lang6">timeflipbox</label>
<input name="lang6" type="text" data-role="datebox" data-options='{"mode": "timeflipbox", "minuteStep": 10, "minuteStepRound": 0}' id="lang6" />
</div>
<div data-role="fieldcontain">
<label for="lang7">durationbox</label>
<input name="lang7" type="text" data-role="datebox" data-options='{"defaultValue":10232, "mode": "durationbox"}' id="lang7" />
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>Some Footer Information or Something.</h1>
</div>
</div>
</html>
Jump to Line
Something went wrong with that request. Please try again.