├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── README.md
├── dist
    └── vue-daterangepicker-component.min.js
├── example.html
├── package.json
└── src
    ├── defaultRange.js
    └── index.vue


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "vue",
3 |   "globals": {
4 |     "moment": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | *.log
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | *.log
3 | *.png
4 | .git
5 | dist
6 | example
7 | node_modules
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Date Range Picker Component
 2 | 
 3 | [![npm version][npm-v-img]][npm-url]
 4 | [![npm download][npm-dl-img]][npm-url]
 5 | 
 6 | > Intellectual property of [Oneway.mobi](http://www.oneway.mobi/)
 7 | 
 8 | #### Notice
 9 | This component is not meant to meet all the business requirements  
10 | so diving into `src/` to make it fits your needs is highly recommended
11 | 
12 | #### Example
13 | See [here](https://onewaytech.github.io/vue-daterangepicker-component/example.html), source in [`example.html`](./example.html)
14 | > Suggest inspecting it with [devtools](https://github.com/vuejs/vue-devtools)
15 | 
16 | #### Requirement
17 | * Vue 1.x
18 | * Vue Router 0.7.x
19 | * [vue-update-query-mixin](https://github.com/onewaytech/vue-update-query-mixin)
20 | * Moment.js (available globally)
21 | * jQuery + BootStrap 3.x (available globally)
22 | * [`bootstrap-daterangepicker`](http://www.daterangepicker.com/)
23 | 
24 | #### Installation
25 | `npm i vue-daterangepicker-component -S`
26 | 
27 | > alternatively: `<script src="dist/vue-daterangepicker-component.min.js"></script>`  
28 | > which exposes **`VueDateRangePicker`** as a global variable
29 | 
30 | #### Usage
31 | ```
32 | <date-range-picker :config></date-range-picker>
33 | 
34 | props: {
35 |   // more options see http://www.daterangepicker.com/#options
36 |   config: { type: Object, default: () => ({}) }
37 | }
38 | ```
39 | 
40 | #### Build
41 | 
42 | `npm run build`
43 | 
44 | #### LICENSE
45 | 
46 | MIT
47 | 
48 | [npm-url]: https://www.npmjs.com/package/vue-daterangepicker-component
49 | [npm-v-img]: http://img.shields.io/npm/v/vue-daterangepicker-component.svg
50 | [npm-dl-img]: http://img.shields.io/npm/dm/vue-daterangepicker-component.svg
51 | 


--------------------------------------------------------------------------------
/dist/vue-daterangepicker-component.min.js:
--------------------------------------------------------------------------------
  1 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.VueDateRangePicker = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  2 | module.exports = require('./src/update-query');
  3 | 
  4 | },{"./src/update-query":2}],2:[function(require,module,exports){
  5 | var qs = require('query-string'),
  6 |   objectTrim = require('./utils/object-trim');
  7 | 
  8 | /**
  9 |  * update query string with an object
 10 |  * @param  {String} url
 11 |  * @param  {Object} obj
 12 |  * @return {String} url with new query string
 13 |  */
 14 | module.exports = function updateQuery(url, obj) {
 15 |   var _url = url.split('?'),
 16 |     path = _url[0],
 17 |     curQs = _url[1];
 18 | 
 19 |   var newQs = qs.stringify(
 20 |     objectTrim(Object.assign(qs.parse(curQs), obj)),
 21 |     { encode: false }
 22 |   );
 23 |   return newQs ? path + '?' + newQs : path;
 24 | };
 25 | 
 26 | },{"./utils/object-trim":4,"query-string":8}],3:[function(require,module,exports){
 27 | /**
 28 |  * detect falsey values except 0
 29 |  * @param  {Any} entity
 30 |  * @return {Boolean}
 31 |  */
 32 | module.exports = function isEmpty(entity) {
 33 |   return entity === 0 ? false : !entity;
 34 | };
 35 | 
 36 | },{}],4:[function(require,module,exports){
 37 | var isEmpty = require('./is-empty');
 38 | /**
 39 |  * trim empty object value
 40 |  * @param  {Object} obj
 41 |  * @return {Object}
 42 |  */
 43 | module.exports = function objectTrim(obj) {
 44 |   var tmp = {};
 45 |   for (var k in obj) {
 46 |     var v = obj[k];
 47 |     if (!isEmpty(v)) tmp[k] = v;
 48 |   }
 49 |   return tmp;
 50 | };
 51 | 
 52 | },{"./is-empty":3}],5:[function(require,module,exports){
 53 | var updateQuery = require('update-query');
 54 | 
 55 | module.exports = {
 56 |   methods: {
 57 |     updateQuery: function (obj) {
 58 |       this.$router.go(updateQuery(this.$route.path, obj));
 59 |     }
 60 |   }
 61 | };
 62 | 
 63 | },{"update-query":1}],6:[function(require,module,exports){
 64 | 'use strict';
 65 | module.exports = function (str) {
 66 | 	return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
 67 | 		return '%' + c.charCodeAt(0).toString(16).toUpperCase();
 68 | 	});
 69 | };
 70 | 
 71 | },{}],7:[function(require,module,exports){
 72 | /*
 73 | object-assign
 74 | (c) Sindre Sorhus
 75 | @license MIT
 76 | */
 77 | 
 78 | 'use strict';
 79 | /* eslint-disable no-unused-vars */
 80 | var getOwnPropertySymbols = Object.getOwnPropertySymbols;
 81 | var hasOwnProperty = Object.prototype.hasOwnProperty;
 82 | var propIsEnumerable = Object.prototype.propertyIsEnumerable;
 83 | 
 84 | function toObject(val) {
 85 | 	if (val === null || val === undefined) {
 86 | 		throw new TypeError('Object.assign cannot be called with null or undefined');
 87 | 	}
 88 | 
 89 | 	return Object(val);
 90 | }
 91 | 
 92 | function shouldUseNative() {
 93 | 	try {
 94 | 		if (!Object.assign) {
 95 | 			return false;
 96 | 		}
 97 | 
 98 | 		// Detect buggy property enumeration order in older V8 versions.
 99 | 
100 | 		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
101 | 		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
102 | 		test1[5] = 'de';
103 | 		if (Object.getOwnPropertyNames(test1)[0] === '5') {
104 | 			return false;
105 | 		}
106 | 
107 | 		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
108 | 		var test2 = {};
109 | 		for (var i = 0; i < 10; i++) {
110 | 			test2['_' + String.fromCharCode(i)] = i;
111 | 		}
112 | 		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
113 | 			return test2[n];
114 | 		});
115 | 		if (order2.join('') !== '0123456789') {
116 | 			return false;
117 | 		}
118 | 
119 | 		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
120 | 		var test3 = {};
121 | 		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
122 | 			test3[letter] = letter;
123 | 		});
124 | 		if (Object.keys(Object.assign({}, test3)).join('') !==
125 | 				'abcdefghijklmnopqrst') {
126 | 			return false;
127 | 		}
128 | 
129 | 		return true;
130 | 	} catch (err) {
131 | 		// We don't expect any of the above to throw, but better to be safe.
132 | 		return false;
133 | 	}
134 | }
135 | 
136 | module.exports = shouldUseNative() ? Object.assign : function (target, source) {
137 | 	var from;
138 | 	var to = toObject(target);
139 | 	var symbols;
140 | 
141 | 	for (var s = 1; s < arguments.length; s++) {
142 | 		from = Object(arguments[s]);
143 | 
144 | 		for (var key in from) {
145 | 			if (hasOwnProperty.call(from, key)) {
146 | 				to[key] = from[key];
147 | 			}
148 | 		}
149 | 
150 | 		if (getOwnPropertySymbols) {
151 | 			symbols = getOwnPropertySymbols(from);
152 | 			for (var i = 0; i < symbols.length; i++) {
153 | 				if (propIsEnumerable.call(from, symbols[i])) {
154 | 					to[symbols[i]] = from[symbols[i]];
155 | 				}
156 | 			}
157 | 		}
158 | 	}
159 | 
160 | 	return to;
161 | };
162 | 
163 | },{}],8:[function(require,module,exports){
164 | 'use strict';
165 | var strictUriEncode = require('strict-uri-encode');
166 | var objectAssign = require('object-assign');
167 | 
168 | function encoderForArrayFormat(opts) {
169 | 	switch (opts.arrayFormat) {
170 | 		case 'index':
171 | 			return function (key, value, index) {
172 | 				return value === null ? [
173 | 					encode(key, opts),
174 | 					'[',
175 | 					index,
176 | 					']'
177 | 				].join('') : [
178 | 					encode(key, opts),
179 | 					'[',
180 | 					encode(index, opts),
181 | 					']=',
182 | 					encode(value, opts)
183 | 				].join('');
184 | 			};
185 | 
186 | 		case 'bracket':
187 | 			return function (key, value) {
188 | 				return value === null ? encode(key, opts) : [
189 | 					encode(key, opts),
190 | 					'[]=',
191 | 					encode(value, opts)
192 | 				].join('');
193 | 			};
194 | 
195 | 		default:
196 | 			return function (key, value) {
197 | 				return value === null ? encode(key, opts) : [
198 | 					encode(key, opts),
199 | 					'=',
200 | 					encode(value, opts)
201 | 				].join('');
202 | 			};
203 | 	}
204 | }
205 | 
206 | function parserForArrayFormat(opts) {
207 | 	var result;
208 | 
209 | 	switch (opts.arrayFormat) {
210 | 		case 'index':
211 | 			return function (key, value, accumulator) {
212 | 				result = /\[(\d*)\]$/.exec(key);
213 | 
214 | 				key = key.replace(/\[\d*\]$/, '');
215 | 
216 | 				if (!result) {
217 | 					accumulator[key] = value;
218 | 					return;
219 | 				}
220 | 
221 | 				if (accumulator[key] === undefined) {
222 | 					accumulator[key] = {};
223 | 				}
224 | 
225 | 				accumulator[key][result[1]] = value;
226 | 			};
227 | 
228 | 		case 'bracket':
229 | 			return function (key, value, accumulator) {
230 | 				result = /(\[\])$/.exec(key);
231 | 
232 | 				key = key.replace(/\[\]$/, '');
233 | 
234 | 				if (!result || accumulator[key] === undefined) {
235 | 					accumulator[key] = value;
236 | 					return;
237 | 				}
238 | 
239 | 				accumulator[key] = [].concat(accumulator[key], value);
240 | 			};
241 | 
242 | 		default:
243 | 			return function (key, value, accumulator) {
244 | 				if (accumulator[key] === undefined) {
245 | 					accumulator[key] = value;
246 | 					return;
247 | 				}
248 | 
249 | 				accumulator[key] = [].concat(accumulator[key], value);
250 | 			};
251 | 	}
252 | }
253 | 
254 | function encode(value, opts) {
255 | 	if (opts.encode) {
256 | 		return opts.strict ? strictUriEncode(value) : encodeURIComponent(value);
257 | 	}
258 | 
259 | 	return value;
260 | }
261 | 
262 | function keysSorter(input) {
263 | 	if (Array.isArray(input)) {
264 | 		return input.sort();
265 | 	} else if (typeof input === 'object') {
266 | 		return keysSorter(Object.keys(input)).sort(function (a, b) {
267 | 			return Number(a) - Number(b);
268 | 		}).map(function (key) {
269 | 			return input[key];
270 | 		});
271 | 	}
272 | 
273 | 	return input;
274 | }
275 | 
276 | exports.extract = function (str) {
277 | 	return str.split('?')[1] || '';
278 | };
279 | 
280 | exports.parse = function (str, opts) {
281 | 	opts = objectAssign({arrayFormat: 'none'}, opts);
282 | 
283 | 	var formatter = parserForArrayFormat(opts);
284 | 
285 | 	// Create an object with no prototype
286 | 	// https://github.com/sindresorhus/query-string/issues/47
287 | 	var ret = Object.create(null);
288 | 
289 | 	if (typeof str !== 'string') {
290 | 		return ret;
291 | 	}
292 | 
293 | 	str = str.trim().replace(/^(\?|#|&)/, '');
294 | 
295 | 	if (!str) {
296 | 		return ret;
297 | 	}
298 | 
299 | 	str.split('&').forEach(function (param) {
300 | 		var parts = param.replace(/\+/g, ' ').split('=');
301 | 		// Firefox (pre 40) decodes `%3D` to `=`
302 | 		// https://github.com/sindresorhus/query-string/pull/37
303 | 		var key = parts.shift();
304 | 		var val = parts.length > 0 ? parts.join('=') : undefined;
305 | 
306 | 		// missing `=` should be `null`:
307 | 		// http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
308 | 		val = val === undefined ? null : decodeURIComponent(val);
309 | 
310 | 		formatter(decodeURIComponent(key), val, ret);
311 | 	});
312 | 
313 | 	return Object.keys(ret).sort().reduce(function (result, key) {
314 | 		var val = ret[key];
315 | 		if (Boolean(val) && typeof val === 'object' && !Array.isArray(val)) {
316 | 			// Sort object keys, not values
317 | 			result[key] = keysSorter(val);
318 | 		} else {
319 | 			result[key] = val;
320 | 		}
321 | 
322 | 		return result;
323 | 	}, Object.create(null));
324 | };
325 | 
326 | exports.stringify = function (obj, opts) {
327 | 	var defaults = {
328 | 		encode: true,
329 | 		strict: true,
330 | 		arrayFormat: 'none'
331 | 	};
332 | 
333 | 	opts = objectAssign(defaults, opts);
334 | 
335 | 	var formatter = encoderForArrayFormat(opts);
336 | 
337 | 	return obj ? Object.keys(obj).sort().map(function (key) {
338 | 		var val = obj[key];
339 | 
340 | 		if (val === undefined) {
341 | 			return '';
342 | 		}
343 | 
344 | 		if (val === null) {
345 | 			return encode(key, opts);
346 | 		}
347 | 
348 | 		if (Array.isArray(val)) {
349 | 			var result = [];
350 | 
351 | 			val.slice().forEach(function (val2) {
352 | 				if (val2 === undefined) {
353 | 					return;
354 | 				}
355 | 
356 | 				result.push(formatter(key, val2, result.length));
357 | 			});
358 | 
359 | 			return result.join('&');
360 | 		}
361 | 
362 | 		return encode(key, opts) + '=' + encode(val, opts);
363 | 	}).filter(function (x) {
364 | 		return x.length > 0;
365 | 	}).join('&') : '';
366 | };
367 | 
368 | },{"object-assign":7,"strict-uri-encode":6}],9:[function(require,module,exports){
369 | var inserted = exports.cache = {}
370 | 
371 | exports.insert = function (css) {
372 |   if (inserted[css]) return
373 |   inserted[css] = true
374 | 
375 |   var elem = document.createElement('style')
376 |   elem.setAttribute('type', 'text/css')
377 | 
378 |   if ('textContent' in elem) {
379 |     elem.textContent = css
380 |   } else {
381 |     elem.styleSheet.cssText = css
382 |   }
383 | 
384 |   document.getElementsByTagName('head')[0].appendChild(elem)
385 |   return elem
386 | }
387 | 
388 | },{}],10:[function(require,module,exports){
389 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var FORMAT="YYYY-MM-DD";exports.FORMAT=FORMAT,exports.default={startDate:moment().subtract(6,"days").startOf("day").format(FORMAT),endDate:moment().endOf("day").format(FORMAT)};
390 | 
391 | },{}],11:[function(require,module,exports){
392 | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var __vueify_insert__=require("vueify/lib/insert-css"),__vueify_style__=__vueify_insert__.insert(".pos-rel[_v-4de4f3ca]{position:relative}.p-0[_v-4de4f3ca]{padding:0}.cursor-pointer[_v-4de4f3ca]{cursor:pointer}.-date-range>i[_v-4de4f3ca]{position:absolute;top:13px;left:15px;pointer-events:none}.-date-range>input[_v-4de4f3ca]{border:none;background-color:transparent;padding:10px 15px 10px 35px;min-width:240px}");Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},_vueUpdateQueryMixin=require("vue-update-query-mixin"),_vueUpdateQueryMixin2=_interopRequireDefault(_vueUpdateQueryMixin),_defaultRange=require("./defaultRange"),_defaultRange2=_interopRequireDefault(_defaultRange);exports.default={mixins:[_vueUpdateQueryMixin2.default],props:{config:{type:Object,default:function(){return{}}}},computed:{startDate:function(){if(this)return this.$route.query.startDate||_defaultRange2.default.startDate},endDate:function(){if(this)return this.$route.query.endDate||_defaultRange2.default.endDate}},attached:function(){var e=this;$(this.$els.drp).daterangepicker(_extends({locale:{format:_defaultRange.FORMAT},autoUpdateInput:!0,showDropdowns:!0,opens:"center",ranges:{"Last 7 days":[moment().subtract(6,"days").startOf("day"),moment().endOf("day")],"Last 15 days":[moment().subtract(14,"days").startOf("day"),moment().endOf("day")],"Last 30 days":[moment().subtract(29,"days").startOf("day"),moment().endOf("day")],"This month":[moment().startOf("month"),moment().endOf("month")],"Last Month":[moment().subtract(1,"month").startOf("month"),moment().subtract(1,"month").endOf("month")]},startDate:this.startDate,endDate:this.endDate},this.config)).on("apply.daterangepicker",function(t,a){var n=a.startDate,r=a.endDate;e.updateQuery({startDate:n.format(_defaultRange.FORMAT),endDate:r.format(_defaultRange.FORMAT)})})}},module.exports.__esModule&&(module.exports=module.exports.default),("function"==typeof module.exports?module.exports.options:module.exports).template='<div class="btn btn-default pos-rel p-0 -date-range" _v-4de4f3ca=""><i class="glyphicon glyphicon-calendar" _v-4de4f3ca=""></i> <input class=cursor-pointer readonly v-el:drp="" placeholder="Select a date range..." _v-4de4f3ca=""></div>';
393 | },{"./defaultRange":10,"vue-update-query-mixin":5,"vueify/lib/insert-css":9}]},{},[11])(11)
394 | });


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Vue Date Range Picker Component Example</title>
 6 |   <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
 7 |   <link href="//cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.min.css" rel="stylesheet">
 8 | </head>
 9 | <body>
