├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    └── index.html
├── screenshot.png
└── src
    ├── App.vue
    ├── components
        ├── DateRangePicker.vue
        └── DateRangePickerCalendar.vue
    └── main.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Antoine Matyja
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-date-range-picker
 2 | A vue component using Bootstrap 4 styles for date range selection
 3 | 
 4 | ![Vue-Treeselect Screenshot](https://raw.githubusercontent.com/Owumaro/vue-date-range-picker/master/screenshot.png)
 5 | 
 6 | [Live demo (jsfiddle)](https://jsfiddle.net/Owumaro/qw7mpfr8/)
 7 | 
 8 | ### Features
 9 | 
10 | - Date range selection
11 | - Compare feature: select a second date range
12 | - No integration: DIY with your favorite vue components or js libraries
13 | - Bootstrap 4 styles (requires Bootstrap 4 CSS)
14 | - Returns Moment.js instances (requires moment.js)
15 | 
16 | ## Installation
17 | 
18 | ```
19 | npm install --save @owumaro/vue-date-range-picker
20 | ```
21 | 
22 | ## Usage
23 | 
24 | ### Webpack
25 | 
26 | #### JavaScript
27 | ```js
28 | // Import the component
29 | import DateRangePicker from '@owumaro/vue-date-range-picker'
30 | 
31 | export default {
32 |   // Register the component
33 |   components: { DateRangePicker },
34 |   
35 |   // Create a method for the submit event
36 |   methods: {
37 |     updateRanges: function(range) {
38 |       ...
39 |     }
40 |   },
41 |   ...
42 | }
43 | ```
44 | 
45 | #### HTML template
46 | ```html
47 | <date-range-picker v-on:submit="updateRanges" />
48 | ```
49 | 
50 | ## API
51 | 
52 | ### Events
53 | 
54 | As the component needs to transmit multiple values (`startDate`, `endDate`, `compare`, `startDateCompare`, `endDateCompare`), it can not use `v-model`.
55 | 
56 | Instead, it triggers 2 events:
57 | - `submit`: when the submit button is clicked; provides an `Object` argument with the 5 attributes mentioned above
58 | - `cancel`: when the cancel button is clicked
59 | 
60 | ### Props
61 | 
62 | Prop | Type | Default | Description
63 | -----|------|---------|------------
64 | `calendar-count` | `Number` | `2` | Number of calendars to display
65 | `allow-compare` | `Boolean` | `true` | Enable/disable the comparison feature
66 | `ranges` | `Object` | `{ currentMonth: { ... }, lastMonth: { ... } }` | Predefined ranges displayed in select menu(s)
67 | `default-range-select` | `String` | `currentMonth` | Key of the range to select by default
68 | `default-range-select-compare` | `String` | `lastMonth` |  Key of the range to select by default (compare)
69 | 
70 | ## Development
71 | 
72 | ### Project setup
73 | ```
74 | npm install
75 | ```
76 | 
77 | ### Compiles and hot-reloads for development
78 | ```
79 | npm run serve
80 | ```
81 | 
82 | ### Compiles and minifies
83 | ```
84 | npm run build
85 | ```
86 | 
87 | ## Inspiration
88 | 
89 | - Google Analytics date range picker
90 | - https://github.com/dangrossman/daterangepicker
91 | 
92 | ## TODO
93 | - Tests
94 | - CSS without bootstrap dependency


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@owumaro/vue-date-range-picker",
 3 |   "version": "0.1.0",
 4 |   "description": "A date range picker",
 5 |   "author": "Owumaro",
 6 |   "main": "dist/vue-date-range-picker.js",
 7 |   "scripts": {
 8 |     "serve": "vue-cli-service serve",
 9 |     "build": "vue-cli-service build --target lib --name vue-date-range-picker src/components/DateRangePicker.vue",
10 |     "lint": "vue-cli-service lint"
11 |   },
12 |   "dependencies": {
13 |     "moment": "^2.23.0"
14 |   },
15 |   "devDependencies": {
16 |     "@fortawesome/fontawesome-svg-core": "^1.2.17",
17 |     "@fortawesome/free-solid-svg-icons": "^5.8.1",
18 |     "@fortawesome/vue-fontawesome": "^0.1.6",
19 |     "@vue/cli-plugin-babel": "^3.5.0",
20 |     "@vue/cli-plugin-eslint": "^3.5.0",
21 |     "@vue/cli-service": "^3.5.0",
22 |     "@vue/eslint-config-standard": "^4.0.0",
23 |     "babel-eslint": "^10.0.1",
24 |     "bootstrap": "^4.3.1",
25 |     "bootstrap-vue": "^2.0.0-rc.15",
26 |     "eslint": "^5.8.0",
27 |     "eslint-plugin-vue": "^5.0.0",
28 |     "jquery": "^3.3.1",
29 |     "vue": "^2.6.10",
30 |     "vue-template-compiler": "^2.6.10"
31 |   },
32 |   "repository": {
33 |     "type": "git",
34 |     "url": "git+https://github.com/Owumaro/vue-date-range-picker.git"
35 |   },
36 |   "license": "MIT",
37 |   "eslintConfig": {
38 |     "root": true,
39 |     "env": {
40 |       "node": true
41 |     },
42 |     "extends": [
43 |       "plugin:vue/essential",
44 |       "@vue/standard"
45 |     ],
46 |     "rules": {
47 |       "space-before-function-paren": [
48 |         "error",
49 |         "never"
50 |       ]
51 |     },
52 |     "parserOptions": {
53 |       "parser": "babel-eslint"
54 |     }
55 |   },
56 |   "postcss": {
57 |     "plugins": {
58 |       "autoprefixer": {}
59 |     }
60 |   },
61 |   "browserslist": [
62 |     "> 1%",
63 |     "last 2 versions",
64 |     "not ie <= 8"
65 |   ]
66 | }
67 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-date-range-picker</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-date-range-picker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Owumaro/vue-date-range-picker/6dee5a43c2f259bb6d6ac140a9a371675445153e/screenshot.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app" class="container">
  3 |     <h2 class="my-4 pb-2 border-bottom">Vue date range picker demo</h2>
  4 | 
  5 |     <h3 class="pb-2 border-bottom">Inline integration</h3>
  6 |     <div class="mb-4">
  7 |       <date-range-picker v-on:submit="submitted" />
  8 |     </div>
  9 | 
 10 |     <h3 class="pb-2 border-bottom">Modal integration</h3>
 11 |     <div class="mb-4">
 12 |       <button type="button" class="btn btn-primary" v-b-modal.exampleModal>
 13 |         <font-awesome-icon icon="calendar-alt" fixed-width />
 14 |         {{ startDate | dateFormat }} - {{ endDate | dateFormat }}
 15 |         <font-awesome-icon icon="caret-down" fixed-width />
 16 |       </button>
 17 | 
 18 |       <b-modal id="exampleModal" ref="exampleModal" size="lg" :hide-header="true" :hide-footer="true">
 19 |         <date-range-picker v-on:submit="submittedModal" v-on:cancel="cancelledModal" />
 20 |       </b-modal>
 21 |     </div>
 22 | 
 23 |     <h3 class="pb-2 border-bottom">Popover integration</h3>
 24 |     <div class="mb-4">
 25 |       <button type="button" class="btn btn-primary" id="examplePopoverButton">
 26 |         <font-awesome-icon icon="calendar-alt" fixed-width />
 27 |         {{ startDate | dateFormat }} - {{ endDate | dateFormat }}
 28 |         <font-awesome-icon icon="caret-down" fixed-width />
 29 |       </button>
 30 | 
 31 |       <b-popover ref="examplePopover" target="examplePopoverButton" triggers="click" placement="bottom">
 32 |         <date-range-picker v-on:submit="submittedPopover" v-on:cancel="cancelledPopover" />
 33 |       </b-popover>
 34 |     </div>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script>
 39 | import moment from 'moment'
 40 | import { library } from '@fortawesome/fontawesome-svg-core'
 41 | import { faCalendarAlt, faCaretDown } from '@fortawesome/free-solid-svg-icons'
 42 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 43 | import BModal from 'bootstrap-vue/es/components/modal/modal'
 44 | import BModalDirective from 'bootstrap-vue/es/directives/modal/modal'
 45 | import BPopover from 'bootstrap-vue/es/components/popover/popover'
 46 | import DateRangePicker from './components/DateRangePicker'
 47 | 
 48 | library.add(faCalendarAlt, faCaretDown)
 49 | 
 50 | export default {
 51 |   components: { DateRangePicker, FontAwesomeIcon, BModal, BPopover },
 52 |   directives: { 'b-modal': BModalDirective },
 53 |   data: () => {
 54 |     return {
 55 |       startDate: moment.utc().subtract(1, 'month').startOf('month'),
 56 |       endDate: moment.utc().subtract(1, 'month').endOf('month').startOf('day')
 57 |     }
 58 |   },
 59 |   methods: {
 60 |     submitted: function(range) {
 61 |       console.log(range)
 62 |     },
 63 |     // Modal methods
 64 |     submittedModal: function(range) {
 65 |       this.startDate = range.startDate
 66 |       this.endDate = range.endDate
 67 |       this.closeModal()
 68 |     },
 69 |     cancelledModal: function() {
 70 |       this.closeModal()
 71 |     },
 72 |     closeModal: function() {
 73 |       this.$refs.exampleModal.hide()
 74 |     },
 75 |     // Popover methods
 76 |     submittedPopover: function(range) {
 77 |       this.startDate = range.startDate
 78 |       this.endDate = range.endDate
 79 |       this.closePopover()
 80 |     },
 81 |     cancelledPopover: function() {
 82 |       this.closePopover()
 83 |     },
 84 |     closePopover: function() {
 85 |       this.$refs.examplePopover.$emit('close')
 86 |     }
 87 |   },
 88 |   filters: {
 89 |     dateFormat: function(value) {
 90 |       return value ? value.format('YYYY-MM-DD') : ''
 91 |     }
 92 |   }
 93 | }
 94 | </script>
 95 | 
 96 | <style>
 97 | @import '~bootstrap/dist/css/bootstrap.min.css';
 98 | 
 99 | .popover {
100 |   max-width: 800px;
101 | }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/src/components/DateRangePicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="d-flex daterangepicker-row">
  3 |     <!-- Calendars -->
  4 |     <div class="daterangepicker-col" v-for="calendarIndex in calendarCount" :key="calendarIndex">
  5 |       <date-range-picker-calendar
  6 |         :calendarIndex="calendarIndex"
  7 |         :calendarCount="calendarCount"
  8 |         :month="month"
  9 |         :startDate="startDate"
 10 |         :endDate="endDate"
 11 |         :compare="compare"
 12 |         :startDateCompare="startDateCompare"
 13 |         :endDateCompare="endDateCompare"
 14 |         :step="step"
 15 |         v-on:goToPrevMonth="goToPrevMonth"
 16 |         v-on:goToNextMonth="goToNextMonth"
 17 |         v-on:selectDate="selectDate"
 18 |         v-on:nextStep="nextStep"
 19 |       />
 20 |     </div>
 21 | 
 22 |     <!-- Right form -->
 23 |     <div class="daterangepicker-col">
 24 |       <div class="form-group">
 25 |         <select class="custom-select" :class="compare ? 'daterangepicker-range-border' : ''" v-model="rangeSelect">
 26 |           <option v-for="(range, rangeKey) in ranges" :key="rangeKey" :value="rangeKey">{{ range.label }}</option>
 27 |           <option value="custom">Custom range</option>
 28 |         </select>
 29 |       </div>
 30 |       <div class="form-group form-inline flex-nowrap">
 31 |         <input type="text" class="form-control w-100 daterangepicker-date-input"
 32 |           ref="startDate"
 33 |           :value="startDate | dateFormat"
 34 |           @focus="step = 'selectStartDate'" @blur="inputDate"
 35 |         >
 36 |         <span class="mx-2">
 37 |         <font-awesome-icon icon="caret-right" fixed-width />
 38 |         </span>
 39 |         <input type="text" class="form-control w-100 daterangepicker-date-input"
 40 |           ref="endDate"
 41 |           :value="endDate | dateFormat"
 42 |           @focus="step = 'selectEndDate'" @blur="inputDate"
 43 |         >
 44 |       </div>
 45 |       <div class="form-group" v-if="allowCompare">
 46 |         <div class="custom-control custom-checkbox">
 47 |           <input type="checkbox" class="custom-control-input" :id="'date-range-picker-compare-' + _uid" v-model="compare">
 48 |           <label class="custom-control-label" :for="'date-range-picker-compare-' + _uid">Compare</label>
 49 |         </div>
 50 |       </div>
 51 |       <div v-if="compare">
 52 |         <div class="form-group">
 53 |           <select class="custom-select" :class="compare ? 'daterangepicker-range-border compare' : ''" v-model="rangeSelectCompare">
 54 |             <option v-for="(range, rangeKey) in ranges" :key="rangeKey" :value="rangeKey">{{ range.label }}</option>
 55 |             <option value="custom">Custom range</option>
 56 |           </select>
 57 |         </div>
 58 |         <div class="form-group form-inline flex-nowrap">
 59 |           <input type="text" class="form-control w-100 daterangepicker-date-input compare"
 60 |             ref="startDateCompare"
 61 |             :value="startDateCompare | dateFormat"
 62 |             @focus="step = 'selectStartDateCompare'" @blur="inputDate"
 63 |             @keyup.enter="inputDate"
 64 |           >
 65 |           <span class="mx-2">
 66 |           <font-awesome-icon icon="caret-right" fixed-width />
 67 |           </span>
 68 |           <input type="text" class="form-control w-100 daterangepicker-date-input compare"
 69 |             ref="endDateCompare"
 70 |             :value="endDateCompare | dateFormat"
 71 |             @focus="step = 'selectEndDateCompare'" @blur="inputDate"
 72 |             @keyup.enter="inputDate"
 73 |           >
 74 |         </div>
 75 |       </div>
 76 |       <div class="form-group form-inline justify-content-end mb-0">
 77 |         <button type="button" class="btn btn-light" @click="cancel">Cancel</button>
 78 |         <button type="button" class="btn btn-primary ml-2" :disabled="step != null" @click="submit">Submit</button>
 79 |       </div>
 80 |     </div>
 81 |   </div>
 82 | </template>
 83 | 
 84 | <script>
 85 | import moment from 'moment'
 86 | import { library } from '@fortawesome/fontawesome-svg-core'
 87 | import { faCaretRight } from '@fortawesome/free-solid-svg-icons'
 88 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 89 | import DateRangePickerCalendar from './DateRangePickerCalendar'
 90 | 
 91 | library.add(faCaretRight)
 92 | 
 93 | export default {
 94 |   props: {
 95 |     calendarCount: {
 96 |       type: Number,
 97 |       default: 2
 98 |     },
 99 |     allowCompare: {
100 |       type: Boolean,
101 |       default: true
102 |     },
103 |     ranges: {
104 |       type: Object,
105 |       default: function() {
106 |         return {
107 |           currentMonth: {
108 |             label: 'Current month',
109 |             startDate: moment.utc().startOf('month'),
110 |             endDate: moment.utc().endOf('month').startOf('day')
111 |           },
112 |           lastMonth: {
113 |             label: 'Last month',
114 |             startDate: moment.utc().subtract(1, 'month').startOf('month'),
115 |             endDate: moment.utc().subtract(1, 'month').endOf('month').startOf('day')
116 |           }
117 |         }
118 |       }
119 |     },
120 |     defaultRangeSelect: {
121 |       type: String,
122 |       default: 'currentMonth'
123 |     },
124 |     defaultRangeSelectCompare: {
125 |       type: String,
126 |       default: 'lastMonth'
127 |     }
128 |   },
129 |   data: () => {
130 |     return {
131 |       startDate: moment.utc(),
132 |       endDate: moment.utc(),
133 |       startDateCompare: moment.utc(),
134 |       endDateCompare: moment.utc(),
135 |       rangeSelect: null,
136 |       rangeSelectCompare: null,
137 |       compare: false,
138 |       month: moment.utc().subtract(1, 'month').startOf('month'),
139 |       step: null
140 |     }
141 |   },
142 |   computed: {
143 |     nextMonth: function() {
144 |       return moment.utc(this.month).add(1, 'month')
145 |     },
146 |     // For multi prop watchers
147 |     range: function() {
148 |       return (this.startDate, this.endDate)
149 |     },
150 |     rangeCompare: function() {
151 |       return (this.startDateCompare, this.endDateCompare)
152 |     }
153 |   },
154 |   methods: {
155 |     goToPrevMonth: function() {
156 |       this.month = moment.utc(this.month).subtract(1, 'month')
157 |     },
158 |     goToNextMonth: function() {
159 |       this.month = moment.utc(this.month).add(1, 'month')
160 |     },
161 |     selectRange: function(rangeKey) {
162 |       let predefinedRange = false
163 | 
164 |       // Predefined ranges
165 |       for (const _rangeKey of Object.keys(this.ranges)) {
166 |         const range = this.ranges[_rangeKey]
167 |         if (rangeKey === _rangeKey) {
168 |           predefinedRange = true
169 | 
170 |           if (!this.startDate.isSame(range.startDate)) {
171 |             this.startDate = moment.utc(range.startDate)
172 |           }
173 |           if (!this.endDate.isSame(range.endDate)) {
174 |             this.endDate = moment.utc(range.endDate)
175 |           }
176 |         }
177 |       }
178 | 
179 |       // Custom range
180 |       if (!predefinedRange && this.step == null) {
181 |         this.step = 'selectStartDate'
182 |         this.$refs.startDate.focus()
183 |       }
184 |     },
185 |     selectRangeCompare: function(rangeKey) {
186 |       let predefinedRange = false
187 | 
188 |       // Predefined ranges
189 |       for (const _rangeKey of Object.keys(this.ranges)) {
190 |         const range = this.ranges[_rangeKey]
191 |         if (rangeKey === _rangeKey) {
192 |           predefinedRange = true
193 | 
194 |           if (!this.startDateCompare.isSame(range.startDate)) {
195 |             this.startDateCompare = moment.utc(range.startDate)
196 |           }
197 |           if (!this.endDateCompare.isSame(range.endDate)) {
198 |             this.endDateCompare = moment.utc(range.endDate)
199 |           }
200 |         }
201 |       }
202 | 
203 |       // Custom range
204 |       if (!predefinedRange && this.step === null) {
205 |         this.step = 'selectStartDateCompare'
206 |         this.$refs.startDateCompare.focus()
207 |       }
208 |     },
209 |     selectDate: function(date) {
210 |       if (this.step === 'selectStartDate') {
211 |         this.startDate = date
212 |       } else if (this.step === 'selectEndDate') {
213 |         this.endDate = date
214 |       } else if (this.step === 'selectStartDateCompare') {
215 |         this.startDateCompare = date
216 |       } else if (this.step === 'selectEndDateCompare') {
217 |         this.endDateCompare = date
218 |       }
219 |     },
220 |     // Step flow for date range selections
221 |     nextStep: function() {
222 |       if (this.step === 'selectStartDate') {
223 |         this.step = 'selectEndDate'
224 |         this.$refs.endDate.focus()
225 |       } else if (this.step === 'selectEndDate') {
226 |         this.step = null
227 |         this.$refs.endDate.blur()
228 |       } else if (this.step === 'selectStartDateCompare') {
229 |         this.step = 'selectEndDateCompare'
230 |         this.$refs.endDateCompare.focus()
231 |       } else if (this.step === 'selectEndDateCompare') {
232 |         this.step = null
233 |         this.$refs.endDateCompare.blur()
234 |       }
235 |     },
236 |     // Try to update the step date from an input value
237 |     inputDate: function(input) {
238 |       let date = moment.utc(input.target.value, 'YYYY-MM-DD')
239 |       if (date.isValid()) {
240 |         this.selectDate(date)
241 |       }
242 |       this.nextStep()
243 |     },
244 |     // Submit button
245 |     submit: function() {
246 |       this.$emit('submit', {
247 |         startDate: this.startDate,
248 |         endDate: this.endDate,
249 |         compare: this.compare,
250 |         startDateCompare: this.startDateCompare,
251 |         endDateCompare: this.endDateCompare
252 |       })
253 |     },
254 |     // Cancel button
255 |     cancel: function() {
256 |       this.$emit('cancel')
257 |     }
258 |   },
259 |   watch: {
260 |     rangeSelect: function(rangeKey) {
261 |       this.selectRange(rangeKey)
262 |     },
263 |     rangeSelectCompare: function(rangeKey) {
264 |       this.selectRangeCompare(rangeKey)
265 |     },
266 |     range: function() {
267 |       let predefinedRange = false
268 | 
269 |       // Predefined ranges
270 |       for (const rangeKey of Object.keys(this.ranges)) {
271 |         const range = this.ranges[rangeKey]
272 |         if (this.startDate.isSame(range.startDate) && this.endDate.isSame(range.endDate)) {
273 |           predefinedRange = true
274 |           if (this.rangeSelect !== rangeKey) {
275 |             this.rangeSelect = rangeKey
276 |           }
277 |         }
278 |       }
279 | 
280 |       // Custom range
281 |       if (!predefinedRange) {
282 |         if (this.rangeSelect !== 'custom') {
283 |           this.rangeSelect = 'custom'
284 |         }
285 |       }
286 |     },
287 |     rangeCompare: function() {
288 |       let predefinedRange = false
289 | 
290 |       // Predefined ranges
291 |       for (const rangeKey of Object.keys(this.ranges)) {
292 |         const range = this.ranges[rangeKey]
293 |         if (this.startDateCompare.isSame(range.startDate) && this.endDateCompare.isSame(range.endDate)) {
294 |           predefinedRange = true
295 |           if (this.rangeSelectCompare !== rangeKey) {
296 |             this.rangeSelectCompare = rangeKey
297 |           }
298 |         }
299 |       }
300 | 
301 |       // Custom range
302 |       if (!predefinedRange) {
303 |         if (this.rangeSelectCompare !== 'custom') {
304 |           this.rangeSelectCompare = 'custom'
305 |         }
306 |       }
307 |     }
308 |   },
309 |   filters: {
310 |     dateFormat: function(value) {
311 |       return value ? value.format('YYYY-MM-DD') : ''
312 |     }
313 |   },
314 |   created: function() {
315 |     // Initialize ranges
316 |     this.rangeSelect = this.defaultRangeSelect
317 |     this.rangeSelectCompare = this.defaultRangeSelectCompare
318 |   },
319 |   components: { DateRangePickerCalendar, FontAwesomeIcon }
320 | }
321 | </script>
322 | 
323 | <style>
324 | /* Custom row */
325 | .daterangepicker-row {
326 |   margin: -0.5rem;
327 | }
328 | 
329 | .daterangepicker-col {
330 |   padding: 0.5rem;
331 |   flex-basis: 100%;
332 | }
333 | 
334 | /* Make sure that the full date (YYYY-MM-DD) is displayed */
335 | .daterangepicker-date-input {
336 |   min-width: 120px;
337 | }
338 | 
339 | /* Select menus border */
340 | .daterangepicker-range-border {
341 |   border-color: #17a2b8 !important;
342 | }
343 | 
344 | .daterangepicker-range-border.compare {
345 |   border-color: #ff9307 !important;
346 | }
347 | 
348 | /* Date input focus */
349 | .daterangepicker-date-input:focus {
350 |   border-color: #17a2b8 !important;
351 |   box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25) !important;
352 | }
353 | 
354 | .daterangepicker-date-input.compare:focus {
355 |   border-color: #ff9307 !important;
356 |   box-shadow: 0 0 0 0.2rem rgba(255, 147, 7, 0.25) !important;
357 | }
358 | </style>
359 | 


