diff --git a/docs-src/pages/UiDatepicker.vue b/docs-src/pages/UiDatepicker.vue
index e6cac6b6..549ee21a 100644
--- a/docs-src/pages/UiDatepicker.vue
+++ b/docs-src/pages/UiDatepicker.vue
@@ -208,6 +208,30 @@
                 disabled
                 placeholder="Select a date"
             >A Special Day</ui-datepicker>
+
+            <h4 class="page__demo-title">Daterange picker</h4>
+
+            <ui-datepicker
+                v-model="picker16"
+                placeholder="Select a date"
+            >A Date Range</ui-datepicker>
+
+            <h4 class="page__demo-title">Daterange picker in a modal</h4>
+
+            <ui-datepicker
+                v-model="picker17"
+                placeholder="Select a date"
+                picker-type="modal"
+            >A Date Range</ui-datepicker>
+
+            <h4 class="page__demo-title">Daterange picker in a modal with 3 calendars</h4>
+
+            <ui-datepicker
+                v-model="picker18"
+                :calendars-number="3"
+                placeholder="Select a date"
+                picker-type="modal"
+            >A Date Range</ui-datepicker>
         </div>
 
         <h3 class="page__section-title">API</h3>
@@ -228,11 +252,12 @@
                         <tbody>
                             <tr>
                                 <td class="no-wrap">modelValue, v-model *</td>
-                                <td>Date, String</td>
+                                <td>Date, String, Array</td>
                                 <td></td>
                                 <td>
                                     <p>The model the selected date syncs to. Can be set initially for a default value.</p>
                                     <p>If you are not using <code>v-model</code>, you should listen for the <code>update:modelValue</code> event and update <code>modelValue</code>.</p>
+                                    <p>Use an Array with <code>0</code>, <code>1</code> or <code>2</code> Date values for a date range picker, where the first value is the start of the range and the last value is the end of the range.</p>
                                 </td>
                             </tr>
 
@@ -452,6 +477,15 @@
                                     <p>Whether or not the datepicker is disabled. Set to <code>true</code> to disable the datepicker.</p>
                                 </td>
                             </tr>
+
+                            <tr>
+                                <td>calendarsNumber</td>
+                                <td>Number</td>
+                                <td><code>2</code></td>
+                                <td>
+                                    <p>The number of calendars to show when using a <strong>date range picker</strong>.</p>
+                                </td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>
@@ -651,7 +685,10 @@ export default {
             picker13: null,
             picker1301: null,
             picker14: null,
-            picker15: new Date()
+            picker15: new Date(),
+            picker16: [],
+            picker17: [],
+            picker18: []
         };
     },
 
diff --git a/src/UiCalendarControls.vue b/src/UiCalendarControls.vue
index 73186793..2b2ab066 100644
--- a/src/UiCalendarControls.vue
+++ b/src/UiCalendarControls.vue
@@ -2,6 +2,7 @@
   <div class="ui-calendar-controls" :class="classes">
     <ui-icon-button
       class="ui-calendar-controls__nav-button"
+      :class="!showPrevious && 'ui-calendar-controls__nav-button--hidden'"
       icon="keyboard_arrow_left"
       type="secondary"
       :color="color === 'default' ? 'default' : 'white'"
@@ -18,6 +19,7 @@
     <div class="ui-calendar-controls__month-and-year">{{ monthAndYear }}</div>
 
     <ui-icon-button
+      :class="!showNext && 'ui-calendar-controls__nav-button--hidden'"
       class="ui-calendar-controls__nav-button"
       icon="keyboard_arrow_right"
       type="secondary"
@@ -55,6 +57,14 @@ export default {
     },
     lang: Object,
     dateInView: Date,
+    showPrevious: {
+      type: Boolean,
+      default: true,
+    },
+    showNext: {
+      type: Boolean,
+      default: true,
+    },
     minDate: Date,
     maxDate: Date,
     yearRange: {
@@ -63,7 +73,7 @@ export default {
     },
   },
 
