Daterange picker

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: []
         };
     },
 

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;
 }
 
 // ================================================

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);
     },

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;