index.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="en-US">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>A date range picker for Bootstrap</title>
  6. <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
  7. <link rel="stylesheet" type="text/css" media="all" href="../../daterangepicker.css" />
  8. <style type="text/css">
  9. .demo { position: relative; }
  10. .demo i {
  11. position: absolute; bottom: 10px; right: 24px; top: auto; cursor: pointer;
  12. }
  13. </style>
  14. </head>
  15. <body style="margin: 60px 0">
  16. <div class="container">
  17. <h1 style="margin: 0 0 20px 0">Configuration Builder</h1>
  18. <div class="well configurator">
  19. <form>
  20. <div class="row">
  21. <div class="col-md-4">
  22. <div class="form-group">
  23. <label for="parentEl">parentEl</label>
  24. <input type="text" class="form-control" id="parentEl" value="" placeholder="body">
  25. </div>
  26. <div class="form-group">
  27. <label for="startDate">startDate</label>
  28. <input type="text" class="form-control" id="startDate" value="07/01/2015">
  29. </div>
  30. <div class="form-group">
  31. <label for="endDate">endDate</label>
  32. <input type="text" class="form-control" id="endDate" value="07/15/2015">
  33. </div>
  34. <div class="form-group">
  35. <label for="minDate">minDate</label>
  36. <input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
  37. </div>
  38. <div class="form-group">
  39. <label for="maxDate">maxDate</label>
  40. <input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
  41. </div>
  42. </div>
  43. <div class="col-md-4">
  44. <div class="checkbox">
  45. <label>
  46. <input type="checkbox" id="autoApply"> autoApply
  47. </label>
  48. </div>
  49. <div class="checkbox">
  50. <label>
  51. <input type="checkbox" id="singleDatePicker"> singleDatePicker
  52. </label>
  53. </div>
  54. <div class="checkbox">
  55. <label>
  56. <input type="checkbox" id="showDropdowns"> showDropdowns
  57. </label>
  58. </div>
  59. <div class="checkbox">
  60. <label>
  61. <input type="checkbox" id="showWeekNumbers"> showWeekNumbers
  62. </label>
  63. </div>
  64. <div class="checkbox">
  65. <label>
  66. <input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
  67. </label>
  68. </div>
  69. <div class="checkbox">
  70. <label>
  71. <input type="checkbox" id="timePicker"> timePicker
  72. </label>
  73. </div>
  74. <div class="checkbox">
  75. <label>
  76. <input type="checkbox" id="timePicker24Hour"> timePicker24Hour
  77. </label>
  78. </div>
  79. <div class="form-group">
  80. <label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
  81. <input type="text" class="form-control" id="timePickerIncrement" value="1">
  82. </div>
  83. <div class="checkbox">
  84. <label>
  85. <input type="checkbox" id="timePickerSeconds"> timePickerSeconds
  86. </label>
  87. </div>
  88. <div class="checkbox">
  89. <label>
  90. <input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
  91. </label>
  92. </div>
  93. <div class="checkbox">
  94. <label>
  95. <input type="checkbox" id="ranges"> ranges (with example predefined ranges)
  96. </label>
  97. </div>
  98. <div class="checkbox">
  99. <label>
  100. <input type="checkbox" id="locale"> locale (with example settings)
  101. </label>
  102. </div>
  103. <div class="checkbox">
  104. <label>
  105. <input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
  106. </label>
  107. </div>
  108. <div class="checkbox">
  109. <label>
  110. <input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
  111. </label>
  112. </div>
  113. <div class="checkbox">
  114. <label>
  115. <input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
  116. </label>
  117. </div>
  118. </div>
  119. <div class="col-md-4">
  120. <div class="form-group">
  121. <label for="opens">opens</label>
  122. <select id="opens" class="form-control">
  123. <option value="right" selected>right</option>
  124. <option value="left">left</option>
  125. <option value="center">center</option>
  126. </select>
  127. </div>
  128. <div class="form-group">
  129. <label for="drops">drops</label>
  130. <select id="drops" class="form-control">
  131. <option value="down" selected>down</option>
  132. <option value="up">up</option>
  133. </select>
  134. </div>
  135. <div class="form-group">
  136. <label for="buttonClasses">buttonClasses</label>
  137. <input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
  138. </div>
  139. <div class="form-group">
  140. <label for="applyClass">applyClass</label>
  141. <input type="text" class="form-control" id="applyClass" value="btn-success">
  142. </div>
  143. <div class="form-group">
  144. <label for="cancelClass">cancelClass</label>
  145. <input type="text" class="form-control" id="cancelClass" value="btn-default">
  146. </div>
  147. </div>
  148. </div>
  149. </form>
  150. </div>
  151. <div class="row">
  152. <div class="col-md-4 col-md-offset-2 demo">
  153. <h4>Your Date Range Picker</h4>
  154. <input type="text" id="config-demo" class="form-control">
  155. <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
  156. </div>
  157. <div class="col-md-6">
  158. <h4>Configuration</h4>
  159. <div class="well">
  160. <textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165. <script type="text/javascript" src="bundle.js"></script>
  166. </body>
  167. </html>