Skip to content

Commit

Permalink
Add examples using amd and browserify
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcfedr
mcfedr committed Apr 15, 2016
1 parent 5f20beb commit 6721720
Show file tree
Hide file tree
Showing 8 changed files with 768 additions and 33 deletions.
59 changes: 26 additions & 33 deletions daterangepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,27 @@
* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
* @website: https://www.improvely.com/
*/

(function(root, factory) {

if (typeof define === 'function' && define.amd) {
define(['moment', 'jquery'], function (moment, jquery) {
return (root.daterangepicker = factory(moment, jquery));
});
} else if (typeof exports !== 'undefined') {
var momentjs = require('moment');
var jQuery = (typeof window != 'undefined') ? window.jQuery : undefined; //isomorphic issue
if (!jQuery) {
try {
jQuery = require('jquery');
if (!jQuery.fn) jQuery.fn = {}; //isomorphic issue
} catch (err) {
if (!jQuery) throw new Error('jQuery dependency not found');
}
}

module.exports = factory(momentjs, jQuery);

// Finally, as a browser global.
} else {
root.daterangepicker = factory(root.moment || moment, (root.jQuery || root.Zepto || root.ender || root.$));
}

}(this || {}, function(moment, $) { // 'this' doesn't exist on a server

// Follow the UMD template https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Make globaly available as well
define(['moment', 'jquery'], function (moment, jquery) {
return (root.daterangepicker = factory(moment, jquery));
});
} else if (typeof module === 'object' && module.exports) {
// Node / Browserify
//isomorphic issue
var jQuery = (typeof window != 'undefined') ? window.jQuery : undefined;
if (!jQuery) {
jQuery = require('jquery');
if (!jQuery.fn) jQuery.fn = {};
}
module.exports = factory(require('moment'), jQuery);
} else {
// Browser globals
root.daterangepicker = factory(root.moment, root.jQuery);
}
}(this, function(moment, $) {
var DateRangePicker = function(element, options, cb) {

//default settings for options
Expand Down Expand Up @@ -323,7 +316,7 @@
// after the maximum, don't display this range option at all.
if ((this.minDate && end.isBefore(this.minDate)) || (maxDate && start.isAfter(maxDate)))
continue;

//Support unicode chars in the range names.
var elem = document.createElement('textarea');
elem.innerHTML = range;
Expand Down Expand Up @@ -547,7 +540,7 @@
} else {
this.rightCalendar.month = this.startDate.clone().date(2).add(1, 'month');
}

} else {
if (this.leftCalendar.month.format('YYYY-MM') != this.startDate.format('YYYY-MM') && this.rightCalendar.month.format('YYYY-MM') != this.startDate.format('YYYY-MM')) {
this.leftCalendar.month = this.startDate.clone().date(2);
Expand Down Expand Up @@ -1153,7 +1146,7 @@
this.container.find('input[name=daterangepicker_start]').val(dates[0].format(this.locale.format));
this.container.find('input[name=daterangepicker_end]').val(dates[1].format(this.locale.format));
}

},

clickRange: function(e) {
Expand Down Expand Up @@ -1285,7 +1278,7 @@
this.endDate = null;
this.setStartDate(date.clone());
} else if (!this.endDate && date.isBefore(this.startDate)) {
//special case: clicking the same date for start/end,
//special case: clicking the same date for start/end,
//but the time of the end date is before the start date
this.setEndDate(this.startDate.clone());
} else {
Expand Down Expand Up @@ -1535,7 +1528,7 @@
});
return this;
};

return DateRangePicker;

}));
210 changes: 210 additions & 0 deletions example/amd/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>A date range picker for Bootstrap</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="../../daterangepicker.css" />
<style type="text/css">
.demo { position: relative; }
.demo i {
position: absolute; bottom: 10px; right: 24px; top: auto; cursor: pointer;
}
</style>
</head>
<body style="margin: 60px 0">

<div class="container">

<h1 style="margin: 0 0 20px 0">Configuration Builder</h1>

<div class="well configurator">

<form>
<div class="row">

<div class="col-md-4">

<div class="form-group">
<label for="parentEl">parentEl</label>
<input type="text" class="form-control" id="parentEl" value="" placeholder="body">
</div>

<div class="form-group">
<label for="startDate">startDate</label>
<input type="text" class="form-control" id="startDate" value="07/01/2015">
</div>

<div class="form-group">
<label for="endDate">endDate</label>
<input type="text" class="form-control" id="endDate" value="07/15/2015">
</div>

<div class="form-group">
<label for="minDate">minDate</label>
<input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
</div>

<div class="form-group">
<label for="maxDate">maxDate</label>
<input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
</div>

</div>
<div class="col-md-4">

<div class="checkbox">
<label>
<input type="checkbox" id="autoApply"> autoApply
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="singleDatePicker"> singleDatePicker
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="showDropdowns"> showDropdowns
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="showWeekNumbers"> showWeekNumbers
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="timePicker"> timePicker
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="timePicker24Hour"> timePicker24Hour
</label>
</div>

<div class="form-group">
<label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
<input type="text" class="form-control" id="timePickerIncrement" value="1">
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="timePickerSeconds"> timePickerSeconds
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="ranges"> ranges (with example predefined ranges)
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="locale"> locale (with example settings)
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
</label>
</div>

<div class="checkbox">
<label>
<input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
</label>
</div>

</div>
<div class="col-md-4">

<div class="form-group">
<label for="opens">opens</label>
<select id="opens" class="form-control">
<option value="right" selected>right</option>
<option value="left">left</option>
<option value="center">center</option>
</select>
</div>

<div class="form-group">
<label for="drops">drops</label>
<select id="drops" class="form-control">
<option value="down" selected>down</option>
<option value="up">up</option>
</select>
</div>

<div class="form-group">
<label for="buttonClasses">buttonClasses</label>
<input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
</div>

<div class="form-group">
<label for="applyClass">applyClass</label>
<input type="text" class="form-control" id="applyClass" value="btn-success">
</div>

<div class="form-group">
<label for="cancelClass">cancelClass</label>
<input type="text" class="form-control" id="cancelClass" value="btn-default">
</div>

</div>

</div>
</form>

</div>

<div class="row">

<div class="col-md-4 col-md-offset-2 demo">
<h4>Your Date Range Picker</h4>
<input type="text" id="config-demo" class="form-control">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
</div>

<div class="col-md-6">
<h4>Configuration</h4>

<div class="well">
<textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
</div>
</div>

</div>

</div>


<script type="text/javascript" src="require.js" data-main="main.js"></script>
</body>
</html>
Loading

0 comments on commit 6721720

Please sign in to comment.