diff --git a/resources/assets/js/components/base/base-date-picker/BaseDatepicker.vue b/resources/assets/js/components/base/base-date-picker/BaseDatepicker.vue
deleted file mode 100755
index 6fe307fc..00000000
--- a/resources/assets/js/components/base/base-date-picker/BaseDatepicker.vue
+++ /dev/null
@@ -1,649 +0,0 @@
-<template>
-  <div :class="[wrapperClass, isRtl ? 'rtl' : '']" class="base-date-input">
-    <date-input
-      :selected-date="selectedDate"
-      :reset-typed-date="resetTypedDate"
-      :format="customFormatter"
-      :translation="translation"
-      :inline="inline"
-      :id="id"
-      :name="name"
-      :ref-name="refName"
-      :open-date="openDate"
-      :placeholder="placeholder"
-      :input-class="inputClass"
-      :typeable="typeable"
-      :clear-button="clearButton"
-      :clear-button-icon="clearButtonIcon"
-      :calendar-button="calendarButton"
-      :calendar-button-icon="calendarButtonIcon"
-      :calendar-button-icon-content="calendarButtonIconContent"
-      :disabled="disabled"
-      :required="required"
-      :class="{'required-date': invalid}"
-      :bootstrap-styling="bootstrapStyling"
-      :use-utc="useUtc"
-      @showCalendar="showCalendar"
-      @closeCalendar="close"
-      @typedDate="setTypedDate"
-      @clearDate="clearDate">
-      <slot slot="afterDateInput" name="afterDateInput"/>
-    </date-input>
-
-    <!-- Day View -->
-    <picker-day
-      v-if="allowedToShowView('day')"
-      :page-date="pageDate"
-      :selected-date="selectedDate"
-      :show-day-view="showDayView"
-      :full-month-name="fullMonthName"
-      :allowed-to-show-view="allowedToShowView"
-      :disabled-dates="disabledDates"
-      :highlighted="highlighted"
-      :calendar-class="calendarClass"
-      :calendar-style="calendarStyle"
-      :translation="translation"
-      :page-timestamp="pageTimestamp"
-      :is-rtl="isRtl"
-      :monday-first="mondayFirst"
-      :day-cell-content="dayCellContent"
-      :use-utc="useUtc"
-      @changedMonth="handleChangedMonthFromDayPicker"
-      @selectDate="selectDate"
-      @showMonthCalendar="showMonthCalendar"
-      @selectedDisabled="selectDisabledDate">
-      <slot slot="beforeCalendarHeader" name="beforeCalendarHeader"/>
-    </picker-day>
-
-    <!-- Month View -->
-    <picker-month
-      v-if="allowedToShowView('month')"
-      :page-date="pageDate"
-      :selected-date="selectedDate"
-      :show-month-view="showMonthView"
-      :allowed-to-show-view="allowedToShowView"
-      :disabled-dates="disabledDates"
-      :calendar-class="calendarClass"
-      :calendar-style="calendarStyle"
-      :translation="translation"
-      :is-rtl="isRtl"
-      :use-utc="useUtc"
-      @selectMonth="selectMonth"
-      @showYearCalendar="showYearCalendar"
-      @changedYear="setPageDate">
-      <slot slot="beforeCalendarHeader" name="beforeCalendarHeader"/>
-    </picker-month>
-
-    <!-- Year View -->
-    <picker-year
-      v-if="allowedToShowView('year')"
-      :page-date="pageDate"
-      :selected-date="selectedDate"
-      :show-year-view="showYearView"
-      :allowed-to-show-view="allowedToShowView"
-      :disabled-dates="disabledDates"
-      :calendar-class="calendarClass"
-      :calendar-style="calendarStyle"
-      :translation="translation"
-      :is-rtl="isRtl"
-      :use-utc="useUtc"
-      @selectYear="selectYear"
-      @changedDecade="setPageDate">
-      <slot slot="beforeCalendarHeader" name="beforeCalendarHeader"/>
-    </picker-year>
-  </div>
-</template>
-<script>
-import en from './src/locale/translations/en'
-import DateInput from './DateInput'
-import PickerDay from './PickerDay.vue'
-import PickerMonth from './PickerMonth.vue'
-import PickerYear from './PickerYear.vue'
-import utils, { makeDateUtils } from './src/DateUtils'
-import { mapGetters } from 'vuex'
-import moment from 'moment'
-
-export default {
-  components: {
-    DateInput,
-    PickerDay,
-    PickerMonth,
-    PickerYear
-  },
-  props: {
-    value: {
-      validator: val => utils.validateDateInput(val)
-    },
-    name: String,
-    refName: String,
-    id: String,
-    // format: {
-    //   type: [String, Function],
-    //   default: 'dd MMM yyyy'
-    // },
-    language: {
-      type: Object,
-      default: () => en
-    },
-    openDate: {
-      validator: val => utils.validateDateInput(val)
-    },
-    dayCellContent: Function,
-    fullMonthName: Boolean,
-    disabledDates: Object,
-    highlighted: Object,
-    placeholder: String,
-    inline: Boolean,
-    calendarClass: [String, Object, Array],
-    inputClass: [String, Object, Array],
-    wrapperClass: [String, Object, Array],
-    mondayFirst: Boolean,
-    clearButton: Boolean,
-    clearButtonIcon: String,
-    calendarButton: Boolean,
-    calendarButtonIcon: String,
-    calendarButtonIconContent: String,
-    bootstrapStyling: Boolean,
-    initialView: String,
-    disabled: Boolean,
-    required: Boolean,
-    invalid: Boolean,
-    typeable: Boolean,
-    useUtc: Boolean,
-    minimumView: {
-      type: String,
-      default: 'day'
-    },
-    maximumView: {
-      type: String,
-      default: 'year'
-    }
-  },
-  data () {
-    const startDate = this.openDate ? new Date(this.openDate) : new Date()
-    const constructedDateUtils = makeDateUtils(this.useUtc)
-    const pageTimestamp = constructedDateUtils.setDate(startDate, 1)
-    return {
-      /*
-       * Vue cannot observe changes to a Date Object so date must be stored as a timestamp
-       * This represents the first day of the current viewing month
-       * {Number}
-       */
-      pageTimestamp,
-      /*
-       * Selected Date
-       * {Date}
-       */
-      selectedDate: null,
-      /*
-       * Flags to show calendar views
-       * {Boolean}
-       */
-      showDayView: false,
-      showMonthView: false,
-      showYearView: false,
-      /*
-       * Positioning
-       */
-      calendarHeight: 0,
-      resetTypedDate: new Date(),
-      utils: constructedDateUtils
-    }
-  },
-  watch: {
-    value (value) {
-      this.setValue(value)
-    },
-    openDate () {
-      this.setPageDate()
-    },
-    initialView () {
-      this.setInitialView()
-    }
-  },
-  computed: {
-    ...mapGetters('preferences', {
-      'format': 'getMomentDateFormat'
-    }),
-    customFormatter () {
-      let newDate = new Date(this.value)
-      return moment(newDate).format(this.format)
-    },
-    computedInitialView () {
-      if (!this.initialView) {
-        return this.minimumView
-      }
-
-      return this.initialView
-    },
-    pageDate () {
-      return new Date(this.pageTimestamp)
-    },
-
-    translation () {
-      return this.language
-    },
-
-    calendarStyle () {
-      return {
-        position: this.isInline ? 'static' : undefined
-      }
-    },
-    isOpen () {
-      return this.showDayView || this.showMonthView || this.showYearView
-    },
-    isInline () {
-      return !!this.inline
-    },
-    isRtl () {
-      return this.translation.rtl === true
-    }
-  },
-  mounted () {
-    this.init()
-  },
-  methods: {
-    /**
-     * Called in the event that the user navigates to date pages and
-     * closes the picker without selecting a date.
-     */
-    resetDefaultPageDate () {
-      if (this.selectedDate === null) {
-        this.setPageDate()
-        return
-      }
-      this.setPageDate(this.selectedDate)
-    },
-    /**
-     * Effectively a toggle to show/hide the calendar
-     * @return {mixed}
-     */
-    showCalendar () {
-      if (this.disabled || this.isInline) {
-        return false
-      }
-      if (this.isOpen) {
-        return this.close(true)
-      }
-      this.setInitialView()
-    },
-    /**
-     * Sets the initial picker page view: day, month or year
-     */
-    setInitialView () {
-      const initialView = this.computedInitialView
-      if (!this.allowedToShowView(initialView)) {
-        throw new Error(`initialView '${this.initialView}' cannot be rendered based on minimum '${this.minimumView}' and maximum '${this.maximumView}'`)
-      }
-      switch (initialView) {
-        case 'year':
-          this.showYearCalendar()
-          break
-        case 'month':
-          this.showMonthCalendar()
-          break
-        default:
-          this.showDayCalendar()
-          break
-      }
-    },
-    /**
-     * Are we allowed to show a specific picker view?
-     * @param {String} view
-     * @return {Boolean}
-     */
-    allowedToShowView (view) {
-      const views = ['day', 'month', 'year']
-      const minimumViewIndex = views.indexOf(this.minimumView)
-      const maximumViewIndex = views.indexOf(this.maximumView)
-      const viewIndex = views.indexOf(view)
-
-      return viewIndex >= minimumViewIndex && viewIndex <= maximumViewIndex
-    },
-    /**
-     * Show the day picker
-     * @return {Boolean}
-     */
-    showDayCalendar () {
-      if (!this.allowedToShowView('day')) {
-        return false
-      }
-      this.close()
-      this.showDayView = true
-      return true
-    },
-    /**
-     * Show the month picker
-     * @return {Boolean}
-     */
-    showMonthCalendar () {
-      if (!this.allowedToShowView('month')) {
-        return false
-      }
-      this.close()
-      this.showMonthView = true
-      return true
-    },
-    /**
-     * Show the year picker
-     * @return {Boolean}
-     */
-    showYearCalendar () {
-      if (!this.allowedToShowView('year')) {
-        return false
-      }
-      this.close()
-      this.showYearView = true
-      return true
-    },
-    /**
-     * Set the selected date
-     * @param {Number} timestamp
-     */
-    setDate (timestamp) {
-      const date = new Date(timestamp)
-      this.selectedDate = date
-      this.setPageDate(date)
-      this.$emit('selected', date)
-      this.$emit('input', date)
-    },
-    /**
-     * Clear the selected date
-     */
-    clearDate () {
-      this.selectedDate = null
-      this.setPageDate()
-      this.$emit('selected', null)
-      this.$emit('input', null)
-      this.$emit('cleared')
-    },
-    /**
-     * @param {Object} date
-     */
-    selectDate (date) {
-      this.setDate(date.timestamp)
-      if (!this.isInline) {
-        this.close(true)
-      }
-      this.resetTypedDate = new Date()
-    },
-    /**
-     * @param {Object} date
-     */
-    selectDisabledDate (date) {
-      this.$emit('selectedDisabled', date)
-    },
-    /**
-     * @param {Object} month
-     */
-    selectMonth (month) {
-      const date = new Date(month.timestamp)
-      if (this.allowedToShowView('day')) {
-        this.setPageDate(date)
-        this.$emit('changedMonth', month)
-        this.showDayCalendar()
-      } else {
-        this.selectDate(month)
-      }
-    },
-    /**
-     * @param {Object} year
-     */
-    selectYear (year) {
-      const date = new Date(year.timestamp)
-      if (this.allowedToShowView('month')) {
-        this.setPageDate(date)
-        this.$emit('changedYear', year)
-        this.showMonthCalendar()
-      } else {
-        this.selectDate(year)
-      }
-    },
-    /**
-     * Set the datepicker value
-     * @param {Date|String|Number|null} date
-     */
-    setValue (date) {
-      if (typeof date === 'string' || typeof date === 'number') {
-        let parsed = new Date(date)
-        date = isNaN(parsed.valueOf()) ? null : parsed
-      }
-      if (!date) {
-        this.setPageDate()
-        this.selectedDate = null
-        return
-      }
-      this.selectedDate = date
-      this.setPageDate(date)
-    },
-    /**
-     * Sets the date that the calendar should open on
-     */
-    setPageDate (date) {
-      if (!date) {
-        if (this.openDate) {
-          date = new Date(this.openDate)
-        } else {
-          date = new Date()
-        }
-      }
-      this.pageTimestamp = this.utils.setDate(new Date(date), 1)
-    },
-    /**
-     * Handles a month change from the day picker
-     */
-    handleChangedMonthFromDayPicker (date) {
-      this.setPageDate(date)
-      this.$emit('changedMonth', date)
-    },
-    /**
-     * Set the date from a typedDate event
-     */
-    setTypedDate (date) {
-      this.setDate(date.getTime())
-    },
-    /**
-     * Close all calendar layers
-     * @param {Boolean} emitEvent - emit close event
-     */
-    close (emitEvent) {
-      this.showDayView = this.showMonthView = this.showYearView = false
-      if (!this.isInline) {
-        if (emitEvent) {
-          this.$emit('closed')
-        }
-        document.removeEventListener('click', this.clickOutside, false)
-      }
-    },
-    /**
-     * Initiate the component
-     */
-    init () {
-      if (this.value) {
-        this.setValue(this.value)
-      }
-      if (this.isInline) {
-        this.setInitialView()
-      }
-    }
-  },
-}
-// eslint-disable-next-line
-;
-</script>
-<style lang="css">
-.rtl {
-	direction: rtl;
-}
-
-.required-date {
-  border: 1px solid #FB7178;
-  border-radius: 5px;
-}
-
-.vdp-datepicker {
-	position: relative;
-	text-align: left;
-}
-
-.vdp-datepicker * {
-	box-sizing: border-box;
-}
-
-.vdp-datepicker__calendar {
-	position: absolute;
-	z-index: 100;
-	background: #fff;
-	width: 300px;
-	border: 1px solid #ccc;
-}
-
-.vdp-datepicker__calendar header {
-	display: block;
-	line-height: 40px;
-}
-
-.vdp-datepicker__calendar header span {
-	display: inline-block;
-	text-align: center;
-	width: 71.42857142857143%;
-	float: left;
-}
-
-.vdp-datepicker__calendar header .prev,
-.vdp-datepicker__calendar header .next {
-	width: 14.285714285714286%;
-	float: left;
-	text-indent: -10000px;
-	position: relative;
-}
-
-.vdp-datepicker__calendar header .prev:after,
-.vdp-datepicker__calendar header .next:after {
-	content: '';
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	transform: translateX(-50%) translateY(-50%);
-	border: 6px solid transparent;
-}
-
-.vdp-datepicker__calendar header .prev:after {
-	border-right: 10px solid #000;
-	margin-left: -5px;
-}
-
-.vdp-datepicker__calendar header .prev.disabled:after {
-	border-right: 10px solid #ddd;
-}
-
-.vdp-datepicker__calendar header .next:after {
-	border-left: 10px solid #000;
-	margin-left: 5px;
-}
-
-.vdp-datepicker__calendar header .next.disabled:after {
-	border-left: 10px solid #ddd;
-}
-
-.vdp-datepicker__calendar header .prev:not(.disabled),
-.vdp-datepicker__calendar header .next:not(.disabled),
-.vdp-datepicker__calendar header .up:not(.disabled) {
-	cursor: pointer;
-}
-
-.vdp-datepicker__calendar header .prev:not(.disabled):hover,
-.vdp-datepicker__calendar header .next:not(.disabled):hover,
-.vdp-datepicker__calendar header .up:not(.disabled):hover {
-	background: #eee;
-}
-
-.vdp-datepicker__calendar .disabled {
-	color: #ddd;
-	cursor: default;
-}
-
-.vdp-datepicker__calendar .flex-rtl {
-	display: flex;
-	width: inherit;
-	flex-wrap: wrap;
-}
-
-.vdp-datepicker__calendar .cell {
-	display: inline-block;
-	padding: 0 5px;
-	width: 14.285714285714286%;
-	height: 40px;
-	line-height: 40px;
-	text-align: center;
-	vertical-align: middle;
-	border: 1px solid transparent;
-}
-
-.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,
-.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,
-.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {
-	cursor: pointer;
-}
-
-.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
-.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,
-.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
-	border: 1px solid #4bd;
-}
-
-.vdp-datepicker__calendar .cell.selected {
-	background: #4bd;
-}
-
-.vdp-datepicker__calendar .cell.selected:hover {
-	background: #4bd;
-}
-
-.vdp-datepicker__calendar .cell.selected.highlighted {
-	background: #4bd;
-}
-
-.vdp-datepicker__calendar .cell.highlighted {
-	background: #cae5ed;
-}
-
-.vdp-datepicker__calendar .cell.highlighted.disabled {
-	color: #a3a3a3;
-}
-
-.vdp-datepicker__calendar .cell.grey {
-	color: #888;
-}
-
-.vdp-datepicker__calendar .cell.grey:hover {
-	background: inherit;
-}
-
-.vdp-datepicker__calendar .cell.day-header {
-	font-size: 75%;
-	white-space: nowrap;
-	cursor: inherit;
-}
-
-.vdp-datepicker__calendar .cell.day-header:hover {
-	background: inherit;
-}
-
-.vdp-datepicker__calendar .month,
-.vdp-datepicker__calendar .year {
-	width: 33.333%;
-}
-
-.vdp-datepicker__clear-button,
-.vdp-datepicker__calendar-button {
-	cursor: pointer;
-	font-style: normal;
-}
-
-.vdp-datepicker__clear-button.disabled,
-.vdp-datepicker__calendar-button.disabled {
-	color: #999;
-	cursor: default;
-}
-</style>