Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
108 lines (97 sloc) 5.09 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/latest/jquery.mobile.css" rel="stylesheet" type="text/css" />
<!-- 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/latest/jquery.mobile.min.js"></script>
<!--link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.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>
<link type="text/css" href="../css/jqm-datebox.css" rel="stylesheet" />
<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.durationflipbox.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,
'defaultValue': [2013,0,1],
});
</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" data-role="datebox" data-options='{"mode": "calbox", "calWeekMode": true}' id="l1" />
</div>
<div data-role="fieldcontain">
<label for="aa1">text comparison</label>
<input name="aa1" type="text" data-mini="true" id="aa1"/>
</div>
<div data-role="fieldcontain">
<label for="l7">durationbox</label>
<input name="l7" type="text" data-role="datebox" data-options='{"overrideDurationOrder":["h","i"], "mode": "durationflipbox"}' id="l7" />
</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="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, "overrideDurationOrder":["h","i"], "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.