10 | 
11 |   <div id="app" class="container" style="margin-top:50px">
12 |     <button class="btn btn-default btn-xs btn-block" onclick="location.reload()">
13 |       Click me to force reload current page, to see how the component keep in sync with URL's query string
14 |     </button>
15 |     <br>
16 |     <code>$route.query: {{ $route.query | json }}</code>
17 |     <hr>
18 |     <date-range-picker></date-range-picker>
19 |   </div>
20 | 
21 | <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
22 | <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
23 | <script src="//cdn.bootcss.com/vue/1.0.28/vue.min.js"></script>
24 | <script src="//cdn.bootcss.com/vue-router/0.7.13/vue-router.min.js"></script>
25 | <script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
26 | <script src="//cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js"></script>
27 | <script src="./dist/vue-daterangepicker-component.min.js"></script>
28 | <script>
29 | // setup
30 | Vue.use(VueRouter);
31 | Vue.config.devtools = true;
32 | 
33 | // root component
34 | var App = {
35 |   components: { DateRangePicker: VueDateRangePicker }
36 | };
37 | 
38 | // run app!
39 | var router = new VueRouter();
40 | router.map({ '/': { component: { template: '<div></div>' } } });
41 | router.start(App, '#app');
42 | </script>
43 | </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-daterangepicker-component",
 3 |   "description": "Date range picker for Vue 1.x, based on bootstrap-daterangepicker",
 4 |   "author": "Ken Berkeley <kenberkeley@foxmail.com>",
 5 |   "version": "1.0.0",
 6 |   "main": "src/index.vue",
 7 |   "scripts": {
 8 |     "lint": "eslint src/",
 9 |     "build": "npm run lint && cross-env NODE_ENV=production browserify -s VueDateRangePicker ./ -o dist/vue-daterangepicker-component.min.js"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "https://github.com/kenberkeley/vue-daterangepicker-component.git"
14 |   },
15 |   "keywords": [
16 |     "vue",
17 |     "daterange",
18 |     "daterangepicker",
19 |     "picker"
20 |   ],
21 |   "dependencies": {
22 |     "vue-update-query-mixin": "^1.0.4"
23 |   },
24 |   "devDependencies": {
25 |     "babel-cli": "^6.18.0",
26 |     "babel-core": "^6.21.0",
27 |     "babel-plugin-transform-runtime": "^6.15.0",
28 |     "babel-preset-es2015": "^6.18.0",
29 |     "babel-preset-stage-2": "^6.18.0",
30 |     "babel-runtime": "^6.20.0",
31 |     "babelify": "^7.3.0",
32 |     "browserify": "^13.1.1",
33 |     "browserify-shim": "^3.8.12",
34 |     "cross-env": "^3.1.3",
35 |     "eslint": "^3.12.2",
36 |     "eslint-config-vue": "^2.0.1",
37 |     "eslint-plugin-vue": "^1.0.0",
38 |     "uglifyify": "^3.0.4",
39 |     "vueify": "^8.7.0"
40 |   },
41 |   "browserify": {
42 |     "transform": [
43 |       "browserify-shim",
44 |       "babelify",
45 |       "vueify",
46 |       "uglifyify"
47 |     ]
48 |   },
49 |   "browserify-shim": {
50 |     "vue": "global:Vue"
51 |   },
52 |   "license": "MIT"
53 | }
54 | 