-  emits: ["go-to-date"],
+  emits: ["go-to-date", "go-to-previous", "go-to-next"],
 
   computed: {
     classes() {
@@ -119,6 +129,7 @@ export default {
       date.setMonth(date.getMonth() - 1);
 
       this.goToDate(date);
+      this.$emit("go-to-previous");
     },
 
     goToNextMonth() {
@@ -129,6 +140,7 @@ export default {
       date.setMonth(date.getMonth() + 1);
 
       this.goToDate(date);
+      this.$emit("go-to-next");
     },
 
     goToDate(date) {
@@ -145,12 +157,19 @@ export default {
   align-items: center;
   display: flex;
   height: $ui-calendar-controls-height;
-  justify-content: space-between;
+
+  &__nav-button {
+    &--hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
 }
 
 .ui-calendar-controls__month-and-year {
   font-size: rem(15px);
   font-weight: $font-weight--semibold;
+  margin: 0 auto;
 }
 
 // ================================================
diff --git a/src/UiCalendarMonth.vue b/src/UiCalendarMonth.vue
index 901a19f4..474a768d 100644
--- a/src/UiCalendarMonth.vue
+++ b/src/UiCalendarMonth.vue
@@ -44,7 +44,7 @@ export default {
     lang: Object,
     dateFilter: Function,
     dateInView: Date,
-    selected: Date,
+    selected: [Date, Array],
     maxDate: Date,
     minDate: Date,
     startOfWeek: {
@@ -61,7 +61,7 @@ export default {
     },
   },
 
-  emits: ["date-select", "change"],
+  emits: ["date-select"],
 
   computed: {
     daysOfWeek() {
@@ -102,10 +102,6 @@ export default {
       return starts;
     },
 
-    goToDate(date) {
-      this.$emit("change", dateUtils.clone(date));
-    },
-
     onDateSelect(date) {
       this.$emit("date-select", date);
     },
diff --git a/src/UiCalendarWeek.vue b/src/UiCalendarWeek.vue
index 7f527069..c1252621 100644
--- a/src/UiCalendarWeek.vue
+++ b/src/UiCalendarWeek.vue
@@ -24,7 +24,7 @@ export default {
     weekStart: Date,
     minDate: Date,
     maxDate: Date,
-    selected: Date,
+    selected: [Date, Array],
     dateFilter: Function,
     color: {
       type: String,
@@ -76,11 +76,26 @@ export default {
       return [
         { "is-today": dateUtils.isSameDay(date, this.today) },
         { "is-in-other-month": this.isDateInOtherMonth(date) },
-        { "is-selected": this.selected && dateUtils.isSameDay(date, this.selected) },
+        { "is-selected": this.isDateSelected(date) },
+        { "is-highlighted": this.isDateHighlighted(date) },
         { "is-disabled": this.isDateDisabled(date) },
       ];
     },
 
+    isDateSelected(date) {
+      return Array.isArray(this.selected)
+        ? this.selected.some((selection) => dateUtils.isSameDay(date, selection))
+        : this.selected
+        ? dateUtils.isSameDay(date, this.selected)
+        : false;
+    },
+
+    isDateHighlighted(date) {
+      return Array.isArray(this.selected) && this.selected.length === 2
+        ? dateUtils.isAfter(date, this.selected[0]) && dateUtils.isBefore(date, this.selected[1])
+        : false;
+    },
+
     selectDate(date) {
       if (this.isDateDisabled(date)) {
         return;
@@ -120,6 +135,7 @@ export default {
     width: math.div(100%, 7);
     min-width: $ui-calendar-cell-size;
     position: relative;
+    padding: 0;
   }
 }
 
@@ -197,6 +213,11 @@ export default {
       }
     }
 
+    &.is-highlighted {
+      background-color: transparentize($brand-primary-color, 0.9);
+      color: $brand-primary-color;
+    }
+
     &.is-selected,
     body[modality="keyboard"] &.is-selected {
       background-color: $brand-primary-color;
@@ -215,6 +236,11 @@ export default {
       }
     }
 
+    &.is-highlighted {
+      background-color: transparentize($brand-accent-color, 0.5);
+      color: white;
+    }
+
     &.is-selected,
     body[modality="keyboard"] &.is-selected {
       background-color: $brand-accent-color;
diff --git a/src/UiDatepicker.vue b/src/UiDatepicker.vue
index fee47ff6..973532f5 100644
--- a/src/UiDatepicker.vue
+++ b/src/UiDatepicker.vue
@@ -50,18 +50,35 @@
           @open="onPickerOpen"
         >
           <ui-datepicker-calendar
-            v-model:currentView="calendarView"
+            v-if="!isRange"
+            v-model:current-view="calendarView"
             :color="color"
             :date-filter="dateFilter"
             :lang="lang"
             :max-date="maxDate"
             :min-date="minDate"
             :orientation="orientation"
-            :value="date"
+            :model-value="value"
             :start-of-week="startOfWeek"
             :year-range="yearRange"
             @date-select="onDateSelect"
           ></ui-datepicker-calendar>
+
+          <ui-daterangepicker-calendar
+            v-else
+            v-model:current-view="calendarView"
+            :color="color"
+            :date-filter="dateFilter"
+            :lang="lang"
+            :max-date="maxDate"
+            :min-date="minDate"
+            :orientation="orientation"
+            :model-value="value"
+            :start-of-week="startOfWeek"
+            :year-range="yearRange"
+            :calendars-number="calendarsNumber"
+            @update:model-value="onDateSelect"
+          ></ui-daterangepicker-calendar>
         </ui-popover>
       </div>
 
@@ -85,24 +102,42 @@
       @open="onPickerOpen"
     >
       <ui-datepicker-calendar
-        v-model:currentView="calendarView"
+        v-if="!isRange"
+        v-model:current-view="calendarView"
         :color="color"
         :date-filter="dateFilter"
         :lang="lang"
         :max-date="maxDate"
         :min-date="minDate"
         :orientation="orientation"
-        :value="date"
+        :model-value="value"
         :start-of-week="startOfWeek"
         :year-range="yearRange"
         @date-select="onDateSelect"
       ></ui-datepicker-calendar>
+
+      <ui-daterangepicker-calendar
+        v-else
+        v-model:current-view="calendarView"
+        :color="color"
+        :date-filter="dateFilter"
+        :lang="lang"
+        :max-date="maxDate"
+        :min-date="minDate"
+        :orientation="orientation"
+        :model-value="value"
+        :start-of-week="startOfWeek"
+        :year-range="yearRange"
+        :calendars-number="calendarsNumber"
+        @update:model-value="onDateSelect"
+      ></ui-daterangepicker-calendar>
     </ui-modal>
   </div>
 </template>
 
 <script>
 import UiDatepickerCalendar from "./UiDatepickerCalendar.vue";
+import UiDaterangepickerCalendar from "./UiDaterangepickerCalendar.vue";
 import UiIcon from "./UiIcon.vue";
 import UiModal from "./UiModal.vue";
 import UiPopover from "./UiPopover.vue";
@@ -115,6 +150,7 @@ export default {
 
   components: {
     UiDatepickerCalendar,
+    UiDaterangepickerCalendar,
     UiIcon,
     UiModal,
     UiPopover,
@@ -124,12 +160,16 @@ export default {
 
   props: {
     name: String,
-    modelValue: [Date, String],
+    modelValue: [Date, String, Array],
     tabindex: [String, Number],
     startOfWeek: {
       type: Number,
       default: 0,
     },
+    calendarsNumber: {
+      type: Number,
+      default: 2,
+    },
     minDate: Date,
     maxDate: Date,
     yearRange: Array,
@@ -194,8 +234,13 @@ export default {
   },
 
   computed: {
-    date() {
-      return typeof this.modelValue === "string" ? new Date(this.modelValue) : this.modelValue;
+    value() {
+      const transformer = (value) => (typeof value === "string" ? new Date(value) : value);
+      return this.isRange ? this.modelValue.map(transformer) : transformer(this.modelValue);
+    },
+
+    isRange() {
+      return Array.isArray(this.modelValue);
     },
 
     classes() {
@@ -227,7 +272,8 @@ export default {
     },
 
     isLabelInline() {
-      return !this.date && !this.isActive;
+      const hasValue = this.isRange ? this.modelValue.length > 0 : Boolean(this.value);
+      return !hasValue && !this.isActive;
     },
 
     hasFeedback() {
@@ -243,13 +289,20 @@ export default {
     },
 
     displayText() {
-      if (!this.date) {
+      const formatter = (date) =>
+        this.customFormatter
+          ? this.customFormatter(date, this.lang)
+          : dateUtils.humanize(date, this.lang);
+
+      if (this.isRange) {
+        return this.value.map(formatter).join(" - ");
+      }
+
+      if (!this.value) {
         return "";
       }
 
-      return this.customFormatter
-        ? this.customFormatter(this.date, this.lang)
-        : dateUtils.humanize(this.date, this.lang);
+      return formatter(this.value);
     },
 
     hasDisplayText() {
@@ -257,9 +310,13 @@ export default {
     },
 
     submittedValue() {
-      return this.date
-        ? `${this.date.getFullYear()}-${1 + this.date.getMonth()}-${this.date.getDate()}`
-        : "";
+      const formatter = (date) => `${date.getFullYear()}-${1 + date.getMonth()}-${date.getDate()}`;
+
+      if (this.isRange) {
+        return this.value.map(formatter).join(" - ");
+      }
+
+      return this.value ? formatter(this.value) : "";
     },
 
     usesPopover() {
@@ -284,7 +341,9 @@ export default {
   methods: {
     onDateSelect(date) {
       this.$emit("update:modelValue", date);
-      this.closePicker();
+      if (!this.isRange || date.length === 2) {
+        this.closePicker();
+      }
     },
 
     isPickerOpen() {
@@ -357,7 +416,7 @@ export default {
     },
 
     clear() {
-      this.$emit("update:modelValue", null);
+      this.$emit("update:modelValue", this.isRange ? [] : null);
     },
 
     reset() {
diff --git a/src/UiDatepickerCalendar.vue b/src/UiDatepickerCalendar.vue
index fc60f729..1c1ca3b3 100644
--- a/src/UiDatepickerCalendar.vue
+++ b/src/UiDatepickerCalendar.vue
@@ -29,6 +29,7 @@
         :key="year"
         class="ui-datepicker-calendar__year"
         tabindex="0"
+        :data-year="year"
         :class="getYearClasses(year)"
         @click="selectYear(year)"
         @keydown.enter="selectYear(year)"
@@ -71,7 +72,6 @@ import UiCalendarControls from "./UiCalendarControls.vue";
 import UiCalendarMonth from "./UiCalendarMonth.vue";
 
 import dateUtils from "./helpers/date";
-import { scrollIntoView } from "./helpers/element-scroll";
 
 export default {
   name: "UiDatepickerCalendar",
@@ -181,13 +181,7 @@ export default {
 
     currentView() {
       if (this.showYearPicker) {
-        this.$nextTick(() => {
-          const el =
-            this.$refs.years.querySelector(".is-selected") ||
-            this.$refs.years.querySelector(".is-current-year");
-
-          scrollIntoView(el, { marginTop: 144 });
-        });
+        this.scrollYearIntoView(this.dateInView.getFullYear());
       }
     },
   },
@@ -201,6 +195,18 @@ export default {
       this.$emit("update:currentView", "date");
     },
 
+    scrollYearIntoView(year) {
+      this.$nextTick(() => {
+        const el = this.$refs.years.querySelector(`[data-year="${year}"]`);
+
+        el.scrollIntoView({
+          behavior: "auto",
+          block: "center",
+          inline: "center",
+        });
+      });
+    },
+
     getDateInRange(date, fallback) {
       date = date || fallback;
 
@@ -256,7 +262,7 @@ export default {
     },
 
     onGoToDate(date) {
-      this.$refs.month.goToDate(date);
+      this.dateInView = date;
     },
 
     onMonthChange(newDate) {
diff --git a/src/UiDaterangepickerCalendar.vue b/src/UiDaterangepickerCalendar.vue
new file mode 100644
index 00000000..aafaa4aa
--- /dev/null
+++ b/src/UiDaterangepickerCalendar.vue
@@ -0,0 +1,582 @@
+<template>
+  <div class="ui-daterangepicker-calendar" :class="classes">
+    <div class="ui-daterangepicker-calendar__header">
+      <div
+        v-for="(date, index) in headerRange"
+        :key="index"
+        :class="`ui-daterangepicker-calendar__header-${index === 0 ? 'start' : 'end'}`"
+      >
+        <div
+          class="ui-daterangepicker-calendar__header-year"
+          tabindex="0"
+          :class="{ 'is-active': showYearPicker }"
+          @click="updateCurrentView('year', date, index)"
+          @keydown.enter="updateCurrentView('year', date, index)"
+        >
+          {{ getHeaderYear(date) }}
+        </div>
+
+        <div
+          class="ui-daterangepicker-calendar__header-date"
+          tabindex="0"
+          :class="{ 'is-active': !showYearPicker }"
+          @click="updateCurrentView('date', date, index)"
+          @keydown.enter="updateCurrentView('date', date, index)"
+        >
+          <span class="ui-daterangepicker-calendar__header-weekday"
+            >{{ getHeaderWeekday(date) }},
+          </span>
+          <span class="ui-daterangepicker-calendar__header-day">{{ getHeaderDay(date) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <ul v-show="showYearPicker" ref="years" class="ui-daterangepicker-calendar__years">
+      <li
+        v-for="year in yearRangeFiltered"
+        :key="year"
+        class="ui-daterangepicker-calendar__year"
+        tabindex="0"
+        :class="getYearClasses(year)"
+        :data-year="year"
+        @click="selectYear(year)"
+        @keydown.enter="selectYear(year)"
+      >
+        {{ year }}
+      </li>
+    </ul>
+    <div v-show="!showYearPicker" class="ui-daterangepicker-calendar__body">
+      <div
+        v-for="(month, index) in calendars"
+        :key="index"
+        class="ui-daterangepicker-calendar__body-part"
+      >
+        <ui-calendar-controls
+          ref="controls"
+          :date-in-view="month"
+          :lang="lang"
+          :max-date="maxDate"
+          :min-date="minDate"
+          :year-range="yearRange"
+          :show-previous="index === 0"
+          :show-next="index === calendars.length - 1"
+          @go-to-previous="onGoToPrevious"
+          @go-to-next="onGoToNext"
+        ></ui-calendar-controls>
+
+        <ui-calendar-month
+          ref="month"
+          square-cells
+          :color="color"
+          :date-filter="dateFilter"
+          :date-in-view="month"
+          :lang="lang"
+          :max-date="maxDate"
+          :min-date="minDate"
+          :selected="selected"
+          :start-of-week="startOfWeek"
+          @change="onMonthChange"
+          @date-select="onDateSelect"
+        ></ui-calendar-month>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UiCalendarControls from "./UiCalendarControls.vue";
+import UiCalendarMonth from "./UiCalendarMonth.vue";
+
+import dateUtils from "./helpers/date";
+
+export default {
+  name: "UiDaterangepickerCalendar",
+
+  components: {
+    UiCalendarControls,
+    UiCalendarMonth,
+  },
+
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => [],
+    },
+    minDate: Date,
+    maxDate: Date,
+    calendarsNumber: {
+      type: Number,
+      default: 2,
+    },
+    startOfWeek: {
+      type: Number,
+      default: 0,
+    },
+    currentView: {
+      type: String,
+      validator: (value) => value === "date" || value === "year",
+    },
+    lang: {
+      type: Object,
+      default() {
+        return dateUtils.defaultLang;
+      },
+    },
+    yearRange: {
+      type: Array,
+      default() {
+        const thisYear = new Date().getFullYear();
+
+        // Generates a range of 200 years
+        // (100 years into the past and 100 years into the future, including the current year)
+        return Array.apply(null, Array(200)).map((item, index) => {
+          return thisYear - 100 + index;
+        });
+      },
+    },
+    dateFilter: Function,
+    color: {
+      type: String,
+      default: "primary", // 'primary' or 'accent'
+    },
+    orientation: {
+      type: String,
+      default: "portrait", // 'portrait' or 'landscape'
+    },
+  },
+
+  emits: ["update:modelValue", "update:currentView", "date-select", "month-change"],
+
+  data() {
+    const dateInView = dateUtils.clone(this.end || new Date());
+    dateInView.setDate(1);
+    const [start, end] = this.modelValue;
+
+    return {
+      today: new Date(),
+      dateInView, // The date of the last calendar in view
+      start: start || null,
+      end: end || null,
+    };
+  },
+
+  computed: {
+    classes() {
+      return [
+        `ui-daterangepicker-calendar--color-${this.color}`,
+        `ui-daterangepicker-calendar--orientation-${this.orientation}`,
+      ];
+    },
+
+    headerRange() {
+      const range = [this.start || this.today];
+
+      if (this.end) {
+        range.push(this.end);
+      }
+
+      return range;
+    },
+
+    showYearPicker() {
+      return this.currentView === "year";
+    },
+
+    showDatePicker() {
+      return this.currentView === "date";
+    },
+
+    yearRangeFiltered() {
+      return this.yearRange.filter((year) => !this.isYearOutOfRange(year));
+    },
+
+    selected() {
+      const selected = [];
+      if (this.start) {
+        selected.push(this.start);
+      }
+
+      if (this.end) {
+        selected.push(this.end);
+      }
+
+      return selected;
+    },
+
+    calendars() {
+      const current = dateUtils.clone(this.dateInView);
+      const calendars = [dateUtils.clone(current)];
+      for (let i = this.calendarsNumber - 1; i > 0; i--) {
+        current.setMonth(current.getMonth() - 1);
+        calendars.unshift(dateUtils.clone(current));
+      }
+
+      return calendars;
+    },
+  },
+
+  watch: {
+    end() {
+      if (this.end) {
+        if (!this.calendars.some((date) => dateUtils.isSameMonth(date, this.end))) {
+          const dateInView = dateUtils.clone(this.end);
+          dateInView.setDate(1);
+          this.dateInView = dateInView;
+        }
+      }
+    },
+
+    start() {
+      if (this.start) {
+        if (!this.calendars.some((date) => dateUtils.isSameMonth(date, this.start))) {
+          const dateInView = dateUtils.clone(this.start);
+          dateInView.setDate(1);
+          dateInView.setMonth(dateInView.getMonth() + this.calendarsNumber - 1);
+          this.dateInView = dateInView;
+        }
+      }
+    },
+
+    modelValue() {
+      const [start, end] = this.modelValue;
+
+      this.start = start;
+      this.end = end;
+    },
+
+    dateInView() {
+      if (this.showYearPicker) {
+        this.scrollYearIntoView(this.dateInView.getFullYear());
+      }
+    },
+
+    currentView() {
+      if (this.showYearPicker) {
+        this.scrollYearIntoView(this.dateInView.getFullYear());
+      }
+    },
+  },
+
+  methods: {
+    selectYear(year) {
+      const newDate = dateUtils.clone(this.dateInView);
+      newDate.setFullYear(year);
+
+      this.dateInView = this.getDateInRange(newDate);
+      this.$emit("update:currentView", "date");
+    },
+
+    updateCurrentView(view, date, index) {
+      this.$emit("update:currentView", view);
+
+      const dateInView = dateUtils.clone(date);
+      dateInView.setDate(1);
+      dateInView.setMonth(dateInView.getMonth() + (index === 0 ? this.calendarsNumber - 1 : 0));
+      this.dateInView = dateInView;
+    },
+
+    scrollYearIntoView(year) {
+      this.$nextTick(() => {
+        const el = this.$refs.years.querySelector(`[data-year="${year}"]`);
+
+        el.scrollIntoView({
+          behavior: "auto",
+          block: "center",
+          inline: "center",
+        });
+      });
+    },
+
+    getDateInRange(date, fallback) {
+      date = date || fallback;
+
+      if (this.minDate && date.getTime() < this.minDate.getTime()) {
+        return this.minDate;
+      }
+
+      if (this.maxDate && date.getTime() > this.maxDate.getTime()) {
+        return this.maxDate;
+      }
+
+      return date;
+    },
+
+    getYearClasses(year) {
+      return {
+        "is-current-year": this.isYearCurrent(year),
+        "is-selected": this.isYearSelected(year),
+      };
+    },
+
+    getHeaderYear(date) {
+      return date.getFullYear();
+    },
+
+    getHeaderWeekday(date) {
+      return dateUtils.getDayAbbreviated(date, this.lang);
+    },
+
+    getHeaderDay(date) {
+      return (
+        dateUtils.getMonthAbbreviated(date, this.lang) +
+        " " +
+        dateUtils.getDayOfMonth(date, this.lang)
+      );
+    },
+
+    isYearCurrent(year) {
+      return year === this.today.getFullYear();
+    },
+
+    isYearSelected(year) {
+      return (
+        (this.start && year === this.start.getFullYear()) ||
+        (this.end && year === this.end.getFullYear())
+      );
+    },
+
+    isYearOutOfRange(year) {
+      if (this.minDate && year < this.minDate.getFullYear()) {
+        return true;
+      }
+
+      if (this.maxDate && year > this.maxDate.getFullYear()) {
+        return true;
+      }
+
+      if (year < this.yearRange[0]) {
+        return true;
+      }
+
+      if (year > this.yearRange[this.yearRange.length - 1]) {
+        return true;
+      }
+
+      return false;
+    },
+
+    onDateSelect(date) {
+      const { startOfDay, endOfDay } = dateUtils;
+      if ((this.start && this.end) || (!this.start && !this.end)) {
+        this.start = startOfDay(date);
+        this.end = null;
+      } else if (this.end && date >= this.end) {
+        this.start = startOfDay(this.end);
+        this.end = endOfDay(date);
+      } else if (this.start && date <= this.start) {
+        this.end = endOfDay(this.start);
+        this.start = startOfDay(date);
+      } else if (this.end && date > this.end) {
+        this.start = startOfDay(date);
+      } else if (this.start && date > this.start) {
+        this.end = endOfDay(date);
+      }
+
+      if (this.start && this.end) {
+        this.$emit("update:modelValue", [this.start, this.end]);
+      }
+
+      this.$emit("date-select", date);
+    },
+
+    onGoToNext() {
+      const dateInView = dateUtils.clone(this.dateInView);
+      dateInView.setMonth(this.dateInView.getMonth() + 1);
+      this.dateInView = dateInView;
+    },
+
+    onGoToPrevious() {
+      const dateInView = dateUtils.clone(this.dateInView);
+      dateInView.setMonth(this.dateInView.getMonth() - 1);
+      this.dateInView = dateInView;
+    },
+
+    onMonthChange(newDate) {
+      this.dateInView = newDate;
+      this.$emit("month-change", newDate);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "./styles/imports";
+
+$ui-daterangepicker-calendar-padding: rem(8px) !default;
+$ui-daterangepicker-calendars-gap: rem(8px) !default;
+
+.ui-daterangepicker-calendar {
+  color: $primary-text-color;
+  font-family: $font-stack;
+}
+
+.ui-daterangepicker-calendar__header {
+  color: white;
+  line-height: 1;
+  padding: rem(16px);
+  display: flex;
+  justify-content: space-between;
+}
+
+.ui-daterangepicker-calendar__header-year,
+.ui-daterangepicker-calendar__header-date {
+  cursor: pointer;
+  opacity: 0.75;
+  transition: opacity 0.2s ease;
+
+  &:hover,
+  body[modality="keyboard"] &:focus,
+  &.is-active {
+    opacity: 1;
+  }
+
+  body[modality="keyboard"] &:focus {
+    outline: 1px dotted white;
+    outline-offset: 1px;
+  }
+}
+
+.ui-daterangepicker-calendar__header-year {
+  font-size: rem(15px);
+  font-weight: $font-weight--semibold;
+  margin-bottom: rem(8px);
+}
+
+.ui-daterangepicker-calendar__header-date {
+  font-size: rem(22px);
+}
+
+.ui-daterangepicker-calendar__body {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  gap: $ui-daterangepicker-calendars-gap;
+
+  .ui-calendar-controls {
+    background-color: transparent;
+  }
+}
+
+.ui-daterangepicker-calendar__body-part,
+.ui-daterangepicker-calendar__years {
+  height: (
+    ($ui-daterangepicker-calendar-padding * 2) + $ui-calendar-controls-height +
+      $ui-calendar-month-header-height + ($ui-calendar-cell-size * 6)
+  ); // Force height to prevent reflow when switching months
+  padding: $ui-daterangepicker-calendar-padding;
+  width: ($ui-calendar-cell-size * 7) + ($ui-daterangepicker-calendar-padding * 2);
+}
+
+.ui-daterangepicker-calendar__years {
+  list-style: none;
+  overflow-y: auto;
+  margin: 0;
+  $gaps-number: v-bind("calendarsNumber - 1");
+  $calendar-part-width: ($ui-calendar-cell-size * 7) + ($ui-daterangepicker-calendar-padding * 2);
+  width: calc(
+    $calendar-part-width * v-bind(calendarsNumber) +
+      ($ui-daterangepicker-calendars-gap * $gaps-number)
+  );
+}
+
+.ui-daterangepicker-calendar__year {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-size: rem(16px);
+  height: rem(36px);
+  justify-content: center;
+  outline: none;
+
+  &.is-selected {
+    font-size: rem(24px);
+    font-weight: $font-weight--semibold;
+    height: rem(40px);
+  }
+}
+
+// ================================================
+// Orientations
+// ================================================
+
+.ui-daterangepicker-calendar--orientation-landscape {
+  display: flex;
+
+  .ui-daterangepicker-calendar__header {
+    min-width: rem(128px);
+    flex-direction: column;
+  }
+
+  .ui-daterangepicker-calendar__header-day {
+    margin-bottom: rem(12px);
+    display: block;
+    padding-top: rem(4px);
+  }
+}
+
+.ui-daterangepicker-calendar--orientation-portrait {
+  .ui-daterangepicker-calendar__header-end {
+    text-align: right;
+  }
+}
+
+// ================================================
+// Colors
+// ================================================
+
+.ui-daterangepicker-calendar--color-primary {
+  .ui-daterangepicker-calendar__header {
+    background-color: $brand-primary-color;
+  }
+
+  .ui-daterangepicker-calendar__year {
+    &:hover,
+    body[modality="keyboard"] &:focus {
+      color: $brand-primary-color;
+    }
+
+    &.is-selected {
+      color: $brand-primary-color;
+    }
+  }
+
+  .ui-daterangepicker-calendar-week__date {
+    &.is-today {
+      color: $brand-primary-color;
+    }
+
+    &.is-selected,
+    body[modality="keyboard"] &.is-selected {
+      background-color: $brand-primary-color;
+    }
+  }
+}
+
+.ui-daterangepicker-calendar--color-accent {
+  .ui-daterangepicker-calendar__header {
+    background-color: $brand-accent-color;
+  }
+
+  .ui-daterangepicker-calendar__year {
+    &:hover,
+    body[modality="keyboard"] &:focus {
+      color: $brand-accent-color;
+    }
+
+    &.is-selected {
+      color: $brand-accent-color;
+    }
+  }
+
+  .ui-daterangepicker-calendar-week__date {
+    &.is-today {
+      color: $brand-accent-color;
+    }
+
+    &.is-selected,
+    body[modality="keyboard"] &.is-selected {
+      background-color: $brand-accent-color;
+    }
+  }
+}
+</style>
diff --git a/src/UiSelect.vue b/src/UiSelect.vue
index 8c063083..6df01527 100644
--- a/src/UiSelect.vue
+++ b/src/UiSelect.vue
@@ -141,7 +141,7 @@ import UiSelectOption from "./UiSelectOption.vue";
 
 import RespondsToExternalClick from "./mixins/RespondsToExternalClick";
 import { looseIndexOf, looseEqual } from "./helpers/util";
-import { scrollIntoView, resetScroll } from "./helpers/element-scroll";
+import { resetScroll } from "./helpers/element-scroll";
 
 import fuzzysearch from "fuzzysearch";
 
@@ -583,10 +583,9 @@ export default {
     },
 
     scrollOptionIntoView(optionEl) {
-      scrollIntoView(optionEl, {
-        container: this.$refs.optionsList,
-        marginTop: 180,
-      });
+      if (optionEl) {
+        optionEl.scrollIntoView({ block: "nearest" });
+      }
     },
 
     reset() {
diff --git a/src/helpers/date.js b/src/helpers/date.js
index 85041424..e5d94bb7 100644
--- a/src/helpers/date.js
+++ b/src/helpers/date.js
@@ -123,6 +123,11 @@ export function isSameDay(date1, date2) {
         date1.getDate() === date2.getDate();
 }
 
+export function isSameMonth(date1, date2) {
+    return date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth();
+}
+
 export function isBefore(date1, date2) {
     return date1.getTime() < date2.getTime();
 }
@@ -131,6 +136,24 @@ export function isAfter(date1, date2) {
     return date1.getTime() > date2.getTime();
 }
 
+export function endOfDay (date) {
+  date = clone(date);
+  date.setHours(23);
+  date.setMinutes(59);
+  date.setSeconds(59);
+
+  return date;
+};
+
+export function startOfDay (date) {
+  date = clone(date);
+  date.setHours(0);
+  date.setMinutes(0);
+  date.setSeconds(0);
+
+  return date;
+};
+
 export default {
     defaultLang,
     getDayFull,
@@ -143,6 +166,9 @@ export default {
     clone,
     moveToDayOfWeek,
     isSameDay,
+    isSameMonth,
+    startOfDay,
+    endOfDay,
     isBefore,
     isAfter
 };
diff --git a/src/helpers/element-scroll.js b/src/helpers/element-scroll.js
index b911d7da..e5b7200c 100644
--- a/src/helpers/element-scroll.js
+++ b/src/helpers/element-scroll.js
@@ -1,32 +1,3 @@
-export function inView(element, container) {
-    if (!element) {
-        return;
-    }
-
-    container = container || element.parentElement;
-
-    const top = element.offsetTop;
-    const parentTop = container.scrollTop;
-    const bottom = top + element.offsetHeight;
-    const parentBottom = container.offsetHeight;
-
-    return top >= parentTop && bottom <= parentBottom;
-}
-
-export function scrollIntoView(element, options = { container: null, marginTop: 0 }) {
-    if (!element) {
-        return;
-    }
-
-    options.container = options.container || element.parentElement;
-
-    if (inView(element, options.container)) {
-        return;
-    }
-
-    options.container.scrollTop = element.offsetTop - options.marginTop;
-}
-
 export function resetScroll(element) {
     if (!element) {
         return;
@@ -36,7 +7,5 @@ export function resetScroll(element) {
 }
 
 export default {
-    inView,
-    scrollIntoView,
     resetScroll
 };
diff --git a/src/styles/tippy/tippy.scss b/src/styles/tippy/tippy.scss
index 34520970..92298ca7 100644
--- a/src/styles/tippy/tippy.scss
+++ b/src/styles/tippy/tippy.scss
@@ -8,7 +8,6 @@
 
 .tippy-popper {
     max-height: 100%;
-    max-width: 100%;
     outline: 0;
     pointer-events: none;
     transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);