Skip to content

Commit 6721720

Browse files
mcfedrmcfedr
committed
Add examples using amd and browserify
1 parent 5f20beb commit 6721720

File tree

8 files changed

+768
-33
lines changed

8 files changed

+768
-33
lines changed

‎daterangepicker.js

Lines changed: 26 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,27 @@
55
* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
66
* @website: https://www.improvely.com/
77
*/
8-
9-
(function(root, factory) {
10-
11-
if (typeof define === 'function' && define.amd) {
12-
define(['moment', 'jquery'], function (moment, jquery) {
13-
return (root.daterangepicker = factory(moment, jquery));
14-
});
15-
} else if (typeof exports !== 'undefined') {
16-
var momentjs = require('moment');
17-
var jQuery = (typeof window != 'undefined') ? window.jQuery : undefined; //isomorphic issue
18-
if (!jQuery) {
19-
try {
20-
jQuery = require('jquery');
21-
if (!jQuery.fn) jQuery.fn = {}; //isomorphic issue
22-
} catch (err) {
23-
if (!jQuery) throw new Error('jQuery dependency not found');
24-
}
25-
}
26-
27-
module.exports = factory(momentjs, jQuery);
28-
29-
// Finally, as a browser global.
30-
} else {
31-
root.daterangepicker = factory(root.moment || moment, (root.jQuery || root.Zepto || root.ender || root.$));
32-
}
33-
34-
}(this || {}, function(moment, $) { // 'this' doesn't exist on a server
35-
8+
// Follow the UMD template https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js
9+
(function (root, factory) {
10+
if (typeof define === 'function' && define.amd) {
11+
// AMD. Make globaly available as well
12+
define(['moment', 'jquery'], function (moment, jquery) {
13+
return (root.daterangepicker = factory(moment, jquery));
14+
});
15+
} else if (typeof module === 'object' && module.exports) {
16+
// Node / Browserify
17+
//isomorphic issue
18+
var jQuery = (typeof window != 'undefined') ? window.jQuery : undefined;
19+
if (!jQuery) {
20+
jQuery = require('jquery');
21+
if (!jQuery.fn) jQuery.fn = {};
22+
}
23+
module.exports = factory(require('moment'), jQuery);
24+
} else {
25+
// Browser globals
26+
root.daterangepicker = factory(root.moment, root.jQuery);
27+
}
28+
}(this, function(moment, $) {
3629
var DateRangePicker = function(element, options, cb) {
3730

3831
//default settings for options
@@ -323,7 +316,7 @@
323316
// after the maximum, don't display this range option at all.
324317
if ((this.minDate && end.isBefore(this.minDate)) || (maxDate && start.isAfter(maxDate)))
325318
continue;
326-
319+
327320
//Support unicode chars in the range names.
328321
var elem = document.createElement('textarea');
329322
elem.innerHTML = range;
@@ -547,7 +540,7 @@
547540
} else {
548541
this.rightCalendar.month = this.startDate.clone().date(2).add(1, 'month');
549542
}
550-
543+
551544
} else {
552545
if (this.leftCalendar.month.format('YYYY-MM') != this.startDate.format('YYYY-MM') && this.rightCalendar.month.format('YYYY-MM') != this.startDate.format('YYYY-MM')) {
553546
this.leftCalendar.month = this.startDate.clone().date(2);
@@ -1153,7 +1146,7 @@
11531146
this.container.find('input[name=daterangepicker_start]').val(dates[0].format(this.locale.format));
11541147
this.container.find('input[name=daterangepicker_end]').val(dates[1].format(this.locale.format));
11551148
}
1156-
1149+
11571150
},
11581151

11591152
clickRange: function(e) {
@@ -1285,7 +1278,7 @@
12851278
this.endDate = null;
12861279
this.setStartDate(date.clone());
12871280
} else if (!this.endDate && date.isBefore(this.startDate)) {
1288-
//special case: clicking the same date for start/end,
1281+
//special case: clicking the same date for start/end,
12891282
//but the time of the end date is before the start date
12901283
this.setEndDate(this.startDate.clone());
12911284
} else {
@@ -1535,7 +1528,7 @@
15351528
});
15361529
return this;
15371530
};
1538-
1531+
15391532
return DateRangePicker;
15401533

15411534
}));

