v2 first commit

resources/assets/js/components/DataRangePicker.vue

@@ -0,0 +1,50 @@
+<template>
+    <date-range-picker
+        :startDate="startDate"
+        :endDate="endDate"
+        @update="console.log(value)"
+        :locale-data="locale"
+        :opens="opens"
+    >
+    <!--Optional scope for the input displaying the dates -->
+    <div slot="input" slot-scope="picker">...</div>
+</date-range-picker>
+</template>
+
+<script>
+export default {
+    components: { DateRangePicker },
+    data() {
+        return {
+            startDate: '2017-09-05',
+            endDate: '2017-09-15',
+            opens: "center",//which way the picker opens, default "center", can be "left"/"right"
+            locale: {
+                direction: 'ltr', //direction of text
+                format: 'DD-MM-YYYY', //fomart of the dates displayed
+                separator: ' - ', //separator between the two ranges
+                applyLabel: 'Apply',
+                cancelLabel: 'Cancel',
+                weekLabel: 'W',
+                customRangeLabel: 'Custom Range',
+                daysOfWeek: moment.weekdaysMin(), //array of days - see moment documenations for details
+                monthNames: moment.monthsShort(), //array of month names - see moment documenations for details
+                firstDay: 1 //ISO first day of week - see moment documenations for details
+                showWeekNumbers: true //show week numbers on each row of the calendar
+            },
+            ranges: { //default value for ranges object (if you set this to false ranges will no be rendered)
+                'Today': [moment(), moment()],
+                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+                'This month': [moment().startOf('month'), moment().endOf('month')],
+                'This year': [moment().startOf('year'), moment().endOf('year')],
+                'Last week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
+                'Last month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
+            }
+        }
+    }
+}
+</script>
+
+
+//you need to import the CSS manually (in case you want to override it)
+import 'vue2-daterange-picker/dist/lib/vue-daterange-picker.min.css'