--------------------------------------------------------------------------------
/src/components/DateRangePickerCalendar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="daterangepicker-calendar">
  3 |     <div class="d-flex align-items-center">
  4 |       <div class="p-1" :class="calendarIndex == 1 ? '' : 'invisible'">
  5 |         <button type="button" class="btn btn-sm btn-light" @mousedown.prevent @click="goToPrevMonth">
  6 |           <font-awesome-icon icon="caret-left" fixed-width />
  7 |         </button>
  8 |       </div>
  9 |       <div class="p-1 col text-center">
 10 |         {{ displayMonth.format('MMMM YYYY') }}
 11 |       </div>
 12 |       <div class="p-1" :class="calendarIndex == calendarCount ? '' : 'invisible'">
 13 |         <button type="button" class="btn btn-sm btn-light" @mousedown.prevent @click="goToNextMonth">
 14 |           <font-awesome-icon icon="caret-right" fixed-width />
 15 |         </button>
 16 |       </div>
 17 |     </div>
 18 |     <div class="d-flex justify-content-between text-center daterangepicker-calendar-row">
 19 |       <div v-for="day in daysOfFirstWeek" :key="day.format('D')" class="col-day">{{ day.format('ddd') }}</div>
 20 |     </div>
 21 | 
 22 |     <div class="d-flex flex-wrap justify-content-between text-center daterangepicker-calendar-row">
 23 |       <div v-for="day in days" :key="day.format('M-D')" class="col-day" :class="dayClass(day)"
 24 |         @mouseover="dayMouseOver(day)" @mousedown.prevent @click="dayClick(day)">
 25 |         {{ day.format('D') }}
 26 |       </div>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | import moment from 'moment'
 33 | import { library } from '@fortawesome/fontawesome-svg-core'
 34 | import { faCaretLeft, faCaretRight } from '@fortawesome/free-solid-svg-icons'
 35 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 36 | 
 37 | library.add(faCaretLeft, faCaretRight)
 38 | 
 39 | export default {
 40 |   props: ['calendarIndex', 'calendarCount', 'month', 'startDate', 'endDate', 'compare', 'startDateCompare', 'endDateCompare', 'step'],
 41 |   data: () => {
 42 |     return {}
 43 |   },
 44 |   computed: {
 45 |     displayMonth: function() {
 46 |       return moment.utc(this.month).add(this.calendarIndex - 1, 'month')
 47 |     },
 48 |     days: function() {
 49 |       let startDay = moment.utc(this.displayMonth).startOf('isoWeek')
 50 |       let endDay = moment.utc(this.displayMonth).endOf('month').endOf('isoWeek').startOf('day').add(1, 'day')
 51 |       let nDays = moment.duration(endDay.diff(startDay)).asDays()
 52 | 
 53 |       let days = []
 54 |       let day = 0
 55 |       while (day < nDays) {
 56 |         days.push(moment.utc(startDay).add(day, 'day'))
 57 |         day++
 58 |       }
 59 |       return days
 60 |     },
 61 |     daysOfFirstWeek: function() {
 62 |       return this.days.slice(0, 7)
 63 |     }
 64 |   },
 65 |   methods: {
 66 |     dayClass: function(day) {
 67 |       let classes = []
 68 | 
 69 |       // Hide days overflowing
 70 |       if (!day.isBetween(this.displayMonth, moment.utc(this.displayMonth).endOf('month'), 'days', '[]')) {
 71 |         classes.push('invisible')
 72 |       }
 73 |       // Class for days between startDate & endDate or is startDate (in case of startDate after endDate)
 74 |       if (day.isBetween(this.startDate, this.endDate, 'days', '[]') || day.isSame(this.startDate)) {
 75 |         classes.push('daterangepicker-range')
 76 |       }
 77 |       // Class for days between startDateCompare & endDateCompare or is startDateCompare (in case of startDateCompare after endDateCompare)
 78 |       if (this.compare && (day.isBetween(this.startDateCompare, this.endDateCompare, 'days', '[]') || day.isSame(this.startDateCompare))) {
 79 |         classes.push('daterangepicker-range-compare')
 80 |       }
 81 |       // Class for cursor if the step is selecting something
 82 |       if (this.step != null) {
 83 |         classes.push('daterangepicker-cursor-pointer')
 84 |       }
 85 | 
 86 |       return classes.join(' ')
 87 |     },
 88 |     dayMouseOver: function(day) {
 89 |       if (this.step != null) {
 90 |         this.selectDate(day)
 91 |       }
 92 |     },
 93 |     dayClick: function(day) {
 94 |       if (this.step != null) {
 95 |         this.nextStep()
 96 |       }
 97 |     },
 98 |     goToPrevMonth: function() {
 99 |       this.$emit('goToPrevMonth')
100 |     },
101 |     goToNextMonth: function() {
102 |       this.$emit('goToNextMonth')
103 |     },
104 |     selectDate: function(date) {
105 |       this.$emit('selectDate', date)
106 |     },
107 |     nextStep: function() {
108 |       this.$emit('nextStep')
109 |     }
110 |   },
111 |   watch: {},
112 |   filters: {},
113 |   components: { FontAwesomeIcon }
114 | }
115 | </script>
116 | 
117 | <style>
118 | .daterangepicker-calendar-row {
119 |   font-size: 14px;
120 |   /*max-width: 230px;*/
121 | }
122 | 
123 | .col-day {
124 |   width: 14.28%;
125 |   padding: 0.5rem 0;
126 |   white-space: nowrap;
127 |   cursor: default;
128 | }
129 | 
130 | .daterangepicker-range {
131 |   background-color: #17a2b8 !important;
132 |   color: #ffffff;
133 | }
134 | 
135 | .daterangepicker-range-compare {
136 |   background-color: #ff9307;
137 |   color: #ffffff;
138 | }
139 | 
140 | .daterangepicker-range.daterangepicker-range-compare {
141 |   background: linear-gradient(0, #ff9307 50%, #17a2b8 50%);
142 | }
143 | 
144 | .daterangepicker-cursor-pointer {
145 |   cursor: pointer;
146 | }
147 | </style>
148 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


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