PageRenderTime 69ms CodeModel.GetById 34ms RepoModel.GetById 0ms app.codeStats 0ms

/demos/calendar/index.html

https://github.com/eromba/jquery-mobile-datebox
HTML | 121 lines | 92 code | 28 blank | 1 comment | 0 complexity | 23ad3bd0afbf2b9f7bc0c6874bd3b20b MD5 | raw file
    

  1. <!DOCTYPE html> 
    2. 

  2. <html lang="en"> 
    3. 

  3. <head> 
    4. 

  4. 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    5. 

  5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 

  6. 	<title>jQueryMobile - DateBox Demos</title>
    7. 

  7. 	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    8. 

  8. 	<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" rel="stylesheet" /> 
    9. 

  9. 	<link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" /> 
    10. 

  10. 	
    11. 

  11. 	<!-- NOTE: Script load order is significant! -->
    12. 

  12. 	
    13. 

  13. 	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
    14. 

  14. 	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
    15. 

  15. 	<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
    16. 

  16. 	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
    17. 

  17. 	<script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
    18. 

  18. 	<link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
    19. 

  19. 	<script type="text/javascript">
    20. 

  20. 		$('div').live('pagecreate', function() {
    21. 

  21. 			prettyPrint()
    22. 

  22. 		});
    23. 

  23. 	</script>
    24. 

  24. 	
    25. 

  25. </head>
    26. 

  26. <body>
    27. 

  27. <div data-role="page" data-theme="a" id="calIndex"> 
    28. 

  28. 	<div data-role="header"> 
    29. 

  29. 		<h1>jQueryMobile - DateBox</h1>
    30. 

  30. 		<a href="../../" data-icon="home" data-iconpos="notext">Home</a>
    31. 

  31. 	</div>
    32. 

  32. 	<div data-role="content" data-theme="c">
    33. 

  33. 		<div class="content-secondary"> 
    34. 

  34. 	
    35. 

  35. 			<div id="jqm-homeheader"> 
    36. 

  36. 				<h1 id="jqm-logo"><img src="/jQM-DateBox/demos/jquery-logo-db.png" alt="jQuery Mobile Framework :: DateBox" /></h1> 
    37. 

  37. 				<p>A Date and Time Picker plugin for jQueryMobile</p> 
    38. 

  38. 				
    39. 

  39. 			</div> 
    40. 

  40. 			
    41. 

  41. 			<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
    42. 

  42. 				<li data-role="list-divider">Calendar Demos</li> 
    43. 

  43. 				<li data-theme='a'>Simple Calendars</li> 
    44. 

  44. 				<li><a href="limit.html">Range Limiting &amp; Picking</a></li>
    45. 

  45. 				<li><a href="blackhigh.html">Disabled &amp; Highlighted Dates</a></li>
    46. 

  46. 			</ul> 
    47. 

  47. 			
    48. 

  48. 		</div><!--/content-primary-->	
    49. 

  49. 		
    50. 

  50. 		<div class="content-primary"> 
    51. 

  51. 			<nav> 
    52. 

  52. 				<h2>Basic Calendar</h2>
    53. 

  53. 				<div data-role="fieldcontain">
    54. 

  54. 					<label for="defcal">Some Date</label><input name="defcal" type="date" data-role="datebox" id="defcal" data-options='{"mode": "calbox"}'/>
    55. 

  55. 				</div>
    56. 

  56. 				
    57. 

  57. 				<p>Using a calendar is as simple as setting the 'mode' option to "calbox".</p>
    58. 

  58. 				
    59. 

  59. 				<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;
    60. 

  60. 

  61. &lt;input name="mydate" id="mydate" type="date" data-role="datebox"
    62. 

  62.    data-options='{"mode": "calbox"}'&gt;</pre>
    63. 

  63. 				
    64. 

  64. 				<h2>Changing the start of the week</h2>
    65. 

  65. 				<div data-role="fieldcontain">
    66. 

  66. 					<label for="calstartday">Some Date</label><input name="calstartday" type="date" data-role="datebox" id="calstartday" data-options='{"mode": "calbox", "calStartDay": 1}'/>
    67. 

  67. 				</div>
    68. 

  68. 				
    69. 

  69. 				<p>To change the start of the week, set option 'calStartDay' to an integer 0-6, where 0=Sunday, 1=Monday...</p>
    70. 

  70. 				
    71. 

  71. 				<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;
    72. 

  72. 

  73. &lt;input name="mydate" id="mydate" type="date" data-role="datebox"
    74. 

  74.    data-options='{"mode": "calbox", 'calStartDay': 1}'&gt;</pre>
    75. 

  75. 				
    76. 

  76. 				<h2>Selecting by week</h2>
    77. 

  77. 				<div data-role="fieldcontain">
    78. 

  78. 					<label for="calweekmode">Some Date</label><input name="calweekmode" type="date" data-role="datebox" id="calweekmode" data-options='{"mode": "calbox", "calWeekMode": true, "calWeekModeFirstDay": 1}'/>
    79. 

  79. 				</div>
    80. 

  80. 				
    81. 

  81. 				<p>Using a calendar to select a specific day can be accomplished by setting option 'calWeekMode' to 'true' and 'calWeekModeFirstDay' to the day you wish to pick.  For instance, to select by week using monday:</p>
    82. 

  82. 				
    83. 

  83. 				<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;
    84. 

  84. 

  85. &lt;input name="mydate" id="mydate" type="date" data-role="datebox"
    86. 

  86.    data-options='{"mode": "calbox", "calWeekMode": true, "calWeekModeFirstDay": 1}'&gt;</pre>
    87. 

  87.    
    88. 

  88. 				<h2>Showing a "today" button</h2>
    89. 

  89. 				<div data-role="fieldcontain">
    90. 

  90. 					<label for="caltodaybut">Some Date</label><input name="caltodaybut" type="date" data-role="datebox" id="caltodaybut" data-options='{"mode": "calbox", "calTodayButton": true}'/>
    91. 

  91. 				</div>
    92. 

  92. 				
    93. 

  93. 				<p>To show a today button, set 'calTodayButton' to true</p>
    94. 

  94. 				
    95. 

  95. 				<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;
    96. 

  96. 

  97. &lt;input name="mydate" id="mydate" type="date" data-role="datebox"
    98. 

  98.    data-options='{"mode": "calbox", 'calTodayButton': true}'&gt;</pre>
    99. 

  99. 

  100. 				<h2>Disabling manual input</h2>
    101. 

  101. 				<div data-role="fieldcontain">
    102. 

  102. 					<label for="caldisablemanualinput">Some Date</label><input name="caldisablemanualinput" type="date" data-role="datebox" id="caldisablemanualinput" data-options='{"mode": "calbox", "disableManualInput": true}'/>
    103. 

  103. 				</div>
    104. 

  104. 

  105. 				<p>You're not able to type a value in the following input, you can set the value by the picker.</p>
    106. 

    107. 

  107. 				<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;
    108. 

  108. 

  109. &lt;input name="mydate" id="mydate" type="date" data-role="datebox"
    110. 

  110.    data-options='{"mode": "calbox", "disableManualInput": true}'&gt;</pre>
    111. 

  111. 			</nav> 
    112. 

  112. 		</div> 
    113. 

  113. 		
    114. 

  114. 	</div>
    115. 

  115. 	<div data-role="footer">
    116. 

  116. 		<div data-role="controlgroup" data-type="horizontal">
    117. 

  117. 			<a data-role="button" href="https://github.com/jtsage/jquery-mobile-datebox">GitHub Source</a><a data-role="button" rel='external' href="http://dev.jtsage.com/blog/">Blog</a><a data-role="button" href="mailto:jtsage+datebox@gmail.com">Contact</a><a data-role="button" href="http://jquerymobile.com/">jQueryMobile Homepage</a>
    118. 

  118. 		</div>
    119. 

  119. 	</div>
    120. 

  120. </div>
    121. 

  121. </html>
    122. 

  122.