feat: Creates custom date range picker component (#2597)

* feat: Adds custom date range in reports

* error fixes

* Creates new component for date range and adds stories

* Revert files

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/ui/DateRangePicker.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="woot-date-range-picker">
+    <date-picker
+      :range="true"
+      :confirm="true"
+      :clearable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script>
+import DatePicker from 'vue2-datepicker';
+import 'vue2-datepicker/index.css';
+export default {
+  components: { DatePicker },
+  props: {
+    confirmText: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    updateValue(val) {
+      this.$emit('change', val);
+    },
+    handleChange(value) {
+      this.updateValue(value);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.woot-date-range-picker {
+  margin-left: var(--space-smaller);
+
+  .mx-input {
+    display: flex;
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-normal);
+    box-shadow: none;
+    height: 4.6rem;
+  }
+}
+</style>

app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js

@@ -0,0 +1,38 @@
+import { action } from '@storybook/addon-actions';
+import WootDateRangePicker from '../DateRangePicker';
+
+export default {
+  title: 'Components/Date Picker/Date Range Picker',
+  argTypes: {
+    confirmText: {
+      defaultValue: 'Apply',
+      control: {
+        type: 'text',
+      },
+    },
+    placeholder: {
+      defaultValue: 'Select date range',
+      control: {
+        type: 'text',
+      },
+    },
+    value: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { WootDateRangePicker },
+  template:
+    '<woot-date-range-picker v-bind="$props" @change="onChange"></woot-date-range-picker>',
+});
+
+export const DateRangePicker = Template.bind({});
+DateRangePicker.args = {
+  onChange: action('applied'),
+  value: [new Date(), new Date()],
+};