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