demo.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />-->
  7. <link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" />
  8. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  9. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
  10. <script type="text/javascript" src="daterangepicker.js"></script>
  11. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  12. <!--[if lt IE 9]>
  13. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  14. <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  15. <![endif]-->
  16. </head>
  17. <body style="margin: 60px 0">
  18. <div class="container">
  19. <h1 style="margin: 0 0 20px 0">Configuration Builder</h1>
  20. <div class="well configurator">
  21. <form>
  22. <div class="row">
  23. <div class="col-md-4">
  24. <div class="form-group">
  25. <label for="parentEl">parentEl</label>
  26. <input type="text" class="form-control" id="parentEl" value="" placeholder="body">
  27. </div>
  28. <div class="form-group">
  29. <label for="startDate">startDate</label>
  30. <input type="text" class="form-control" id="startDate" value="07/01/2015">
  31. </div>
  32. <div class="form-group">
  33. <label for="endDate">endDate</label>
  34. <input type="text" class="form-control" id="endDate" value="07/15/2015">
  35. </div>
  36. <div class="form-group">
  37. <label for="minDate">minDate</label>
  38. <input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
  39. </div>
  40. <div class="form-group">
  41. <label for="maxDate">maxDate</label>
  42. <input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
  43. </div>
  44. </div>
  45. <div class="col-md-4">
  46. <div class="checkbox">
  47. <label>
  48. <input type="checkbox" id="autoApply"> autoApply
  49. </label>
  50. </div>
  51. <div class="checkbox">
  52. <label>
  53. <input type="checkbox" id="singleDatePicker"> singleDatePicker
  54. </label>
  55. </div>
  56. <div class="checkbox">
  57. <label>
  58. <input type="checkbox" id="showDropdowns"> showDropdowns
  59. </label>
  60. </div>
  61. <div class="checkbox">
  62. <label>
  63. <input type="checkbox" id="showWeekNumbers"> showWeekNumbers
  64. </label>
  65. </div>
  66. <div class="checkbox">
  67. <label>
  68. <input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
  69. </label>
  70. </div>
  71. <div class="checkbox">
  72. <label>
  73. <input type="checkbox" id="timePicker" checked="checked"> timePicker
  74. </label>
  75. </div>
  76. <div class="checkbox">
  77. <label>
  78. <input type="checkbox" id="timePicker24Hour"> timePicker24Hour
  79. </label>
  80. </div>
  81. <div class="form-group">
  82. <label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
  83. <input type="text" class="form-control" id="timePickerIncrement" value="1">
  84. </div>
  85. <div class="checkbox">
  86. <label>
  87. <input type="checkbox" id="timePickerSeconds"> timePickerSeconds
  88. </label>
  89. </div>
  90. <div class="checkbox">
  91. <label>
  92. <input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
  93. </label>
  94. </div>
  95. <div class="checkbox">
  96. <label>
  97. <input type="checkbox" id="ranges" checked="checked"> ranges (with example predefined ranges)
  98. </label>
  99. </div>
  100. <div class="checkbox">
  101. <label>
  102. <input type="checkbox" id="locale"> locale (with example settings)
  103. </label>
  104. <label id="rtl-wrap">
  105. <input type="checkbox" id="rtl"> RTL (right-to-left)
  106. </label>
  107. </div>
  108. <div class="checkbox">
  109. <label>
  110. <input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
  111. </label>
  112. </div>
  113. </div>
  114. <div class="col-md-4">
  115. <div class="checkbox">
  116. <label>
  117. <input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
  118. </label>
  119. </div>
  120. <div class="checkbox">
  121. <label>
  122. <input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
  123. </label>
  124. </div>
  125. <div class="checkbox">
  126. <label>
  127. <input type="checkbox" id="showCustomRangeLabel" checked="checked"> showCustomRangeLabel
  128. </label>
  129. </div>
  130. <div class="form-group">
  131. <label for="opens">opens</label>
  132. <select id="opens" class="form-control">
  133. <option value="right" selected>right</option>
  134. <option value="left">left</option>
  135. <option value="center">center</option>
  136. </select>
  137. </div>
  138. <div class="form-group">
  139. <label for="drops">drops</label>
  140. <select id="drops" class="form-control">
  141. <option value="down" selected>down</option>
  142. <option value="up">up</option>
  143. </select>
  144. </div>
  145. <div class="form-group">
  146. <label for="buttonClasses">buttonClasses</label>
  147. <input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
  148. </div>
  149. <div class="form-group">
  150. <label for="applyClass">applyClass</label>
  151. <input type="text" class="form-control" id="applyClass" value="btn-success">
  152. </div>
  153. <div class="form-group">
  154. <label for="cancelClass">cancelClass</label>
  155. <input type="text" class="form-control" id="cancelClass" value="btn-default">
  156. </div>
  157. </div>
  158. </div>
  159. </form>
  160. </div>
  161. <div class="row">
  162. <div class="col-md-4 col-md-offset-2 demo">
  163. <h4>Your Date Range Picker</h4>
  164. <center>
  165. <input type="text" id="config-demo" class="form-control">
  166. </center>
  167. </div>
  168. <div class="col-md-6">
  169. <h4>Configuration</h4>
  170. <div class="well">
  171. <textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. <style type="text/css">
  177. .demo { position: relative; }
  178. .demo i {
  179. position: absolute; bottom: 10px; right: 24px; top: auto; cursor: pointer;
  180. }
  181. </style>
  182. <script type="text/javascript">
  183. $(document).ready(function() {
  184. $('#config-text').keyup(function() {
  185. eval($(this).val());
  186. });
  187. $('.configurator input, .configurator select').change(function() {
  188. updateConfig();
  189. });
  190. $('.demo i').click(function() {
  191. $(this).parent().find('input').click();
  192. });
  193. $('#startDate').daterangepicker({
  194. singleDatePicker: true,
  195. startDate: moment().subtract(6, 'days')
  196. });
  197. $('#endDate').daterangepicker({
  198. singleDatePicker: true,
  199. startDate: moment()
  200. });
  201. updateConfig();
  202. function updateConfig() {
  203. var options = {};
  204. if ($('#singleDatePicker').is(':checked'))
  205. options.singleDatePicker = true;
  206. if ($('#showDropdowns').is(':checked'))
  207. options.showDropdowns = true;
  208. if ($('#showWeekNumbers').is(':checked'))
  209. options.showWeekNumbers = true;
  210. if ($('#showISOWeekNumbers').is(':checked'))
  211. options.showISOWeekNumbers = true;
  212. if ($('#timePicker').is(':checked'))
  213. options.timePicker = true;
  214. if ($('#timePicker24Hour').is(':checked'))
  215. options.timePicker24Hour = true;
  216. if ($('#timePickerIncrement').val().length && $('#timePickerIncrement').val() != 1)
  217. options.timePickerIncrement = parseInt($('#timePickerIncrement').val(), 10);
  218. if ($('#timePickerSeconds').is(':checked'))
  219. options.timePickerSeconds = true;
  220. if ($('#autoApply').is(':checked'))
  221. options.autoApply = true;
  222. if ($('#dateLimit').is(':checked'))
  223. options.dateLimit = { days: 7 };
  224. if ($('#ranges').is(':checked')) {
  225. options.ranges = {
  226. 'Today': [moment(), moment()],
  227. 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
  228. 'Last 7 Days': [moment().subtract(6, 'days'), moment()],
  229. 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
  230. 'This Month': [moment().startOf('month'), moment().endOf('month')],
  231. 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  232. };
  233. }
  234. if ($('#locale').is(':checked')) {
  235. $('#rtl-wrap').show();
  236. options.locale = {
  237. direction: $('#rtl').is(':checked') ? 'rtl' : 'ltr',
  238. format: 'MM/DD/YYYY HH:mm',
  239. separator: ' - ',
  240. applyLabel: 'Apply',
  241. cancelLabel: 'Cancel',
  242. fromLabel: 'From',
  243. toLabel: 'To',
  244. customRangeLabel: 'Custom',
  245. daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
  246. monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  247. firstDay: 1
  248. };
  249. } else {
  250. $('#rtl-wrap').hide();
  251. }
  252. if (!$('#linkedCalendars').is(':checked'))
  253. options.linkedCalendars = false;
  254. if (!$('#autoUpdateInput').is(':checked'))
  255. options.autoUpdateInput = false;
  256. if (!$('#showCustomRangeLabel').is(':checked'))
  257. options.showCustomRangeLabel = false;
  258. if ($('#alwaysShowCalendars').is(':checked'))
  259. options.alwaysShowCalendars = true;
  260. if ($('#parentEl').val().length)
  261. options.parentEl = $('#parentEl').val();
  262. if ($('#startDate').val().length)
  263. options.startDate = $('#startDate').val();
  264. if ($('#endDate').val().length)
  265. options.endDate = $('#endDate').val();
  266. if ($('#minDate').val().length)
  267. options.minDate = $('#minDate').val();
  268. if ($('#maxDate').val().length)
  269. options.maxDate = $('#maxDate').val();
  270. if ($('#opens').val().length && $('#opens').val() != 'right')
  271. options.opens = $('#opens').val();
  272. if ($('#drops').val().length && $('#drops').val() != 'down')
  273. options.drops = $('#drops').val();
  274. if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
  275. options.buttonClasses = $('#buttonClasses').val();
  276. if ($('#applyClass').val().length && $('#applyClass').val() != 'btn-success')
  277. options.applyClass = $('#applyClass').val();
  278. if ($('#cancelClass').val().length && $('#cancelClass').val() != 'btn-default')
  279. options.cancelClass = $('#cancelClass').val();
  280. $('#config-text').val("$('#demo').daterangepicker(" + JSON.stringify(options, null, ' ') + ", function(start, end, label) {\n console.log(\"New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')\");\n});");
  281. $('#config-demo').daterangepicker(options, function(start, end, label) { console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); }).click();;
  282. }
  283. });
  284. </script>
  285. </body>
  286. </html>