--------------------------------------------------------------------------------
/src/defaultRange.js:
--------------------------------------------------------------------------------
1 | const FORMAT = 'YYYY-MM-DD'
2 | export { FORMAT }
3 | 
4 | // Default range is one week
5 | export default {
6 |   startDate: moment().subtract(6, 'days').startOf('day').format(FORMAT),
7 |   endDate: moment().endOf('day').format(FORMAT)
8 | }
9 | 


--------------------------------------------------------------------------------
/src/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="btn btn-default pos-rel p-0 -date-range">
 3 |     <i class="glyphicon glyphicon-calendar"></i>
 4 |     <input class="cursor-pointer" readonly
 5 |       v-el:drp placeholder="Select a date range...">
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | import updateQuery from 'vue-update-query-mixin'
10 | import { default as defaultRange, FORMAT } from './defaultRange'
11 | 
12 | export default {
13 |   mixins: [updateQuery],
14 |   props: {
15 |     // more options see http://www.daterangepicker.com/#options
16 |     config: { type: Object, default: () => ({}) }
17 |   },
18 |   computed: {
19 |     startDate () {
20 |       if (!this) return // TypeError: Cannot read property '$route' of null
21 |       return this.$route.query.startDate || defaultRange.startDate
22 |     },
23 |     endDate () {
24 |       if (!this) return
25 |       return this.$route.query.endDate || defaultRange.endDate
26 |     }
27 |   },
28 |   attached() {
29 |     $(this.$els.drp).daterangepicker({
30 |       locale: { format: FORMAT },
31 |       autoUpdateInput: true,
32 |       showDropdowns: true,
33 |       opens: 'center',
34 |       ranges: {
35 |         'Last 7 days': [
36 |           moment().subtract(6, 'days').startOf('day'),
37 |           moment().endOf('day')
38 |         ],
39 |         'Last 15 days': [
40 |           moment().subtract(14, 'days').startOf('day'),
41 |           moment().endOf('day')
42 |         ],
43 |         'Last 30 days': [
44 |           moment().subtract(29, 'days').startOf('day'),
45 |           moment().endOf('day')
46 |         ],
47 |         'This month': [
48 |           moment().startOf('month'),
49 |           moment().endOf('month')
50 |         ],
51 |         'Last Month': [
52 |           moment().subtract(1, 'month').startOf('month'),
53 |           moment().subtract(1, 'month').endOf('month')
54 |         ]
55 |       },
56 |       startDate: this.startDate,
57 |       endDate: this.endDate,
58 |       ...this.config
59 |     })
60 |     .on('apply.daterangepicker', (e, { startDate, endDate }) => {
61 |       this.updateQuery({
62 |         startDate: startDate.format(FORMAT),
63 |         endDate: endDate.format(FORMAT)
64 |       })
65 |     })
66 |   }
67 | }
68 | </script>
69 | <style scoped>
70 | .pos-rel {
71 |   position: relative;
72 | }
73 | .p-0 {
74 |   padding: 0;
75 | }
76 | .cursor-pointer {
77 |   cursor: pointer;
78 | }
79 | .-date-range > i {
80 |   position: absolute;
81 |   top: 13px;
82 |   left: 15px;
83 |   pointer-events: none;
84 | }
85 | .-date-range > input {
86 |   border: none;
87 |   background-color: transparent;
88 |   padding: 10px 15px 10px 35px;
89 |   min-width: 240px;
90 | }
91 | </style>
92 | 


--------------------------------------------------------------------------------