‎example/amd/index.html

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
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+
17+
<div class="container">
18+
19+
<h1 style="margin: 0 0 20px 0">Configuration Builder</h1>
20+
21+
<div class="well configurator">
22+
23+
<form>
24+
<div class="row">
25+
26+
<div class="col-md-4">
27+
28+
<div class="form-group">
29+
<label for="parentEl">parentEl</label>
30+
<input type="text" class="form-control" id="parentEl" value="" placeholder="body">
31+
</div>
32+
33+
<div class="form-group">
34+
<label for="startDate">startDate</label>
35+
<input type="text" class="form-control" id="startDate" value="07/01/2015">
36+
</div>
37+
38+
<div class="form-group">
39+
<label for="endDate">endDate</label>
40+
<input type="text" class="form-control" id="endDate" value="07/15/2015">
41+
</div>
42+
43+
<div class="form-group">
44+
<label for="minDate">minDate</label>
45+
<input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
46+
</div>
47+
48+
<div class="form-group">
49+
<label for="maxDate">maxDate</label>
50+
<input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
51+
</div>
52+
53+
</div>
54+
<div class="col-md-4">
55+
56+
<div class="checkbox">
57+
<label>
58+
<input type="checkbox" id="autoApply"> autoApply
59+
</label>
60+
</div>
61+
62+
<div class="checkbox">
63+
<label>
64+
<input type="checkbox" id="singleDatePicker"> singleDatePicker
65+
</label>
66+
</div>
67+
68+
<div class="checkbox">
69+
<label>
70+
<input type="checkbox" id="showDropdowns"> showDropdowns
71+
</label>
72+
</div>
73+
74+
<div class="checkbox">
75+
<label>
76+
<input type="checkbox" id="showWeekNumbers"> showWeekNumbers
77+
</label>
78+
</div>
79+
80+
<div class="checkbox">
81+
<label>
82+
<input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
83+
</label>
84+
</div>
85+
86+
<div class="checkbox">
87+
<label>
88+
<input type="checkbox" id="timePicker"> timePicker
89+
</label>
90+
</div>
91+
92+
<div class="checkbox">
93+
<label>
94+
<input type="checkbox" id="timePicker24Hour"> timePicker24Hour
95+
</label>
96+
</div>
97+
98+
<div class="form-group">
99+
<label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
100+
<input type="text" class="form-control" id="timePickerIncrement" value="1">
101+
</div>
102+
103+
<div class="checkbox">
104+
<label>
105+
<input type="checkbox" id="timePickerSeconds"> timePickerSeconds
106+
</label>
107+
</div>
108+
109+
<div class="checkbox">
110+
<label>
111+
<input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
112+
</label>
113+
</div>
114+
115+
<div class="checkbox">
116+
<label>
117+
<input type="checkbox" id="ranges"> ranges (with example predefined ranges)
118+
</label>
119+
</div>
120+
121+
<div class="checkbox">
122+
<label>
123+
<input type="checkbox" id="locale"> locale (with example settings)
124+
</label>
125+
</div>
126+
127+
<div class="checkbox">
128+
<label>
129+
<input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
130+
</label>
131+
</div>
132+
133+
<div class="checkbox">
134+
<label>
135+
<input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
136+
</label>
137+
</div>
138+
139+
<div class="checkbox">
140+
<label>
141+
<input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
142+
</label>
143+
</div>
144+
145+
</div>
146+
<div class="col-md-4">
147+
148+
<div class="form-group">
149+
<label for="opens">opens</label>
150+
<select id="opens" class="form-control">
151+
<option value="right" selected>right</option>
152+
<option value="left">left</option>
153+
<option value="center">center</option>
154+
</select>
155+
</div>
156+
157+
<div class="form-group">
158+
<label for="drops">drops</label>
159+
<select id="drops" class="form-control">
160+
<option value="down" selected>down</option>
161+
<option value="up">up</option>
162+
</select>
163+
</div>
164+
165+
<div class="form-group">
166+
<label for="buttonClasses">buttonClasses</label>
167+
<input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
168+
</div>
169+
170+
<div class="form-group">
171+
<label for="applyClass">applyClass</label>
172+
<input type="text" class="form-control" id="applyClass" value="btn-success">
173+
</div>
174+
175+
<div class="form-group">
176+
<label for="cancelClass">cancelClass</label>
177+
<input type="text" class="form-control" id="cancelClass" value="btn-default">
178+
</div>
179+
180+
</div>
181+
182+
</div>
183+
</form>
184+
185+
</div>
186+
187+
<div class="row">
188+
189+
<div class="col-md-4 col-md-offset-2 demo">
190+
<h4>Your Date Range Picker</h4>
191+
<input type="text" id="config-demo" class="form-control">
192+
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
193+
</div>
194+
195+
<div class="col-md-6">
196+
<h4>Configuration</h4>
197+
198+
<div class="well">
199+
<textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
200+
</div>
201+
</div>
202+
203+
</div>
204+
205+
</div>
206+
207+
208+
<script type="text/javascript" src="require.js" data-main="main.js"></script>
209+
</body>
210+
</html>

0 commit comments

Comments
 (0)