From de1eb7685e108b48c084d2fd331ce2f6c1dd5a36 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 7 Mar 2020 16:05:29 -0400 Subject: [PATCH 01/16] feat(b-calendar, b-for-datepicker): add new initial-date prop (closes #4899) --- src/utils/date.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/utils/date.js b/src/utils/date.js index e6bac5624a0..3b604f96752 100644 --- a/src/utils/date.js +++ b/src/utils/date.js @@ -110,3 +110,14 @@ export const oneYearAhead = date => { } return date } + +// Helper function to constrain a date between two values +// Always returns a `Date` object or `null` if no date passed +export const constrainDate = (date, min = null, max = null) => { + // Ensure values are date objects (or `null`) + date = parseYMD(date) + min = parseYMD(min) + max = parseYMD(max) + + return date ? min && date < min ? min : max && date > max ? max : date : null +} From 9cdd987df481df1223364a728a75340971272cd6 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 7 Mar 2020 16:08:31 -0400 Subject: [PATCH 02/16] Update date.js --- src/utils/date.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/date.js b/src/utils/date.js index 3b604f96752..4de987e64db 100644 --- a/src/utils/date.js +++ b/src/utils/date.js @@ -119,5 +119,5 @@ export const constrainDate = (date, min = null, max = null) => { min = parseYMD(min) max = parseYMD(max) - return date ? min && date < min ? min : max && date > max ? max : date : null + return date ? (min && date < min ? min : max && date > max ? max : date) : null } From 092f9fe0214b0b414561a2fd5cc9327dfcfecbec Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 7 Mar 2020 16:34:56 -0400 Subject: [PATCH 03/16] Update date.spec.js --- src/utils/date.spec.js | 34 +++++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/src/utils/date.spec.js b/src/utils/date.spec.js index 31db86c8339..81174bf059e 100644 --- a/src/utils/date.spec.js +++ b/src/utils/date.spec.js @@ -7,7 +7,8 @@ import { oneMonthAgo, oneMonthAhead, oneYearAgo, - oneYearAhead + oneYearAhead, + constrainDate } from './date' describe('utils/date', () => { @@ -94,4 +95,35 @@ describe('utils/date', () => { expect(formatYMD(oneYearAhead(parseYMD('2020-11-30')))).toEqual('2021-11-30') expect(formatYMD(oneYearAhead(parseYMD('2020-12-31')))).toEqual('2021-12-31') }) + + it('costrainDate works', async () => { + const min = parseYMD('2020-01-05') + const max = parseYMD('2020-01-15') + const date1 = parseYMD('2020-01-10') + const date2 = parseYMD('2020-01-01') + const date3 = parseYMD('2020-01-20') + + expect(costrainDate(null, null, null)).toEqual(null) + expect(costrainDate(null, min, max)).toEqual(null) + + expect(costrainDate(date1, null, null)).not.toEqual(null) + expect(costrainDate(date1, null, null).toISOString()).toEqual(date1.toISOString()) + + expect(costrainDate(date1, min, max)).not.toEqual(null) + expect(costrainDate(date1, min, max).toISOString()).toEqual(date1.toISOString()) + + expect(costrainDate(date2, min, max)).not.toEqual(null) + expect(costrainDate(date2, min, max).toISOString()).toEqual(min.toISOString()) + expect(costrainDate(date2, '', max)).not.toEqual(null) + expect(costrainDate(date2, '', max).toISOString()).toEqual(date2.toISOString()) + expect(costrainDate(date2, null, max)).not.toEqual(null) + expect(costrainDate(date2, null, max).toISOString()).toEqual(date2.toISOString()) + + expect(costrainDate(date3, min, max)).not.toEqual(null) + expect(costrainDate(date3, min, max).toISOString()).toEqual(max.toISOString()) + expect(costrainDate(date3, min, '')).not.toEqual(null) + expect(costrainDate(date3, min, '').toISOString()).toEqual(date3.toISOString()) + expect(costrainDate(date3, min, null)).not.toEqual(null) + expect(costrainDate(date3, min, null).toISOString()).toEqual(date3.toISOString()) + }) }) From f276550272c12a6020010b967bcc4c65ac9d544f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 7 Mar 2020 16:37:26 -0400 Subject: [PATCH 04/16] Update date.spec.js --- src/utils/date.spec.js | 44 +++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/utils/date.spec.js b/src/utils/date.spec.js index 81174bf059e..be014e1c406 100644 --- a/src/utils/date.spec.js +++ b/src/utils/date.spec.js @@ -103,27 +103,27 @@ describe('utils/date', () => { const date2 = parseYMD('2020-01-01') const date3 = parseYMD('2020-01-20') - expect(costrainDate(null, null, null)).toEqual(null) - expect(costrainDate(null, min, max)).toEqual(null) - - expect(costrainDate(date1, null, null)).not.toEqual(null) - expect(costrainDate(date1, null, null).toISOString()).toEqual(date1.toISOString()) - - expect(costrainDate(date1, min, max)).not.toEqual(null) - expect(costrainDate(date1, min, max).toISOString()).toEqual(date1.toISOString()) - - expect(costrainDate(date2, min, max)).not.toEqual(null) - expect(costrainDate(date2, min, max).toISOString()).toEqual(min.toISOString()) - expect(costrainDate(date2, '', max)).not.toEqual(null) - expect(costrainDate(date2, '', max).toISOString()).toEqual(date2.toISOString()) - expect(costrainDate(date2, null, max)).not.toEqual(null) - expect(costrainDate(date2, null, max).toISOString()).toEqual(date2.toISOString()) - - expect(costrainDate(date3, min, max)).not.toEqual(null) - expect(costrainDate(date3, min, max).toISOString()).toEqual(max.toISOString()) - expect(costrainDate(date3, min, '')).not.toEqual(null) - expect(costrainDate(date3, min, '').toISOString()).toEqual(date3.toISOString()) - expect(costrainDate(date3, min, null)).not.toEqual(null) - expect(costrainDate(date3, min, null).toISOString()).toEqual(date3.toISOString()) + expect(constrainDate(null, null, null)).toEqual(null) + expect(constrainDate(null, min, max)).toEqual(null) + + expect(constrainDate(date1, null, null)).not.toEqual(null) + expect(constrainDate(date1, null, null).toISOString()).toEqual(date1.toISOString()) + + expect(constrainDate(date1, min, max)).not.toEqual(null) + expect(constrainDate(date1, min, max).toISOString()).toEqual(date1.toISOString()) + + expect(constrainDate(date2, min, max)).not.toEqual(null) + expect(constrainDate(date2, min, max).toISOString()).toEqual(min.toISOString()) + expect(constrainDate(date2, '', max)).not.toEqual(null) + expect(constrainDate(date2, '', max).toISOString()).toEqual(date2.toISOString()) + expect(constrainDate(date2, null, max)).not.toEqual(null) + expect(constrainDate(date2, null, max).toISOString()).toEqual(date2.toISOString()) + + expect(constrainDate(date3, min, max)).not.toEqual(null) + expect(constrainDate(date3, min, max).toISOString()).toEqual(max.toISOString()) + expect(constrainDate(date3, min, '')).not.toEqual(null) + expect(constrainDate(date3, min, '').toISOString()).toEqual(date3.toISOString()) + expect(constrainDate(date3, min, null)).not.toEqual(null) + expect(constrainDate(date3, min, null).toISOString()).toEqual(date3.toISOString()) }) }) From 11f543e7a9631fc4129fc564994c05e913b8cbfa Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 7 Mar 2020 17:28:58 -0400 Subject: [PATCH 05/16] Update form-datepicker.js --- .../form-datepicker/form-datepicker.js | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js index 7fb362790a9..27e7fb500cd 100644 --- a/src/components/form-datepicker/form-datepicker.js +++ b/src/components/form-datepicker/form-datepicker.js @@ -1,7 +1,7 @@ import Vue from '../../utils/vue' import { BVFormBtnLabelControl, dropdownProps } from '../../utils/bv-form-btn-label-control' import { getComponentConfig } from '../../utils/config' -import { createDate, formatYMD, parseYMD } from '../../utils/date' +import { createDate, constrainDate, formatYMD, parseYMD } from '../../utils/date' import { isUndefinedOrNull } from '../../utils/inspect' import idMixin from '../../mixins/id' import { BButton } from '../button/button' @@ -31,6 +31,14 @@ const propsMixin = { type: [String, Date], default: '' }, + initialDate: { + // This specifies the calendar year/month/day + // That will be shown when first opening the datepicker + // if no v-model value is provided. Default is the + // current date (or min/max). Passed directly to b-calendar + type: [String, Date], + default: null + }, placeholder: { type: String, // Defaults to `labelNoDateSelected` from calendar context @@ -241,13 +249,13 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ return { // We always use `YYYY-MM-DD` value internally localYMD: formatYMD(this.value) || '', + // If the popup is open + isVisible: false, // Context data from BCalendar localLocale: null, isRTL: false, formattedValue: '', - activeYMD: '', - // If the popup is open - isVisible: false + activeYMD: '' } }, computed: { @@ -265,6 +273,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ value: self.localYMD, min: self.min, max: self.max, + initialDate: self.initialDate, readonly: self.readonly, disabled: self.disabled, locale: self.locale, @@ -293,7 +302,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ return (this.localLocale || '').replace(/-u-.*$/i, '') || null }, computedResetValue() { - return formatYMD(this.resetValue) || '' + return formatYMD(constrainDate(this.resetValue)) || '' } }, watch: { @@ -361,7 +370,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ this.$emit('context', ctx) }, onTodayButton() { - this.setAndClose(formatYMD(createDate())) + this.setAndClose(formatYMD(constrainDate(createDate()))) }, onResetButton() { this.setAndClose(this.computedResetValue) From a0c99b9b12ed6fca2c1b493da17ae37cf791461c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 7 Mar 2020 18:13:26 -0400 Subject: [PATCH 06/16] Update date.js --- src/utils/date.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/utils/date.js b/src/utils/date.js index 4de987e64db..a636087b505 100644 --- a/src/utils/date.js +++ b/src/utils/date.js @@ -116,8 +116,8 @@ export const oneYearAhead = date => { export const constrainDate = (date, min = null, max = null) => { // Ensure values are date objects (or `null`) date = parseYMD(date) - min = parseYMD(min) - max = parseYMD(max) - - return date ? (min && date < min ? min : max && date > max ? max : date) : null + min = parseYMD(min) || date + max = parseYMD(max) || date + // Return a new `Date` object (or `null`) + return createDate(date < min ? min : date > max ? max : date) } From c957db9773e72db5f4e67b7db063727760e3dbdb Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 7 Mar 2020 18:23:38 -0400 Subject: [PATCH 07/16] Update calendar.js --- src/components/calendar/calendar.js | 30 ++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js index d9723e48a8d..0d02a6fee94 100644 --- a/src/components/calendar/calendar.js +++ b/src/components/calendar/calendar.js @@ -7,6 +7,7 @@ import { getComponentConfig } from '../../utils/config' import { createDate, createDateFormatter, + constrainDate, datesEqual, firstDateOfMonth, formatYMD, @@ -58,6 +59,14 @@ export const BCalendar = Vue.extend({ type: Boolean, default: false }, + initialDate: { + // This specifies the calendar year/month/day + // That will be shown when first opening the datepicker + // if no v-model value is provided. Default is the + // current date (or min/max). Passed directly to b-calendar + type: [String, Date], + default: null + }, disabled: { type: Boolean, default: false @@ -212,7 +221,9 @@ export const BCalendar = Vue.extend({ // Selected date selectedYMD: selected, // Date in calendar grid that has `tabindex` of `0` - activeYMD: selected || formatYMD(this.getToday()), + activeYMD: + selected || + formatYMD(constrainDate(this.initialDate || this.getToday()), this.min, this.max), // Will be true if the calendar grid has/contains focus gridHasFocus: false, // Flag to enable the `aria-live` region(s) after mount @@ -361,6 +372,7 @@ export const BCalendar = Vue.extend({ // Merge in user supplied options ...this.dateFormatOptions, // Ensure hours/minutes/seconds are not shown + // As we do not support the time portion (yet) hour: undefined, minute: undefined, second: undefined, @@ -487,7 +499,9 @@ export const BCalendar = Vue.extend({ }, hidden(newVal) { // Reset the active focused day when hidden - this.activeYMD = this.selectedYMD || formatYMD(this.value) || formatYMD(this.getToday()) + this.activeYMD = + this.selectedYMD || + formatYMD(this.value || this.constrainDate(this.initialDate || this.getToday())) // Enable/disable the live regions this.setLive(!newVal) } @@ -541,10 +555,7 @@ export const BCalendar = Vue.extend({ constrainDate(date) { // Constrains a date between min and max // returns a new `Date` object instance - date = parseYMD(date) - const min = this.computedMin || date - const max = this.computedMax || date - return createDate(date < min ? min : date > max ? max : date) + return constrainDate(date, this.computedMin, this.computedMax) }, emitSelected(date) { // Performed in a `$nextTick()` to (probably) ensure @@ -573,6 +584,7 @@ export const BCalendar = Vue.extend({ let activeDate = createDate(this.activeDate) let checkDate = createDate(this.activeDate) const day = activeDate.getDate() + const constrainedToday = this.constrainDate(this.getToday()) const isRTL = this.isRTL if (keyCode === PAGEUP) { // PAGEUP - Previous month/year @@ -605,11 +617,11 @@ export const BCalendar = Vue.extend({ checkDate = activeDate } else if (keyCode === HOME) { // HOME - Today - activeDate = this.getToday() + activeDate = constrainedToday checkDate = activeDate } else if (keyCode === END) { // END - Selected date, or today if no selected date - activeDate = parseYMD(this.selectedDate) || this.getToday() + activeDate = parseYMD(this.selectedDate) || constrainedToday checkDate = activeDate } if (!this.dateOutOfRange(checkDate) && !datesEqual(activeDate, this.activeDate)) { @@ -664,7 +676,7 @@ export const BCalendar = Vue.extend({ }, gotoCurrentMonth() { // TODO: Maybe this goto date should be configurable? - this.activeYMD = formatYMD(this.getToday()) + this.activeYMD = formatYMD(this.constrainDate(this.getToday())) }, gotoNextMonth() { this.activeYMD = formatYMD(this.constrainDate(oneMonthAhead(this.activeDate))) From 71e973c6c5c3f58ca9cade485746e696598771b0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 7 Mar 2020 18:33:33 -0400 Subject: [PATCH 08/16] Update date.js --- src/utils/date.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/date.js b/src/utils/date.js index a636087b505..cd824ad52ec 100644 --- a/src/utils/date.js +++ b/src/utils/date.js @@ -119,5 +119,5 @@ export const constrainDate = (date, min = null, max = null) => { min = parseYMD(min) || date max = parseYMD(max) || date // Return a new `Date` object (or `null`) - return createDate(date < min ? min : date > max ? max : date) + return date ? (date < min ? min : date > max ? max : date) : null } From ea3cd8d3a3fb165dbb9781f7688c710332f7dc17 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 7 Mar 2020 18:46:34 -0400 Subject: [PATCH 09/16] Update form-datepicker.js --- src/components/form-datepicker/form-datepicker.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js index 27e7fb500cd..3fb471f66fb 100644 --- a/src/components/form-datepicker/form-datepicker.js +++ b/src/components/form-datepicker/form-datepicker.js @@ -370,7 +370,8 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ this.$emit('context', ctx) }, onTodayButton() { - this.setAndClose(formatYMD(constrainDate(createDate()))) + // Set to today (or min/max if today is out of range) + this.setAndClose(formatYMD(constrainDate(createDate()), this.min, this.max)) }, onResetButton() { this.setAndClose(this.computedResetValue) From 51d159c0a955df741e29d88c47361fd3f5e3d22a Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 7 Mar 2020 18:59:00 -0400 Subject: [PATCH 10/16] Update form-datepicker.js --- src/components/form-datepicker/form-datepicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js index 3fb471f66fb..0af75d6eac1 100644 --- a/src/components/form-datepicker/form-datepicker.js +++ b/src/components/form-datepicker/form-datepicker.js @@ -371,7 +371,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ }, onTodayButton() { // Set to today (or min/max if today is out of range) - this.setAndClose(formatYMD(constrainDate(createDate()), this.min, this.max)) + this.setAndClose(formatYMD(constrainDate(createDate(), this.min, this.max))) }, onResetButton() { this.setAndClose(this.computedResetValue) From 34da6ca3471e56484f5140e25c85437440632a94 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 7 Mar 2020 19:10:05 -0400 Subject: [PATCH 11/16] Update package.json --- src/components/calendar/package.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/calendar/package.json b/src/components/calendar/package.json index 6bf274e46bf..14f5d2544f3 100644 --- a/src/components/calendar/package.json +++ b/src/components/calendar/package.json @@ -20,6 +20,11 @@ "prop": "valueAsDate", "description": "Returns a `Date` object for the v-model instead of a `YYYY-MM-DD` string" }, + { + "prop": "initialDate", + "version": "2.7.0", + "description": "When a `value` is not specified, sets the initial calendar month date that will be presented to the user. Accepts a value in `YYYY-MM-DD` format or a `Date` object. Defaults to the current date (or min or max if the current date is out of range)" + }, { "prop": "disabled", "description": "Places the calendar in a non-interactive disabled state" From a09a8f0d5513ba0b14df1ad68e786b7c58c9a109 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 7 Mar 2020 19:10:28 -0400 Subject: [PATCH 12/16] Update package.json --- src/components/form-datepicker/package.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/form-datepicker/package.json b/src/components/form-datepicker/package.json index 036cd59b1d9..073a2515dbb 100644 --- a/src/components/form-datepicker/package.json +++ b/src/components/form-datepicker/package.json @@ -28,6 +28,11 @@ "prop": "resetValue", "description": "When the optional `reset` button is clicked, the selected date will be set to this value. Default is to clear the selected value" }, + { + "prop": "initialDate", + "version": "2.7.0", + "description": "When a `value` is not specified, sets the initial calendar month date that will be presented to the user. Accepts a value in `YYYY-MM-DD` format or a `Date` object. Defaults to the current date (or min or max if the current date is out of range)" + }, { "prop": "disabled", "description": "Places the calendar in a non-interactive disabled state" From aed73e93630164cfe23470d19dfb84f4972535c2 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 9 Mar 2020 19:12:21 -0300 Subject: [PATCH 13/16] Update README.md --- src/components/form-datepicker/README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/form-datepicker/README.md b/src/components/form-datepicker/README.md index 322d1f77bca..1e58efe9ded 100644 --- a/src/components/form-datepicker/README.md +++ b/src/components/form-datepicker/README.md @@ -288,6 +288,10 @@ The text for the optional buttons can be set via the `label-today-button`, `labe the `label-close-button` props. Due to the limited width of the footer section, it is recommended to keep these labels short. +Note that the `Set Today` button may not set the control today's date, if today's date is outside of +the `min` or `max` date range restrictions. In hte case it is outside of hte range, it will set to +either `min` or `max` (depending on which is closes to today's date). + ### Dropdown placement Use the dropdown props `right`, `dropup`, `dropright`, `dropleft`, `no-flip`, and `offset` to @@ -296,6 +300,14 @@ control the positioning of the popup calendar. Refer to the [`` documentation](/docs/components/dropdown) for details on the effects and usage of these props. +### Initial open calendar date + +By default, when no date is selected, the calendar view will be set to the current month (or the +`min` or `max` date if today's date is out of range of `min` or `max`) when opened. You can change +this behaviour by specifying a date via the `initial-date` prop. The initial date prop will be used +to determine the calendar month to be initially presented to teh user. It does not set the component's +value. + ### Dark mode Want a fancy popup with a dark background instead of a light background? Set the `dark` prop to From 3d7f4ac44c78bc158926b45957158e77dfc0e754 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 9 Mar 2020 19:13:36 -0300 Subject: [PATCH 14/16] Update README.md --- src/components/calendar/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/calendar/README.md b/src/components/calendar/README.md index fde90bef268..e359eafdbd0 100644 --- a/src/components/calendar/README.md +++ b/src/components/calendar/README.md @@ -230,6 +230,13 @@ fit the width of the parent element. The `width` prop has no effect when `block` Note it is _not recommended_ to set a width below `260px`, otherwise truncation and layout issues with the component may occur. +### Initial open calendar date + +By default, when no date is selected, the calendar view will be set to the current month (or the +`min` or `max` date if today's date is out of range of `min` or `max`). You can change this behaviour +by specifying a date via the `initial-date` prop. The initial date prop will be used to determine the +calendar month to be initially presented to the user. It does not set the component's value. + ### Date string format v2.6.0+ From 27504471ee2da7bf03923f2b401ff2e1ce49bd02 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 9 Mar 2020 19:14:21 -0300 Subject: [PATCH 15/16] Update README.md --- src/components/form-datepicker/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form-datepicker/README.md b/src/components/form-datepicker/README.md index 1e58efe9ded..0f9d2924264 100644 --- a/src/components/form-datepicker/README.md +++ b/src/components/form-datepicker/README.md @@ -305,7 +305,7 @@ and usage of these props. By default, when no date is selected, the calendar view will be set to the current month (or the `min` or `max` date if today's date is out of range of `min` or `max`) when opened. You can change this behaviour by specifying a date via the `initial-date` prop. The initial date prop will be used -to determine the calendar month to be initially presented to teh user. It does not set the component's +to determine the calendar month to be initially presented to the user. It does not set the component's value. ### Dark mode From e4ce5f0b9b2db7605128fa6aef9fb29861a70196 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Tue, 10 Mar 2020 08:07:04 +0100 Subject: [PATCH 16/16] Fix typos --- src/components/calendar/README.md | 9 +++++---- src/components/calendar/calendar.js | 9 ++++----- src/components/form-datepicker/README.md | 6 +++--- src/components/form-datepicker/form-datepicker.js | 8 ++++---- src/components/form-timepicker/package.json | 2 +- src/components/time/package.json | 2 +- src/utils/date.js | 2 +- 7 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/calendar/README.md b/src/components/calendar/README.md index e359eafdbd0..2debb6ab272 100644 --- a/src/components/calendar/README.md +++ b/src/components/calendar/README.md @@ -233,9 +233,10 @@ with the component may occur. ### Initial open calendar date By default, when no date is selected, the calendar view will be set to the current month (or the -`min` or `max` date if today's date is out of range of `min` or `max`). You can change this behaviour -by specifying a date via the `initial-date` prop. The initial date prop will be used to determine the -calendar month to be initially presented to the user. It does not set the component's value. +`min` or `max` date if today's date is out of range of `min` or `max`). You can change this +behaviour by specifying a date via the `initial-date` prop. The initial date prop will be used to +determine the calendar month to be initially presented to the user. It does not set the component's +value. ### Date string format @@ -639,5 +640,5 @@ verbosity and to provide consistency across various screen readers (NVDA, when e ## See also - [`` Date picker custom form input](/docs/components/form-datepicker) -- [`` Time picker custom form input](/docs/comonents/form-timepicker) +- [`` Time picker custom form input](/docs/components/form-timepicker) - [`` Time date selection widget](/docs/components/calendar) diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js index 0d02a6fee94..8f7c1e48869 100644 --- a/src/components/calendar/calendar.js +++ b/src/components/calendar/calendar.js @@ -60,10 +60,9 @@ export const BCalendar = Vue.extend({ default: false }, initialDate: { - // This specifies the calendar year/month/day - // That will be shown when first opening the datepicker - // if no v-model value is provided. Default is the - // current date (or min/max). Passed directly to b-calendar + // This specifies the calendar year/month/day that will be shown when + // first opening the datepicker if no v-model value is provided + // Default is the current date (or `min`/`max`) type: [String, Date], default: null }, @@ -706,7 +705,7 @@ export const BCalendar = Vue.extend({ // Flag for making the `aria-live` regions live const isLive = this.isLive // Pre-compute some IDs - // Thes should be computed props + // This should be computed props const idValue = safeId() const idWidget = safeId('_calendar-wrapper_') const idNav = safeId('_calendar-nav_') diff --git a/src/components/form-datepicker/README.md b/src/components/form-datepicker/README.md index 0f9d2924264..6c25c05716d 100644 --- a/src/components/form-datepicker/README.md +++ b/src/components/form-datepicker/README.md @@ -289,7 +289,7 @@ the `label-close-button` props. Due to the limited width of the footer section, keep these labels short. Note that the `Set Today` button may not set the control today's date, if today's date is outside of -the `min` or `max` date range restrictions. In hte case it is outside of hte range, it will set to +the `min` or `max` date range restrictions. In the case it is outside of the range, it will set to either `min` or `max` (depending on which is closes to today's date). ### Dropdown placement @@ -305,8 +305,8 @@ and usage of these props. By default, when no date is selected, the calendar view will be set to the current month (or the `min` or `max` date if today's date is out of range of `min` or `max`) when opened. You can change this behaviour by specifying a date via the `initial-date` prop. The initial date prop will be used -to determine the calendar month to be initially presented to the user. It does not set the component's -value. +to determine the calendar month to be initially presented to the user. It does not set the +component's value. ### Dark mode diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js index 0af75d6eac1..09c857426c5 100644 --- a/src/components/form-datepicker/form-datepicker.js +++ b/src/components/form-datepicker/form-datepicker.js @@ -32,10 +32,10 @@ const propsMixin = { default: '' }, initialDate: { - // This specifies the calendar year/month/day - // That will be shown when first opening the datepicker - // if no v-model value is provided. Default is the - // current date (or min/max). Passed directly to b-calendar + // This specifies the calendar year/month/day that will be shown when + // first opening the datepicker if no v-model value is provided + // Default is the current date (or `min`/`max`) + // Passed directly to type: [String, Date], default: null }, diff --git a/src/components/form-timepicker/package.json b/src/components/form-timepicker/package.json index 08ccf8316d4..92342824416 100644 --- a/src/components/form-timepicker/package.json +++ b/src/components/form-timepicker/package.json @@ -36,7 +36,7 @@ }, { "prop": "showSeconds", - "description": "When true, shows the seconds spinbutton. If `false` the seconds spin button will not be shown and the seconds portion of hte time will always be `0`" + "description": "When true, shows the seconds spinbutton. If `false` the seconds spin button will not be shown and the seconds portion of the time will always be `0`" }, { "prop": "hour12", diff --git a/src/components/time/package.json b/src/components/time/package.json index 7ba9b4a2f24..fbbbfad3950 100644 --- a/src/components/time/package.json +++ b/src/components/time/package.json @@ -17,7 +17,7 @@ }, { "prop": "showSeconds", - "description": "When true, shows the seconds spinbutton. If `false` the seconds spin button will not be shown and the seconds portion of hte time will always be `0`" + "description": "When true, shows the seconds spinbutton. If `false` the seconds spin button will not be shown and the seconds portion of the time will always be `0`" }, { "prop": "hour12", diff --git a/src/utils/date.js b/src/utils/date.js index cd824ad52ec..64774d66e15 100644 --- a/src/utils/date.js +++ b/src/utils/date.js @@ -114,7 +114,7 @@ export const oneYearAhead = date => { // Helper function to constrain a date between two values // Always returns a `Date` object or `null` if no date passed export const constrainDate = (date, min = null, max = null) => { - // Ensure values are date objects (or `null`) + // Ensure values are `Date` objects (or `null`) date = parseYMD(date) min = parseYMD(min) || date max = parseYMD(max) || date