Add 'date-creator' prop to allow custom today's Date creation (#1083)

buefy · Nov 14, 2018 · 6c0009b · 6c0009b
1 parent 1a9ffa6
commit 6c0009b
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 6 deletions.
diff --git a/docs/pages/components/datepicker/api/datepicker.js b/docs/pages/components/datepicker/api/datepicker.js
@@ -22,6 +22,13 @@ export default [
                 values: '—',
                 default: '<code>(date) => new Date(Date.parse(date))</code>'
             },
+            {
+                name: '<code>date-creator</code>',
+                description: 'Function used internally to create a new Date instance',
+                type: 'Function',
+                values: '—',
+                default: '<code>() => new Date()</code>'
+            },
             {
                 name: '<code>min-date</code>',
                 description: 'Earliest date available for selection',

diff --git a/docs/pages/installation/api/constructor-options.js b/docs/pages/installation/api/constructor-options.js
@@ -86,6 +86,13 @@ export default [
                 values: '—',
                 default: '<code>Date.parse(date)</code>'
             },
+            {
+                name: '<code>defaultDateCreator</code>',
+                description: `Default datepicker <code>date-creator</code> attribute`,
+                type: 'Function',
+                values: '—',
+                default: '<code>new Date()</code>'
+            },
             {
                 name: '<code>defaultDayNames</code>',
                 description: `Default datepicker <code>day-names</code> attribute`,

diff --git a/src/components/datepicker/Datepicker.vue b/src/components/datepicker/Datepicker.vue
@@ -109,6 +109,7 @@
                     :selectable-dates="selectableDates"
                     :events="events"
                     :indicators="indicators"
+                    :date-creator="dateCreator"
                     @close="$refs.dropdown.isActive = false"/>
 
                 <footer
@@ -257,6 +258,16 @@
                     }
                 }
             },
+            dateCreator: {
+                type: Function,
+                default: () => {
+                    if (typeof config.defaultDateCreator === 'function') {
+                        return config.defaultDateCreator()
+                    } else {
+                        return new Date()
+                    }
+                }
+            },
             mobileNative: {
                 type: Boolean,
                 default: () => {
@@ -271,7 +282,7 @@
             }
         },
         data() {
-            const focusedDate = this.value || this.focusedDate || new Date()
+            const focusedDate = this.value || this.focusedDate || this.dateCreator()
 
             return {
                 dateSelected: this.value,
@@ -291,7 +302,9 @@
             listOfYears() {
                 const latestYear = this.maxDate
                 ? this.maxDate.getFullYear()
-                    : (Math.max(new Date().getFullYear(), this.focusedDateData.year) + 3)
+                    : (Math.max(
+                        this.dateCreator().getFullYear(),
+                        this.focusedDateData.year) + 3)
 
                 const earliestYear = this.minDate
                 ? this.minDate.getFullYear() : 1900
@@ -328,7 +341,7 @@
             * Update internal focusedDateData
             */
             dateSelected(value) {
-                const currentDate = !value ? new Date() : value
+                const currentDate = !value ? this.dateCreator() : value
                 this.focusedDateData = {
                     month: currentDate.getMonth(),
                     year: currentDate.getFullYear()

diff --git a/src/components/datepicker/DatepickerTable.vue b/src/components/datepicker/DatepickerTable.vue
@@ -23,6 +23,7 @@
                 :selectable-dates="selectableDates"
                 :events="eventsInThisWeek(week, index)"
                 :indicators="indicators"
+                :date-creator="dateCreator"
                 @select="updateSelectedDate"/>
         </div>
     </section>
@@ -47,6 +48,7 @@
             maxDate: Date,
             focused: Object,
             disabled: Boolean,
+            dateCreator: Function,
             unselectableDates: Array,
             unselectableDaysOfWeek: Array,
             selectableDates: Array

diff --git a/src/components/datepicker/DatepickerTableRow.spec.js b/src/components/datepicker/DatepickerTableRow.spec.js
@@ -14,7 +14,10 @@ describe('BDatepickerTableRow', () => {
                     new Date('Fri Jan 05 2018 00:00:00 GMT-0200 (-02)'),
                     new Date('Sat Jan 06 2018 00:00:00 GMT-0200 (-02)')
                 ],
-                month: 12
+                month: 12,
+                dateCreator: function () {
+                    return new Date()
+                }
             }
         })
         expect(wrapper.name()).toBe('BDatepickerTableRow')

diff --git a/src/components/datepicker/DatepickerTableRow.vue b/src/components/datepicker/DatepickerTableRow.vue
@@ -54,7 +54,8 @@
             unselectableDaysOfWeek: Array,
             selectableDates: Array,
             events: Array,
-            indicators: String
+            indicators: String,
+            dateCreator: Function
         },
         methods: {
             /*
@@ -154,7 +155,7 @@
 
                 return {
                     'is-selected': dateMatch(day, this.selectedDate),
-                    'is-today': dateMatch(day, new Date()),
+                    'is-today': dateMatch(day, this.dateCreator()),
                     'is-selectable': this.selectableDate(day) && !this.disabled,
                     'is-unselectable': !this.selectableDate(day) || this.disabled
                 }

diff --git a/src/utils/config.js b/src/utils/config.js
@@ -10,6 +10,7 @@ let config = {
     defaultInputAutocomplete: 'on',
     defaultDateFormatter: null,
     defaultDateParser: null,
+    defaultDateCreator: null,
     defaultDayNames: null,
     defaultMonthNames: null,
     defaultFirstDayOfWeek: null,

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -26,6 +26,7 @@ export declare type BuefyConfig = {
     defaultInputAutocomplete: 'on' | 'off';
     defaultDateFormatter?: string;
     defaultDateParser?: string;
+    defaultDateCreator?: string;
     defaultDayNames?: string;
     defaultMonthNames?: string;
     defaultFirstDayOfWeek?: string;