From 2fb5c9f74cc80b7560f08fc63092e0b771701eb1 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Mon, 13 Jan 2025 22:47:04 +0900
Subject: [PATCH] TypeScript Rollout Tier 9 - Datepicker (#379)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(lib): rewrite datepicker in TS

Rewrites the datepicker components in the `src/components/datepicker`
folder in TypeScript.

Adds a new file `types.ts` which defines common types shared among the
datepicker components.

Makes some props explicitly allow `null` to suppress type errors at
lines where `null` is assigned to them.

Applies the `valueOf` method to `Date` when it is passed to `isNaN`
because `isNaN` allows only a number. It should not matter to the
decision. In some cases where the `Date` parameter may be `undefined`,
we have to be careful not to apply `valueOf` to `undefined` and replace
`undefined` with `NaN`.

Replaces some `&&` chaining with ternary conditional operators (`?:`),
where a fallback value should be `undefined` rather than a boolean
(`false`).

Overuses non-null assertion operators (`!`) to suppress type errors
while keeping the original behavior. I decided not to use optional
chaining operators (`?`) unless unavoidable, because they change the
pass of the execution.

Overuses type casting (`as`) to suppress type errors while keeping the
original behavior. I did not take approaches that were more
sophisticated but involving logic changes, since we decided to change
the code, especially its logics, as little as possible during the
migration process.

Some trivial changes:
- Wraps the entire component definition in a `defineComponent` call
- All the Buefy components are directly named when they are registered;
  the `name` fields are no longer used. Otherwise type-checking won't
  work.
- Replaces JSDoc-style comments with ordinary comments so that
  `@microsoft/api-extractor` won't pick them up for documentation.

* test(lib): rewrite spec for datepicker in TS

Rewrites the specs for the datepicker components in the
`src/components/datepicker` in TypeScript.

In `Datepicker.spec.js→ts`:
- Hoists the `defaultProps` fixture to the top level so that its type is
  implicitly defined. And makes it a function so that it reflects the
  configuration made by `setOptions`.
- `focusedDate` is no longer injected into `config` via `setOptions` but
  given as an independent constant. Because `focusedDate` is not a
  member of `BuefyConfig`, and `BuefyConfig` is not a container of
  arbitrary values.

In `DatepickerMonth.spec.js→ts`:
- `newDate` checks if the `y`, `m`, and `d` arguments are defined,
  because `Date` does not like them undefined. Creates `Date` without
  arguments if they are omitted.
- `focusedDate` is no longer injected into `config` via `setOptions` but
  given as an independent constant. See the comments for
  `Datepicker.spec` for why.
- Gives a `Date` instead of a number to the following methods:
  - `emitChosenDate`
  - `updateSelectedDate`

  Allowing a number to these methods does not make sense.

In `DatepickerTable.spec.js→ts`:
- Hoists the `defaultProps` fixture to the top level so that its type
  can be implicitly defined
- `focusedDate` is no longer injected into `config` via `setOptions` but
  given as an independentconstant. See the comments for
  `Datepicker.spec` for why.

In `DatepickerTableRow.spec.js→ts`:
- `newDate` checks if the `y`, `m`, and `d` arguments are defined,
  because `Date` does not like them undefined. Create `Date` without
  arguments if they are omitted.
- Gives a `Date` instead of a number to the following methods:
  - `emitChosenDate`
  - `updateSelectedDate`

  Allowing a number to these methods does not make sense.
- `$emit` of the injected fake `$datepicker` explicitly receives
  parameters to suppress the type errors regarding `arguments`.

Common in the spec files:
- `newDate` checks if the `y`, `m`, and `d` arguments are defined.

In the `__snapshots__` subfolder, replaces the spec snapshots produced
by Jest with those by Vitest:
- `Datepicker.spec.js.snap` → `Datepicker.spec.ts.snap`
- `DatepickerMonth.spec.js.snap` → `DatepickerMonth.spec.ts.snap`
- `DatepickerTable.spec.js.snap` → `DatepickerTable.spec.ts.snap`
- `DatepickerTableRow.spec.js.snap` → `DatepickerTableRow.spec.ts.snap`

Migrates from Jest to Vitest:
- Imports the building blocks for the spec from the `vitest` package
- Replaces `jest` with `vi`

* chore(lib): bundle datepicker in TS

`rollup.config.mjs` removes "datepicker" from `JS_COMPONENTS`.

* feat(docs): rewrite docs for datepicker in TS

Rewrites the documentation for the datepicker components in the
`src/pages/components/datepicker` folder in TypeScript. All the changes
are straightforward.

Here is a TypeScript migration tip:
- Explicitly import and register components so that they are type
  checked. No type-checking is performed for globally registered
  components.
---
 packages/buefy-next/rollup.config.mjs         |   1 -
 ...{Datepicker.spec.js => Datepicker.spec.ts} |  64 +++---
 .../src/components/datepicker/Datepicker.vue  | 209 ++++++++++--------
 ...rMonth.spec.js => DatepickerMonth.spec.ts} |  55 +++--
 .../components/datepicker/DatepickerMonth.vue | 126 ++++++-----
 ...rTable.spec.js => DatepickerTable.spec.ts} |  40 ++--
 .../components/datepicker/DatepickerTable.vue | 137 ++++++------
 ...Row.spec.js => DatepickerTableRow.spec.ts} |  39 ++--
 .../datepicker/DatepickerTableRow.vue         | 121 ++++++----
 .../__snapshots__/Datepicker.spec.js.snap     |  54 -----
 .../__snapshots__/Datepicker.spec.ts.snap     |  54 +++++
 .../DatepickerMonth.spec.js.snap              |  33 ---
 .../DatepickerMonth.spec.ts.snap              |  33 +++
 .../DatepickerTable.spec.js.snap              |  16 --
 .../DatepickerTable.spec.ts.snap              |  16 ++
 .../DatepickerTableRow.spec.js.snap           |  21 --
 .../DatepickerTableRow.spec.ts.snap           |  23 ++
 .../datepicker/{index.js => index.ts}         |   4 +-
 .../src/components/datepicker/types.ts        |  41 ++++
 .../components/datepicker/Datepicker.vue      |  45 ++--
 .../api/{datepicker.js => datepicker.ts}      |   0
 .../datepicker/examples/ExEditable.vue        |  10 +-
 .../datepicker/examples/ExEvents.vue          |  14 +-
 .../datepicker/examples/ExFooter.vue          |  16 +-
 .../datepicker/examples/ExHeader.vue          |  18 +-
 .../datepicker/examples/ExInline.vue          |  10 +-
 .../datepicker/examples/ExMonth.vue           |   4 +
 .../datepicker/examples/ExMultipleInput.vue   |  13 +-
 .../examples/ExProgrammatically.vue           |   7 +-
 .../datepicker/examples/ExRange.vue           |   9 +-
 .../datepicker/examples/ExRangeInput.vue      |  13 +-
 .../datepicker/examples/ExSimple.vue          |  17 +-
 .../datepicker/examples/ExTrigger.vue         |  17 +-
 .../datepicker/examples/ExUnselectable.vue    |  17 +-
 .../{datepicker.js => datepicker.ts}          |   0
 35 files changed, 770 insertions(+), 527 deletions(-)
 rename packages/buefy-next/src/components/datepicker/{Datepicker.spec.js => Datepicker.spec.ts} (90%)
 rename packages/buefy-next/src/components/datepicker/{DatepickerMonth.spec.js => DatepickerMonth.spec.ts} (88%)
 rename packages/buefy-next/src/components/datepicker/{DatepickerTable.spec.js => DatepickerTable.spec.ts} (91%)
 rename packages/buefy-next/src/components/datepicker/{DatepickerTableRow.spec.js => DatepickerTableRow.spec.ts} (89%)
 delete mode 100644 packages/buefy-next/src/components/datepicker/__snapshots__/Datepicker.spec.js.snap
 create mode 100644 packages/buefy-next/src/components/datepicker/__snapshots__/Datepicker.spec.ts.snap
 delete mode 100644 packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerMonth.spec.js.snap
 create mode 100644 packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerMonth.spec.ts.snap
 delete mode 100644 packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTable.spec.js.snap
 create mode 100644 packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTable.spec.ts.snap
 delete mode 100644 packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTableRow.spec.js.snap
 create mode 100644 packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTableRow.spec.ts.snap
 rename packages/buefy-next/src/components/datepicker/{index.js => index.ts} (80%)
 create mode 100644 packages/buefy-next/src/components/datepicker/types.ts
 rename packages/docs/src/pages/components/datepicker/api/{datepicker.js => datepicker.ts} (100%)
 rename packages/docs/src/pages/components/datepicker/variables/{datepicker.js => datepicker.ts} (100%)

diff --git a/packages/buefy-next/rollup.config.mjs b/packages/buefy-next/rollup.config.mjs
index 66c0df5a6..e9a95badd 100644
--- a/packages/buefy-next/rollup.config.mjs
+++ b/packages/buefy-next/rollup.config.mjs
@@ -30,7 +30,6 @@ const components = fs
     )
 
 const JS_COMPONENTS = [
-    'datepicker',
     'datetimepicker',
 ]
 
diff --git a/packages/buefy-next/src/components/datepicker/Datepicker.spec.js b/packages/buefy-next/src/components/datepicker/Datepicker.spec.ts
similarity index 90%
rename from packages/buefy-next/src/components/datepicker/Datepicker.spec.js
rename to packages/buefy-next/src/components/datepicker/Datepicker.spec.ts
index 9b327a287..011ecd6ab 100644
--- a/packages/buefy-next/src/components/datepicker/Datepicker.spec.js
+++ b/packages/buefy-next/src/components/datepicker/Datepicker.spec.ts
@@ -1,14 +1,16 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import BDatepicker from '@components/datepicker/Datepicker'
+import type { VueWrapper } from '@vue/test-utils'
+import BDatepicker from '@components/datepicker/Datepicker.vue'
 
 import config, { setOptions } from '@utils/config'
 
-let wrapper, defaultProps
+let wrapper: VueWrapper<InstanceType<typeof BDatepicker>>
 
-const newDate = (y, m, d) => {
+const newDate = (y: number, m: number, d: number) => {
     const date = new Date(Date.UTC(y, m, d))
-    date.getDate = jest.fn(() => date.getUTCDate())
-    date.getMonth = jest.fn(() => date.getUTCMonth())
+    date.getDate = vi.fn(() => date.getUTCDate())
+    date.getMonth = vi.fn(() => date.getUTCMonth())
     return date
 }
 
@@ -19,14 +21,19 @@ const defaultMonthNames = [
 const defaultDayNames = ['Su', 'M', 'Tu', 'W', 'Th', 'F', 'S']
 const defaultFirstDayOfWeek = 0
 
+const defaultProps = () => ({
+    dayNames: config.defaultDayNames,
+    monthNames: config.defaultMonthNames,
+    focusedDate: newDate(2018, 7, 15)
+})
+
 describe('BDatepicker', () => {
     describe('with invalid value from config config', () => {
         beforeEach(() => {
             setOptions(Object.assign(config, {
                 defaultMonthNames: 'A string!',
                 defaultDayNames: 'A string!',
-                defaultFirstDayOfWeek: 'A string!',
-                focusedDate: newDate(2018, 7, 1)
+                defaultFirstDayOfWeek: 'A string!'
             }))
 
             wrapper = shallowMount(BDatepicker, {
@@ -57,19 +64,12 @@ describe('BDatepicker', () => {
         setOptions(Object.assign(config, {
             defaultMonthNames,
             defaultDayNames,
-            defaultFirstDayOfWeek,
-            focusedDate: newDate(2018, 7, 15)
+            defaultFirstDayOfWeek
         }))
 
-        defaultProps = {
-            dayNames: config.defaultDayNames,
-            monthNames: config.defaultMonthNames,
-            focusedDate: config.focusedDate
-        }
-
         wrapper = shallowMount(BDatepicker, {
             props: {
-                ...defaultProps
+                ...defaultProps()
             },
             global: {
                 stubs: {
@@ -78,8 +78,8 @@ describe('BDatepicker', () => {
             }
         })
 
-        wrapper.vm.updateInternalState = jest.fn(() => wrapper.vm.updateInternalState)
-        wrapper.vm.togglePicker = jest.fn(() => wrapper.vm.togglePicker)
+        wrapper.vm.updateInternalState = vi.fn(() => wrapper.vm.updateInternalState)
+        wrapper.vm.togglePicker = vi.fn(() => wrapper.vm.togglePicker)
     })
 
     it('is called', () => {
@@ -90,7 +90,7 @@ describe('BDatepicker', () => {
     it('render correctly', () => {
         wrapper = shallowMount(BDatepicker, {
             props: {
-                ...defaultProps
+                ...defaultProps()
             },
             global: {
                 stubs: {
@@ -104,7 +104,7 @@ describe('BDatepicker', () => {
                 }
             }
         })
-        wrapper.setProps({ dateCreator: () => {} })
+        wrapper.setProps({ dateCreator: () => newDate(2024, 8, 21) })
         expect(wrapper.html()).toMatchSnapshot()
     })
 
@@ -160,8 +160,8 @@ describe('BDatepicker', () => {
 
     it('react accordingly when calling onChange', async () => {
         const date = new Date()
-        await wrapper.setProps({ dateParser: jest.fn() })
-        wrapper.vm.onChange(date)
+        await wrapper.setProps({ dateParser: vi.fn() })
+        wrapper.vm.onChange(date + '')
         expect(wrapper.vm.dateParser).toHaveBeenCalled()
     })
 
@@ -268,8 +268,8 @@ describe('BDatepicker', () => {
         await wrapper.setProps({
             openOnFocus: false
         })
-        wrapper.vm.onFocus = jest.fn()
-        wrapper.vm.togglePicker = jest.fn()
+        wrapper.vm.onFocus = vi.fn()
+        wrapper.vm.togglePicker = vi.fn()
 
         wrapper.vm.handleOnFocus()
         expect(wrapper.vm.onFocus).toHaveBeenCalled()
@@ -321,8 +321,8 @@ describe('BDatepicker', () => {
                     inline: true,
                     multiple: true
                 })
-                wrapper.vm.updateInternalState = jest.fn(() => wrapper.vm.updateInternalState)
-                wrapper.vm.togglePicker = jest.fn(() => wrapper.vm.togglePicker)
+                wrapper.vm.updateInternalState = vi.fn(() => wrapper.vm.updateInternalState)
+                wrapper.vm.togglePicker = vi.fn(() => wrapper.vm.togglePicker)
             })
 
             it('should format multiple dates passed via array', () => {
@@ -356,7 +356,7 @@ describe('BDatepicker', () => {
 
     describe('#formatValue', () => {
         it('should call dateFormatter, passing the date', async () => {
-            const mockDateFormatter = jest.fn()
+            const mockDateFormatter = vi.fn()
             await wrapper.setProps({
                 dateFormatter: mockDateFormatter,
                 closeOnClick: false
@@ -367,24 +367,24 @@ describe('BDatepicker', () => {
         })
 
         it('should not call dateFormatter when value is undefined or NaN', async () => {
-            const mockDateFormatter = jest.fn()
+            const mockDateFormatter = vi.fn()
             await wrapper.setProps({
                 dateFormatter: mockDateFormatter
             })
             wrapper.vm.formatValue(undefined)
             expect(mockDateFormatter.mock.calls.length).toEqual(0)
-            wrapper.vm.formatValue('buefy')
+            wrapper.vm.formatValue('buefy' as unknown as Date)
             expect(mockDateFormatter.mock.calls.length).toEqual(0)
         })
 
         it('should not call dateFormatter when value is an array with undefined or NaN elements', async () => {
-            const mockDateFormatter = jest.fn()
+            const mockDateFormatter = vi.fn()
             await wrapper.setProps({
                 dateFormatter: mockDateFormatter
             })
-            wrapper.vm.formatValue([new Date(), undefined])
+            wrapper.vm.formatValue([new Date(), undefined] as unknown as Date[])
             expect(mockDateFormatter.mock.calls.length).toEqual(0)
-            wrapper.vm.formatValue([new Date(), 'buefy'])
+            wrapper.vm.formatValue([new Date(), 'buefy'] as unknown as Date[])
             expect(mockDateFormatter.mock.calls.length).toEqual(0)
         })
     })
diff --git a/packages/buefy-next/src/components/datepicker/Datepicker.vue b/packages/buefy-next/src/components/datepicker/Datepicker.vue
index fbe6a9eef..7fc8546f4 100644
--- a/packages/buefy-next/src/components/datepicker/Datepicker.vue
+++ b/packages/buefy-next/src/components/datepicker/Datepicker.vue
@@ -207,7 +207,7 @@
             ref="input"
             :type="!isTypeMonth ? 'date' : 'month'"
             autocomplete="off"
-            :model-value="formatNative(computedValue)"
+            :model-value="formatNative(computedValue as Date | null | undefined)"
             :placeholder="placeholder"
             :size="size"
             :icon="icon"
@@ -227,23 +227,43 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
 import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 import FormElementMixin from '../../utils/FormElementMixin'
 import { isMobile, getMonthNames, getWeekdayNames, matchWithGroups } from '../../utils/helpers'
 import config from '../../utils/config'
 
-import Dropdown from '../dropdown/Dropdown.vue'
-import DropdownItem from '../dropdown/DropdownItem.vue'
-import Input from '../input/Input.vue'
-import Field from '../field/Field.vue'
-import Select from '../select/Select.vue'
-import Icon from '../icon/Icon.vue'
-
-import DatepickerTable from './DatepickerTable.vue'
-import DatepickerMonth from './DatepickerMonth.vue'
+import BDropdown from '../dropdown/Dropdown.vue'
+import BDropdownItem from '../dropdown/DropdownItem.vue'
+import BInput from '../input/Input.vue'
+import BField from '../field/Field.vue'
+import BSelect from '../select/Select.vue'
+import BIcon from '../icon/Icon.vue'
+
+import BDatepickerTable from './DatepickerTable.vue'
+import BDatepickerMonth from './DatepickerMonth.vue'
+import type {
+    DateFormatter,
+    DateParser,
+    DatepickerEvent,
+    DateSelector,
+    FocusedDate,
+    IDatepicker
+} from './types'
+
+type BDropdownInstance = InstanceType<typeof BDropdown>
+type BInputInstance = InstanceType<typeof BInput>
+
+interface MonthInfo {
+    name: string
+    index: number
+    disabled: boolean
+}
 
-const defaultDateFormatter = (date, vm) => {
+const defaultDateFormatter: DateFormatter = (date, vm) => {
     const targetDates = Array.isArray(date) ? date : [date]
     const dates = targetDates.map((date) => {
         const d = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 12)
@@ -252,7 +272,7 @@ const defaultDateFormatter = (date, vm) => {
     return !vm.multiple ? dates.join(' - ') : dates.join(', ')
 }
 
-const defaultDateParser = (date, vm) => {
+const defaultDateParser: DateParser = (date, vm) => {
     if (vm.dtf.formatToParts && typeof vm.dtf.formatToParts === 'function') {
         const formatRegex = (vm.isTypeMonth ? vm.dtfMonth : vm.dtf)
             .formatToParts(new Date(2000, 11, 25)).map((part) => {
@@ -269,11 +289,11 @@ const defaultDateParser = (date, vm) => {
             dateGroups.year &&
             dateGroups.year.length === 4 &&
             dateGroups.month &&
-            dateGroups.month <= 12
+            +dateGroups.month <= 12
         ) {
-            if (vm.isTypeMonth) return new Date(dateGroups.year, dateGroups.month - 1)
-            else if (dateGroups.day && dateGroups.day <= 31) {
-                return new Date(dateGroups.year, dateGroups.month - 1, dateGroups.day, 12)
+            if (vm.isTypeMonth) return new Date(+dateGroups.year, +dateGroups.month - 1)
+            else if (dateGroups.day && +dateGroups.day <= 31) {
+                return new Date(+dateGroups.year, +dateGroups.month - 1, +dateGroups.day, 12)
             }
         }
     }
@@ -284,23 +304,23 @@ const defaultDateParser = (date, vm) => {
         const year = s[0].length === 4 ? s[0] : s[1]
         const month = s[0].length === 2 ? s[0] : s[1]
         if (year && month) {
-            return new Date(parseInt(year, 10), parseInt(month - 1, 10), 1, 0, 0, 0, 0)
+            return new Date(parseInt(year, 10), parseInt(month, 10) - 1, 1, 0, 0, 0, 0)
         }
     }
     return null
 }
 
-export default {
+export default defineComponent({
     name: 'BDatepicker',
     components: {
-        [DatepickerTable.name]: DatepickerTable,
-        [DatepickerMonth.name]: DatepickerMonth,
-        [Input.name]: Input,
-        [Field.name]: Field,
-        [Select.name]: Select,
-        [Icon.name]: Icon,
-        [Dropdown.name]: Dropdown,
-        [DropdownItem.name]: DropdownItem
+        BDatepickerTable,
+        BDatepickerMonth,
+        BInput,
+        BField,
+        BSelect,
+        BIcon,
+        BDropdown,
+        BDropdownItem
     },
     mixins: [CompatFallthroughMixin, FormElementMixin],
     provide() {
@@ -310,10 +330,10 @@ export default {
     },
     props: {
         modelValue: {
-            type: [Date, Array]
+            type: [Date, Array<Date>, null] as PropType<Date | Date[] | null>
         },
         dayNames: {
-            type: Array,
+            type: [Array<string>, null] as PropType<string[] | null>,
             default: () => {
                 if (!Array.isArray(config.defaultDayNames)) {
                     return undefined
@@ -322,7 +342,7 @@ export default {
             }
         },
         monthNames: {
-            type: Array,
+            type: [Array<string>, null] as PropType<string[] | null>,
             default: () => {
                 if (!Array.isArray(config.defaultMonthNames)) {
                     return undefined
@@ -341,22 +361,22 @@ export default {
             }
         },
         inline: Boolean,
-        minDate: Date,
-        maxDate: Date,
+        minDate: [Date, null] as PropType<Date | null>,
+        maxDate: [Date, null] as PropType<Date | null>,
         focusedDate: Date,
         placeholder: String,
         editable: Boolean,
         disabled: Boolean,
         horizontalTimePicker: Boolean,
-        unselectableDates: [Array, Function],
+        unselectableDates: [Array, Function] as PropType<Date[] | DateSelector>,
         unselectableDaysOfWeek: {
-            type: Array,
+            type: [Array<number>, null] as PropType<number[] | null>,
             default: () => config.defaultUnselectableDaysOfWeek
         },
-        selectableDates: [Array, Function],
+        selectableDates: [Array, Function] as PropType<Date[] | DateSelector>,
         dateFormatter: {
-            type: Function,
-            default: (date, vm) => {
+            type: Function as PropType<DateFormatter>,
+            default: (date: Date, vm: IDatepicker) => {
                 if (typeof config.defaultDateFormatter === 'function') {
                     return config.defaultDateFormatter(date)
                 } else {
@@ -365,8 +385,8 @@ export default {
             }
         },
         dateParser: {
-            type: Function,
-            default: (date, vm) => {
+            type: Function as PropType<DateParser>,
+            default: (date: string, vm: IDatepicker) => {
                 if (typeof config.defaultDateParser === 'function') {
                     return config.defaultDateParser(date)
                 } else {
@@ -375,7 +395,7 @@ export default {
             }
         },
         dateCreator: {
-            type: Function,
+            type: Function as PropType<() => Date>,
             default: () => {
                 if (typeof config.defaultDateCreator === 'function') {
                     return config.defaultDateCreator()
@@ -391,7 +411,7 @@ export default {
         position: String,
         iconRight: String,
         iconRightClickable: Boolean,
-        events: Array,
+        events: Array<Date | DatepickerEvent>,
         indicators: {
             type: String,
             default: 'dots'
@@ -406,7 +426,7 @@ export default {
             default: () => config.defaultIconNext
         },
         yearsRange: {
-            type: Array,
+            type: Array<number>,
             default: () => config.defaultDatepickerYearsRange
         },
         type: {
@@ -414,7 +434,7 @@ export default {
             validator: (value) => {
                 return [
                     'month'
-                ].indexOf(value) >= 0
+                ].indexOf(value as string) >= 0
             }
         },
         nearbyMonthDays: {
@@ -465,16 +485,18 @@ export default {
         ariaNextLabel: String,
         ariaPreviousLabel: String
     },
-    emits: [
-        'active-change',
-        'change-month',
-        'change-year',
-        'icon-right-click',
-        'range-end',
-        'range-start',
-        'update:modelValue',
-        'week-number-click' // emitted from `DatepickerTableRow`
-    ],
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        'active-change': (_active: boolean) => true,
+        'change-month': (_month: number) => true,
+        'change-year': (_year: number) => true,
+        'icon-right-click': (_event: MouseEvent) => true,
+        'range-end': (_date: Date) => true,
+        'range-start': (_date: Date) => true,
+        'update:modelValue': (_value: Date | Date[] | null | undefined) => true,
+        'week-number-click': (_week: number, _year: number) => true // emitted by `DatepickerTableRow`
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
     data() {
         const focusedDate = (Array.isArray(this.modelValue)
             ? this.modelValue[0]
@@ -492,7 +514,7 @@ export default {
                 day: focusedDate.getDate(),
                 month: focusedDate.getMonth(),
                 year: focusedDate.getFullYear()
-            },
+            } as FocusedDate,
             _elementRef: 'input',
             _isDatepicker: true
         }
@@ -502,7 +524,7 @@ export default {
             get() {
                 return this.dateSelected
             },
-            set(value) {
+            set(value: Date | Date[] | null | undefined) {
                 this.updateInternalState(value)
                 if (!this.multiple) this.togglePicker(false)
                 this.$emit('update:modelValue', value)
@@ -520,7 +542,7 @@ export default {
             return new Intl.DateTimeFormat(this.locale, {
                 year: 'numeric',
                 month: 'numeric'
-            }).resolvedOptions()
+            }).resolvedOptions() as Intl.DateTimeFormatOptions
         },
         dtf() {
             return new Intl.DateTimeFormat(this.locale)
@@ -543,7 +565,7 @@ export default {
             }
             return getWeekdayNames(this.locale)
         },
-        listOfMonths() {
+        listOfMonths(): MonthInfo[] {
             let minMonth = 0
             let maxMonth = 12
             if (this.minDate && this.focusedDateData.year === this.minDate.getFullYear()) {
@@ -626,7 +648,7 @@ export default {
         }
     },
     watch: {
-        /**
+        /*
          * When v-model is changed:
          *   1. Update internal value.
          *   2. If it's invalid, validate again.
@@ -660,16 +682,16 @@ export default {
         /*
          * Parse string into date
          */
-        onChange(value) {
+        onChange(value: string) {
             const date = this.dateParser(value, this)
-            if (date && (!isNaN(date) ||
+            if (date && (!isNaN(date.valueOf()) ||
                 (Array.isArray(date) && date.length === 2 && !isNaN(date[0]) && !isNaN(date[1])))) {
                 this.computedValue = date
             } else {
                 // Force refresh input value when not valid date
                 this.computedValue = null
                 if (this.$refs.input) {
-                    this.$refs.input.newValue = this.computedValue
+                    (this.$refs.input as BInputInstance).newValue = this.computedValue
                 }
             }
         },
@@ -677,12 +699,13 @@ export default {
         /*
          * Format date into string
          */
-        formatValue(value) {
+        formatValue(value: Date | Date[] | null | undefined) {
             if (Array.isArray(value)) {
-                const isArrayWithValidDates = Array.isArray(value) && value.every((v) => !isNaN(v))
+                const isArrayWithValidDates =
+                    Array.isArray(value) && value.every((v) => !isNaN(v?.valueOf() ?? NaN))
                 return isArrayWithValidDates ? this.dateFormatter([...value], this) : null
             }
-            return (value && !isNaN(value)) ? this.dateFormatter(value, this) : null
+            return (value && !isNaN(value.valueOf())) ? this.dateFormatter(value, this) : null
         },
 
         /*
@@ -723,7 +746,7 @@ export default {
             }
         },
 
-        formatNative(value) {
+        formatNative(value: Date | null | undefined) {
             return this.isTypeMonth
                 ? this.formatYYYYMM(value)
                 : this.formatYYYYMMDD(value)
@@ -732,9 +755,9 @@ export default {
         /*
          * Format date into string 'YYYY-MM-DD'
          */
-        formatYYYYMMDD(value) {
-            const date = new Date(value)
-            if (value && !isNaN(date)) {
+        formatYYYYMMDD(value: Date | null | undefined) {
+            const date = new Date(value!)
+            if (value && !isNaN(date.valueOf())) {
                 const year = date.getFullYear()
                 const month = date.getMonth() + 1
                 const day = date.getDate()
@@ -748,9 +771,9 @@ export default {
         /*
          * Format date into string 'YYYY-MM'
          */
-        formatYYYYMM(value) {
-            const date = new Date(value)
-            if (value && !isNaN(date)) {
+        formatYYYYMM(value: Date | null | undefined) {
+            const date = new Date(value!)
+            if (value && !isNaN(date.valueOf())) {
                 const year = date.getFullYear()
                 const month = date.getMonth() + 1
                 return year + '-' +
@@ -762,8 +785,8 @@ export default {
         /*
          * Parse date from string
          */
-        onChangeNativePicker(event) {
-            const date = event.target.value
+        onChangeNativePicker(event: { target?: { value: string } }) {
+            const date = event.target!.value
             const s = date ? date.split('-') : []
             if (s.length === 3) {
                 const year = parseInt(s[0], 10)
@@ -774,14 +797,16 @@ export default {
                 this.computedValue = null
             }
         },
-        updateInternalState(value) {
+        updateInternalState(value: Date | Date[] | null | undefined) {
             if (this.dateSelected === value) return
             const isArray = Array.isArray(value)
             const currentDate = isArray
                 ? (!value.length ? this.dateCreator() : value[value.length - 1])
                 : (!value ? this.dateCreator() : value)
-            if (!isArray ||
-                (isArray && this.dateSelected && value.length > this.dateSelected.length)) {
+            if (
+                !isArray ||
+                (this.dateSelected && value.length > (this.dateSelected as Date[]).length)
+            ) {
                 this.focusedDateData = {
                     day: currentDate.getDate(),
                     month: currentDate.getMonth(),
@@ -794,15 +819,15 @@ export default {
         /*
          * Toggle datepicker
          */
-        togglePicker(active) {
+        togglePicker(active: boolean) {
             if (this.$refs.dropdown) {
                 const isActive = typeof active === 'boolean'
                     ? active
-                    : !this.$refs.dropdown.isActive
+                    : !(this.$refs.dropdown as BDropdownInstance).isActive
                 if (isActive) {
-                    this.$refs.dropdown.isActive = isActive
+                    (this.$refs.dropdown as BDropdownInstance).isActive = isActive
                 } else if (this.closeOnClick) {
-                    this.$refs.dropdown.isActive = isActive
+                    (this.$refs.dropdown as BDropdownInstance).isActive = isActive
                 }
             }
         },
@@ -810,7 +835,7 @@ export default {
         /*
          * Call default onFocus method and show datepicker
          */
-        handleOnFocus(event) {
+        handleOnFocus(event?: Event) {
             this.onFocus(event)
             if (this.openOnFocus) {
                 this.togglePicker(true)
@@ -822,36 +847,36 @@ export default {
          */
         toggle() {
             if (this.mobileNative && this.isMobile) {
-                const input = this.$refs.input.$refs.input
+                const input = (this.$refs.input as BInputInstance).$refs.input as HTMLElement
                 input.focus()
                 input.click()
                 return
             }
-            this.$refs.dropdown.toggle()
+            (this.$refs.dropdown as BDropdownInstance).toggle()
         },
 
         /*
          * Avoid dropdown toggle when is already visible
          */
-        onInputClick(event) {
-            if (this.$refs.dropdown.isActive) {
+        onInputClick(event: MouseEvent) {
+            if ((this.$refs.dropdown as BDropdownInstance).isActive) {
                 event.stopPropagation()
             }
         },
 
-        /**
+        /*
          * Keypress event that is bound to the document.
          */
-        keyPress({ key }) {
-            if (this.$refs.dropdown && this.$refs.dropdown.isActive && (key === 'Escape' || key === 'Esc')) {
+        keyPress({ key }: KeyboardEvent) {
+            if (this.$refs.dropdown && (this.$refs.dropdown as BDropdownInstance).isActive && (key === 'Escape' || key === 'Esc')) {
                 this.togglePicker(false)
             }
         },
 
-        /**
+        /*
          * Emit 'blur' event on dropdown is not active (closed)
          */
-        onActiveChange(value) {
+        onActiveChange(value: boolean) {
             if (!value) {
                 this.onBlur()
             }
@@ -861,7 +886,7 @@ export default {
             this.$emit('active-change', value)
         },
 
-        changeFocus(day) {
+        changeFocus(day: Date) {
             this.focusedDateData = {
                 day: day.getDate(),
                 month: day.getMonth(),
@@ -879,5 +904,5 @@ export default {
             document.removeEventListener('keyup', this.keyPress)
         }
     }
-}
+})
 </script>
diff --git a/packages/buefy-next/src/components/datepicker/DatepickerMonth.spec.js b/packages/buefy-next/src/components/datepicker/DatepickerMonth.spec.ts
similarity index 88%
rename from packages/buefy-next/src/components/datepicker/DatepickerMonth.spec.js
rename to packages/buefy-next/src/components/datepicker/DatepickerMonth.spec.ts
index 83416f9bd..319c153ce 100644
--- a/packages/buefy-next/src/components/datepicker/DatepickerMonth.spec.js
+++ b/packages/buefy-next/src/components/datepicker/DatepickerMonth.spec.ts
@@ -1,14 +1,22 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import BDatepickerMonth from '@components/datepicker/DatepickerMonth'
+import type { VueWrapper } from '@vue/test-utils'
+import BDatepickerMonth from '@components/datepicker/DatepickerMonth.vue'
 
 import config, { setOptions } from '@utils/config'
 
-let wrapper
+type BDatepickerMonthInstance = InstanceType<typeof BDatepickerMonth>
+
+let wrapper: VueWrapper<BDatepickerMonthInstance>
 
 // it used to create a date in UTC but should use the local timezone,
 // because DatepickerMonth entirely works in the local timezone
-const newDate = (y, m, d) => {
-    return new Date(y, m, d)
+const newDate = (y?: number, m?: number, d?: number) => {
+    if (y != null && m != null && d != null) {
+        return new Date(y, m, d)
+    } else {
+        return new Date()
+    }
 }
 
 const thisMonth = newDate(2020, 4, 15).getMonth()
@@ -56,22 +64,23 @@ const events = [
     }
 ]
 
+const focusedDate = newDate(2019, thisMonth, 11)
+
 describe('BDatepickerMonth', () => {
     beforeEach(() => {
         setOptions(Object.assign(config, {
             defaultMonthNames: [
                 'January', 'February', 'March', 'April', 'May', 'June', 'July',
                 'August', 'September', 'October', 'November', 'December'
-            ],
-            focusedDate: newDate(2019, thisMonth, 11)
+            ]
         }))
 
         wrapper = shallowMount(BDatepickerMonth, {
             props: {
                 monthNames: config.defaultMonthNames,
                 focused: {
-                    month: config.focusedDate.getMonth(),
-                    year: config.focusedDate.getFullYear()
+                    month: focusedDate.getMonth(),
+                    year: focusedDate.getFullYear()
                 },
                 dateCreator
             }
@@ -98,8 +107,8 @@ describe('BDatepickerMonth', () => {
     })
 
     it('emit chosen date', () => {
-        wrapper.vm.selectableDate = jest.fn(() => true)
-        wrapper.vm.emitChosenDate(5)
+        wrapper.vm.selectableDate = vi.fn(() => true)
+        wrapper.vm.emitChosenDate(new Date(5))
         expect(wrapper.vm.selectableDate).toHaveBeenCalled()
         expect(wrapper.emitted()['update:modelValue']).toBeTruthy()
     })
@@ -108,8 +117,8 @@ describe('BDatepickerMonth', () => {
         await wrapper.setProps({
             range: false
         })
-        wrapper.vm.selectableDate = jest.fn(() => true)
-        wrapper.vm.updateSelectedDate(5)
+        wrapper.vm.selectableDate = vi.fn(() => true)
+        wrapper.vm.updateSelectedDate(new Date(5))
         expect(wrapper.emitted()['update:modelValue']).toBeTruthy()
     })
 
@@ -135,8 +144,8 @@ describe('BDatepickerMonth', () => {
         expect(wrapper.vm.selectableDate(day)).toBeFalsy()
         await wrapper.setProps({
             selectableDates: [
-                newDate(config.focusedDate.getFullYear(), config.focusedDate.getMonth(), 1),
-                newDate(config.focusedDate.getFullYear(), config.focusedDate.getMonth(), 2),
+                newDate(focusedDate.getFullYear(), focusedDate.getMonth(), 1),
+                newDate(focusedDate.getFullYear(), focusedDate.getMonth(), 2),
                 day
             ]
         })
@@ -170,7 +179,7 @@ describe('BDatepickerMonth', () => {
 
         await wrapper.setProps({
             selectableDates: (d) => d.getMonth() === 7,
-            unselectableDates: (d) => true
+            unselectableDates: () => true
         })
         expect(wrapper.vm.selectableDate(day)).toBeTruthy()
 
@@ -299,35 +308,35 @@ describe('BDatepickerMonth', () => {
     })
 
     describe('focus', () => {
-        let wrapper
+        let wrapper: VueWrapper<BDatepickerMonthInstance>
         const nextMonth = thisMonth + 1
-        let cellToFocus
+        let cellToFocus: HTMLElement
 
         beforeEach(() => {
             wrapper = shallowMount(BDatepickerMonth, {
                 props: {
                     monthNames: config.defaultMonthNames,
                     focused: {
-                        month: config.focusedDate.getMonth(),
-                        year: config.focusedDate.getFullYear()
+                        month: focusedDate.getMonth(),
+                        year: focusedDate.getFullYear()
                     },
                     dateCreator
                 }
             })
             const refName = `month-${nextMonth}`
             if (Array.isArray(wrapper.vm.$refs[refName])) {
-                cellToFocus = wrapper.vm.$refs[refName][0]
+                cellToFocus = (wrapper.vm.$refs[refName] as HTMLElement[])[0]
             } else {
-                cellToFocus = wrapper.vm.$refs[refName]
+                cellToFocus = wrapper.vm.$refs[refName] as HTMLElement
             }
-            jest.spyOn(cellToFocus, 'focus')
+            vi.spyOn(cellToFocus, 'focus')
         })
 
         it('changing month should call focus on the corresponding cell', async () => {
             await wrapper.setProps({
                 focused: {
                     month: nextMonth,
-                    year: config.focusedDate.getFullYear()
+                    year: focusedDate.getFullYear()
                 }
             })
             await wrapper.vm.$nextTick()
diff --git a/packages/buefy-next/src/components/datepicker/DatepickerMonth.vue b/packages/buefy-next/src/components/datepicker/DatepickerMonth.vue
index a88609d08..975606a48 100644
--- a/packages/buefy-next/src/components/datepicker/DatepickerMonth.vue
+++ b/packages/buefy-next/src/components/datepicker/DatepickerMonth.vue
@@ -18,14 +18,14 @@
                         @click.prevent="updateSelectedDate(date)"
                         @mouseenter="setRangeHoverEndDate(date)"
                         @keydown.prevent="manageKeydown($event, date)"
-                        :tabindex="focused.month === date.getMonth() ? null : -1"
+                        :tabindex="focused!.month === date.getMonth() ? undefined : -1"
                     >
-                        {{ monthNames[date.getMonth()] }}
+                        {{ monthNames![date.getMonth()] }}
                         <div class="events" v-if="eventsDateMatch(date)">
                             <div
                                 class="event"
                                 :class="event.type"
-                                v-for="(event, evIdx) in eventsDateMatch(date)"
+                                v-for="(event, evIdx) in eventsDateMatch(date) as DatepickerEvent[]"
                                 :key="evIdx"
                             />
                         </div>
@@ -35,7 +35,7 @@
                         :class="classObject(date)"
                         class="datepicker-cell"
                     >
-                        {{ monthNames[date.getMonth()] }}
+                        {{ monthNames![date.getMonth()] }}
                     </div>
                 </template>
             </div>
@@ -43,36 +43,47 @@
     </section>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
 import { isDefined } from '../../utils/helpers'
+import type { DatepickerEvent, DateSelector, FocusedDate } from './types'
 
-export default {
+export default defineComponent({
     name: 'BDatepickerMonth',
     props: {
         modelValue: {
-            type: [Date, Array]
+            type: [Date, Array<Date>, null] as PropType<Date | Date[] | null>
         },
-        monthNames: Array,
-        events: Array,
+        monthNames: [Array<string>, null] as PropType<string[] | null>,
+        events: Array<Date | DatepickerEvent>,
         indicators: String,
-        minDate: Date,
-        maxDate: Date,
-        focused: Object,
+        minDate: [Date, null] as PropType<Date | null>,
+        maxDate: [Date, null] as PropType<Date | null>,
+        focused: Object as PropType<FocusedDate>,
         disabled: Boolean,
-        dateCreator: Function,
-        unselectableDates: [Array, Function],
-        unselectableDaysOfWeek: Array,
-        selectableDates: [Array, Function],
+        dateCreator: Function as PropType<() => Date>,
+        unselectableDates: [Array, Function, null] as PropType<Date[] | DateSelector | null>,
+        unselectableDaysOfWeek: [Array<number>, null] as PropType<number[] | null>,
+        selectableDates: [Array, Function, null] as PropType<Date[] | DateSelector | null>,
         range: Boolean,
         multiple: Boolean
     },
-    emits: ['change-focus', 'range-end', 'range-start', 'update:modelValue'],
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        'change-focus': (_date: Date) => true,
+        'range-end': (_date: Date) => true,
+        'range-start': (_date: Date) => true,
+        'update:modelValue': (_date: Date | Date[] | undefined) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
     data() {
         return {
-            selectedBeginDate: undefined,
-            selectedEndDate: undefined,
-            hoveredEndDate: undefined,
-            multipleSelectedDates: this.multiple && this.modelValue ? this.modelValue : []
+            selectedBeginDate: undefined as Date | undefined,
+            selectedEndDate: undefined as Date | undefined,
+            hoveredEndDate: undefined as Date | undefined,
+            multipleSelectedDates: this.multiple && this.modelValue ? this.modelValue as Date[] : []
         }
     },
     computed: {
@@ -83,7 +94,7 @@ export default {
         /*
         * Return array of all events in the specified month
         */
-        eventsInThisYear() {
+        eventsInThisYear(): DatepickerEvent[] {
             if (!this.events) return []
 
             const yearEvents = []
@@ -92,22 +103,22 @@ export default {
                 let event = this.events[i]
 
                 if (!Object.prototype.hasOwnProperty.call(event, 'date')) {
-                    event = { date: event }
+                    event = { date: event as Date, type: 'is-primary' }
                 }
                 if (!Object.prototype.hasOwnProperty.call(event, 'type')) {
-                    event.type = 'is-primary'
+                    (event as DatepickerEvent).type = 'is-primary'
                 }
                 if (
-                    event.date.getFullYear() === this.focused.year
+                    (event as DatepickerEvent).date.getFullYear() === this.focused!.year
                 ) {
-                    yearEvents.push(event)
+                    yearEvents.push(event as DatepickerEvent)
                 }
             }
 
             return yearEvents
         },
         monthDates() {
-            const year = this.focused.year
+            const year = this.focused!.year
             const months = []
             for (let i = 0; i < 12; i++) {
                 const d = new Date(year, i, 1)
@@ -118,17 +129,17 @@ export default {
         },
 
         focusedMonth() {
-            return this.focused.month
+            return this.focused!.month
         },
 
         hoveredDateRange() {
             if (!this.range) {
                 return []
             }
-            if (!isNaN(this.selectedEndDate)) {
+            if (!isNaN(this.selectedEndDate?.valueOf() ?? NaN)) {
                 return []
             }
-            if (this.hoveredEndDate < this.selectedBeginDate) {
+            if (this.hoveredEndDate! < this.selectedBeginDate!) {
                 return [this.hoveredEndDate, this.selectedBeginDate].filter(isDefined)
             }
             return [this.selectedBeginDate, this.hoveredEndDate].filter(isDefined)
@@ -148,9 +159,9 @@ export default {
                 // but ≥ v3.2.25, refs in v-for are stored in an array (same as Vue 2)
                 let cell
                 if (Array.isArray(this.$refs[refName])) {
-                    cell = this.$refs[refName][0]
+                    cell = (this.$refs[refName] as HTMLElement[])[0]
                 } else {
-                    cell = this.$refs[refName]
+                    cell = this.$refs[refName] as HTMLElement
                 }
                 if (cell) {
                     cell.focus()
@@ -159,7 +170,7 @@ export default {
         }
     },
     methods: {
-        selectMultipleDates(date) {
+        selectMultipleDates(date: Date) {
             const multipleSelect = this.multipleSelectedDates.filter((selectedDate) =>
                 selectedDate.getDate() === date.getDate() &&
                 selectedDate.getFullYear() === date.getFullYear() &&
@@ -177,7 +188,7 @@ export default {
             this.$emit('update:modelValue', this.multipleSelectedDates)
         },
 
-        selectableDate(day) {
+        selectableDate(day: Date) {
             const validity = []
 
             if (this.minDate) {
@@ -188,7 +199,7 @@ export default {
                 validity.push(day <= this.maxDate)
             }
 
-            validity.push(day.getFullYear() === this.focused.year)
+            validity.push(day.getFullYear() === this.focused!.year)
 
             if (this.selectableDates) {
                 if (typeof this.selectableDates === 'function') {
@@ -233,14 +244,15 @@ export default {
 
             return validity.indexOf(false) < 0
         },
-        eventsDateMatch(day) {
+        // TODO: return undefined instead of false if no events
+        eventsDateMatch(day: Date) {
             if (!this.eventsInThisYear.length) return false
 
             const monthEvents = []
 
             for (let i = 0; i < this.eventsInThisYear.length; i++) {
                 if (this.eventsInThisYear[i].date.getMonth() === day.getMonth()) {
-                    monthEvents.push(this.events[i])
+                    monthEvents.push(this.events![i])
                 }
             }
 
@@ -253,8 +265,12 @@ export default {
         /*
         * Build classObject for cell using validations
         */
-        classObject(day) {
-            function dateMatch(dateOne, dateTwo, multiple) {
+        classObject(day: Date) {
+            function dateMatch(
+                dateOne: Date,
+                dateTwo: Date | Date[] | null | undefined,
+                multiple?: boolean
+            ) {
                 // if either date is null or undefined, return false
                 if (!dateOne || !dateTwo || multiple) {
                     return false
@@ -268,12 +284,16 @@ export default {
                 return (dateOne.getFullYear() === dateTwo.getFullYear() &&
                     dateOne.getMonth() === dateTwo.getMonth())
             }
-            function dateWithin(dateOne, dates, multiple) {
+            function dateWithin(
+                dateOne: Date,
+                dates: Date | Date[] | null | undefined,
+                multiple?: boolean
+            ) {
                 if (!Array.isArray(dates) || multiple) { return false }
 
                 return dateOne > dates[0] && dateOne < dates[1]
             }
-            function dateMultipleSelected(dateOne, dates, multiple) {
+            function dateMultipleSelected(dateOne: Date, dates: Date[], multiple: boolean) {
                 if (!Array.isArray(dates) || !multiple) { return false }
                 return dates.some((date) => (
                     dateOne.getDate() === date.getDate() &&
@@ -289,7 +309,7 @@ export default {
                 'is-first-selected':
                     dateMatch(
                         day,
-                        Array.isArray(this.modelValue) && this.modelValue[0],
+                        Array.isArray(this.modelValue) ? this.modelValue[0] : undefined,
                         this.multiple
                     ),
                 'is-within-selected':
@@ -297,7 +317,7 @@ export default {
                 'is-last-selected':
                     dateMatch(
                         day,
-                        Array.isArray(this.modelValue) && this.modelValue[1],
+                        Array.isArray(this.modelValue) ? this.modelValue[1] : undefined,
                         this.multiple
                     ),
                 'is-within-hovered-range':
@@ -306,21 +326,21 @@ export default {
                         dateWithin(day, this.hoveredDateRange)),
                 'is-first-hovered': dateMatch(
                     day,
-                    Array.isArray(this.hoveredDateRange) && this.hoveredDateRange[0]
+                    Array.isArray(this.hoveredDateRange) ? this.hoveredDateRange[0] : undefined
                 ),
                 'is-within-hovered':
                     dateWithin(day, this.hoveredDateRange),
                 'is-last-hovered': dateMatch(
                     day,
-                    Array.isArray(this.hoveredDateRange) && this.hoveredDateRange[1]
+                    Array.isArray(this.hoveredDateRange) ? this.hoveredDateRange[1] : undefined
                 ),
-                'is-today': dateMatch(day, this.dateCreator()),
+                'is-today': dateMatch(day, this.dateCreator!()),
                 'is-selectable': this.selectableDate(day) && !this.disabled,
                 'is-unselectable': !this.selectableDate(day) || this.disabled
             }
         },
 
-        manageKeydown({ key }, date) {
+        manageKeydown({ key }: KeyboardEvent, date: Date) {
             // https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values#Navigation_keys
             switch (key) {
                 case ' ':
@@ -357,7 +377,7 @@ export default {
         /*
         * Emit input event with selected date as payload for v-model in parent
         */
-        updateSelectedDate(date) {
+        updateSelectedDate(date: Date) {
             if (!this.range && !this.multiple) {
                 this.emitChosenDate(date)
             } else if (this.range) {
@@ -370,7 +390,7 @@ export default {
         /*
          * Emit select event with chosen date as payload
          */
-        emitChosenDate(day) {
+        emitChosenDate(day: Date) {
             if (this.disabled) return
 
             if (!this.multiple) {
@@ -387,7 +407,7 @@ export default {
         * If only begin date is selected, emit an array of the begin date and the new date.
         * If not set, only set the begin date.
         */
-        handleSelectRangeDate(date) {
+        handleSelectRangeDate(date: Date) {
             if (this.disabled) return
             if (this.selectedBeginDate && this.selectedEndDate) {
                 this.selectedBeginDate = date
@@ -408,17 +428,17 @@ export default {
             }
         },
 
-        setRangeHoverEndDate(day) {
+        setRangeHoverEndDate(day: Date) {
             if (this.range) {
                 this.hoveredEndDate = day
             }
         },
 
-        changeFocus(month, inc) {
+        changeFocus(month: Date, inc: number) {
             const nextMonth = month
             nextMonth.setMonth(month.getMonth() + inc)
             this.$emit('change-focus', nextMonth)
         }
     }
-}
+})
 </script>
diff --git a/packages/buefy-next/src/components/datepicker/DatepickerTable.spec.js b/packages/buefy-next/src/components/datepicker/DatepickerTable.spec.ts
similarity index 91%
rename from packages/buefy-next/src/components/datepicker/DatepickerTable.spec.js
rename to packages/buefy-next/src/components/datepicker/DatepickerTable.spec.ts
index d2d4d2c99..e82af6116 100644
--- a/packages/buefy-next/src/components/datepicker/DatepickerTable.spec.js
+++ b/packages/buefy-next/src/components/datepicker/DatepickerTable.spec.ts
@@ -1,10 +1,24 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import BDatepickerTable from '@components/datepicker/DatepickerTable'
+import BDatepickerTable from '@components/datepicker/DatepickerTable.vue'
 import config, { setOptions } from '@utils/config'
 
-let defaultProps
+const focusedDate = new Date(2018, 7, 10)
 
-const newDate = (y, m, d) => {
+const defaultProps = () => ({
+    modelValue: newDate(2018, 6, 21),
+    dayNames: config.defaultDayNames,
+    monthNames: config.defaultMonthNames,
+    focused: {
+        month: focusedDate.getMonth(),
+        year: focusedDate.getFullYear()
+    },
+    firstDayOfWeek: config.defaultFirstDayOfWeek,
+    unselectableDaysOfWeek: config.defaultUnselectableDaysOfWeek,
+    events: []
+})
+
+const newDate = (y: number, m: number, d: number) => {
     // it used to create a date in UTC. but it is unnecessary,
     // because DatepickerTable entirely works in the local time zone.
     return new Date(y, m, d)
@@ -19,22 +33,8 @@ describe('BDatepickerTable', () => {
                 'August', 'September', 'October', 'November', 'December'
             ],
             defaultDayNames: ['Su', 'M', 'Tu', 'W', 'Th', 'F', 'S'],
-            focusedDate: newDate(2018, 7, 10),
             defaultUnselectableDaysOfWeek: []
         }))
-
-        defaultProps = () => ({
-            modelValue: newDate(2018, 6, 21),
-            dayNames: config.defaultDayNames,
-            monthNames: config.defaultMonthNames,
-            focused: {
-                month: config.focusedDate.getMonth(),
-                year: config.focusedDate.getFullYear()
-            },
-            firstDayOfWeek: config.defaultFirstDayOfWeek,
-            unselectableDaysOfWeek: config.defaultUnselectableDaysOfWeek,
-            events: []
-        })
     })
 
     it('is called', () => {
@@ -49,14 +49,14 @@ describe('BDatepickerTable', () => {
 
     it('render correctly', () => {
         // replaces weeksInThisMonth to suppress locale dependent outputs
-        jest.spyOn(BDatepickerTable.computed, 'weeksInThisMonth').mockReturnValue([])
+        vi.spyOn(BDatepickerTable.computed!, 'weeksInThisMonth').mockReturnValue([])
         const wrapper = shallowMount(BDatepickerTable, {
             props: {
                 ...defaultProps()
             }
         })
         expect(wrapper.html()).toMatchSnapshot()
-        BDatepickerTable.computed.weeksInThisMonth.mockRestore()
+        vi.mocked(BDatepickerTable.computed!.weeksInThisMonth).mockRestore()
     })
 
     it('assign events to weeks even if the event has a time', () => {
@@ -77,7 +77,7 @@ describe('BDatepickerTable', () => {
 
     it('manage events as expected', () => {
         const monthEvent = {
-            date: newDate(config.focusedDate.getFullYear(), config.focusedDate.getMonth(), 13),
+            date: newDate(focusedDate.getFullYear(), focusedDate.getMonth(), 13),
             type: 'is-primary'
         }
         const events = [
diff --git a/packages/buefy-next/src/components/datepicker/DatepickerTable.vue b/packages/buefy-next/src/components/datepicker/DatepickerTable.vue
index f0745ed16..2c579f15c 100644
--- a/packages/buefy-next/src/components/datepicker/DatepickerTable.vue
+++ b/packages/buefy-next/src/components/datepicker/DatepickerTable.vue
@@ -13,10 +13,10 @@
             <b-datepicker-table-row
                 v-for="(week, index) in weeksInThisMonth"
                 :key="index"
-                :selected-date="modelValue"
-                :day="focused.day"
+                :selected-date="modelValue ?? undefined"
+                :day="focused!.day"
                 :week="week"
-                :month="focused.month"
+                :month="focused!.month"
                 :min-date="minDate"
                 :max-date="maxDate"
                 :disabled="disabledOrUndefined"
@@ -43,32 +43,36 @@
     </section>
 </template>
 
-<script>
-import DatepickerTableRow from './DatepickerTableRow.vue'
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import BDatepickerTableRow from './DatepickerTableRow.vue'
+import type { DatepickerEvent, DateSelector, FocusedDate } from './types'
 import { isDefined } from '../../utils/helpers'
 
-export default {
+export default defineComponent({
     name: 'BDatepickerTable',
     components: {
-        [DatepickerTableRow.name]: DatepickerTableRow
+        BDatepickerTableRow
     },
     props: {
         modelValue: {
-            type: [Date, Array]
+            type: [Date, Array<Date>, null] as PropType<Date | Date[] | null>
         },
-        dayNames: Array,
-        monthNames: Array,
-        firstDayOfWeek: Number,
-        events: Array,
+        dayNames: [Array<string>, null] as PropType<string[] | null>,
+        monthNames: [Array<string>, null] as PropType<string[] | null>,
+        firstDayOfWeek: [Number, null] as PropType<number | null>,
+        events: Array<Date | DatepickerEvent>,
         indicators: String,
-        minDate: Date,
-        maxDate: Date,
-        focused: Object,
+        minDate: [Date, null] as PropType<Date | null>,
+        maxDate: [Date, null] as PropType<Date | null>,
+        focused: Object as PropType<FocusedDate>,
         disabled: Boolean,
-        dateCreator: Function,
-        unselectableDates: [Array, Function],
-        unselectableDaysOfWeek: Array,
-        selectableDates: [Array, Function],
+        dateCreator: Function as PropType<() => Date>,
+        unselectableDates: [Array, Function, null] as PropType<Date[] | DateSelector | null>,
+        unselectableDaysOfWeek: [Array<number>, null] as PropType<number[] | null>,
+        selectableDates: [Array, Function, null] as PropType<Date[] | DateSelector | null>,
         nearbyMonthDays: Boolean,
         nearbySelectableMonthDays: Boolean,
         showWeekNumber: Boolean,
@@ -77,12 +81,19 @@ export default {
         range: Boolean,
         multiple: Boolean
     },
-    emits: ['range-end', 'range-start', 'update:focused', 'update:modelValue'],
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        'range-end': (_date: Date) => true,
+        'range-start': (_date: Date) => true,
+        'update:focused': (_focused: FocusedDate) => true,
+        'update:modelValue': (_value: Date | Date[] | undefined) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
     data() {
         return {
-            selectedBeginDate: undefined,
-            selectedEndDate: undefined,
-            hoveredEndDate: undefined
+            selectedBeginDate: undefined as Date | undefined,
+            selectedEndDate: undefined as Date | undefined,
+            hoveredEndDate: undefined as Date | undefined
         }
     },
     computed: {
@@ -90,15 +101,15 @@ export default {
             get() {
                 return this.multiple && this.modelValue ? this.modelValue : []
             },
-            set(value) {
+            set(value: Date | Date[] | undefined) {
                 this.$emit('update:modelValue', value)
             }
         },
         visibleDayNames() {
             const visibleDayNames = []
-            let index = this.firstDayOfWeek
-            while (visibleDayNames.length < this.dayNames.length) {
-                const currentDayName = this.dayNames[(index % this.dayNames.length)]
+            let index = this.firstDayOfWeek!
+            while (visibleDayNames.length < this.dayNames!.length) {
+                const currentDayName = this.dayNames![(index % this.dayNames!.length)]
                 visibleDayNames.push(currentDayName)
                 index++
             }
@@ -113,7 +124,7 @@ export default {
         /*
         * Return array of all events in the specified month
         */
-        eventsInThisMonth() {
+        eventsInThisMonth(): DatepickerEvent[] {
             if (!this.events) return []
 
             const monthEvents = []
@@ -122,16 +133,16 @@ export default {
                 let event = this.events[i]
 
                 if (!Object.prototype.hasOwnProperty.call(event, 'date')) {
-                    event = { date: event }
+                    event = { date: event as Date, type: 'is-primary' }
                 }
                 if (!Object.prototype.hasOwnProperty.call(event, 'type')) {
-                    event.type = 'is-primary'
+                    (event as DatepickerEvent).type = 'is-primary'
                 }
                 if (
-                    event.date.getMonth() === this.focused.month &&
-                    event.date.getFullYear() === this.focused.year
+                    (event as DatepickerEvent).date.getMonth() === this.focused!.month &&
+                    (event as DatepickerEvent).date.getFullYear() === this.focused!.year
                 ) {
-                    monthEvents.push(event)
+                    monthEvents.push(event as DatepickerEvent)
                 }
             }
 
@@ -142,8 +153,8 @@ export default {
         */
         weeksInThisMonth() {
             this.validateFocusedDay()
-            const month = this.focused.month
-            const year = this.focused.year
+            const month = this.focused!.month
+            const year = this.focused!.year
             const weeksInThisMonth = []
 
             let startingDay = 1
@@ -156,14 +167,14 @@ export default {
 
             return weeksInThisMonth
         },
-        hoveredDateRange() {
+        hoveredDateRange(): Date[] {
             if (!this.range) {
                 return []
             }
-            if (!isNaN(this.selectedEndDate)) {
+            if (!isNaN(this.selectedEndDate?.valueOf() ?? NaN)) {
                 return []
             }
-            if (this.hoveredEndDate < this.selectedBeginDate) {
+            if (this.hoveredEndDate! < this.selectedBeginDate!) {
                 return [this.hoveredEndDate, this.selectedBeginDate].filter(isDefined)
             }
             return [this.selectedBeginDate, this.hoveredEndDate].filter(isDefined)
@@ -179,7 +190,7 @@ export default {
         /*
         * Emit input event with selected date as payload for v-model in parent
         */
-        updateSelectedDate(date) {
+        updateSelectedDate(date: Date) {
             if (!this.range && !this.multiple) {
                 this.$emit('update:modelValue', date)
             } else if (this.range) {
@@ -194,7 +205,7 @@ export default {
         * If only begin date is selected, emit an array of the begin date and the new date.
         * If not set, only set the begin date.
         */
-        handleSelectRangeDate(date) {
+        handleSelectRangeDate(date: Date) {
             if (this.selectedBeginDate && this.selectedEndDate) {
                 this.selectedBeginDate = date
                 this.selectedEndDate = undefined
@@ -218,36 +229,37 @@ export default {
         * If selected date already exists list of selected dates, remove it from the list
         * Otherwise, add date to list of selected dates
         */
-        handleSelectMultipleDates(date) {
-            const multipleSelect = this.multipleSelectedDates.filter((selectedDate) =>
+        handleSelectMultipleDates(date: Date) {
+            const multipleSelect = (this.multipleSelectedDates as Date[]).filter((selectedDate) =>
                 selectedDate.getDate() === date.getDate() &&
                 selectedDate.getFullYear() === date.getFullYear() &&
                 selectedDate.getMonth() === date.getMonth()
             )
             if (multipleSelect.length) {
-                this.multipleSelectedDates = this.multipleSelectedDates.filter((selectedDate) =>
-                    selectedDate.getDate() !== date.getDate() ||
-                    selectedDate.getFullYear() !== date.getFullYear() ||
-                    selectedDate.getMonth() !== date.getMonth()
-                )
+                this.multipleSelectedDates = (this.multipleSelectedDates as Date[])
+                    .filter((selectedDate) =>
+                        selectedDate.getDate() !== date.getDate() ||
+                        selectedDate.getFullYear() !== date.getFullYear() ||
+                        selectedDate.getMonth() !== date.getMonth()
+                    )
             } else {
-                this.multipleSelectedDates = [...this.multipleSelectedDates, date]
+                this.multipleSelectedDates = [...(this.multipleSelectedDates as Date[]), date]
             }
         },
 
         /*
          * Return array of all days in the week that the startingDate is within
          */
-        weekBuilder(startingDate, month, year) {
+        weekBuilder(startingDate: number, month: number, year: number) {
             const thisMonth = new Date(year, month)
 
             const thisWeek = []
 
             const dayOfWeek = new Date(year, month, startingDate).getDay()
 
-            const end = dayOfWeek >= this.firstDayOfWeek
-                ? (dayOfWeek - this.firstDayOfWeek)
-                : ((7 - this.firstDayOfWeek) + dayOfWeek)
+            const end = dayOfWeek >= this.firstDayOfWeek!
+                ? (dayOfWeek - this.firstDayOfWeek!)
+                : ((7 - this.firstDayOfWeek!) + dayOfWeek)
 
             let daysAgo = 1
             for (let i = 0; i < end; i++) {
@@ -271,15 +283,15 @@ export default {
         },
 
         validateFocusedDay() {
-            const focusedDate = new Date(this.focused.year, this.focused.month, this.focused.day)
+            const focusedDate = new Date(this.focused!.year, this.focused!.month, this.focused!.day)
             if (this.selectableDate(focusedDate)) return
 
             let day = 0
             // Number of days in the current month
-            const monthDays = new Date(this.focused.year, this.focused.month + 1, 0).getDate()
+            const monthDays = new Date(this.focused!.year, this.focused!.month + 1, 0).getDate()
             let firstFocusable = null
             while (!firstFocusable && ++day < monthDays) {
-                const date = new Date(this.focused.year, this.focused.month, day)
+                const date = new Date(this.focused!.year, this.focused!.month, day)
                 if (this.selectableDate(date)) {
                     firstFocusable = focusedDate
 
@@ -297,7 +309,7 @@ export default {
          * Check that selected day is within earliest/latest params and
          * is within this month
          */
-        selectableDate(day) {
+        selectableDate(day: Date) {
             const validity = []
 
             if (this.minDate) {
@@ -309,7 +321,7 @@ export default {
             }
 
             if (this.nearbyMonthDays && !this.nearbySelectableMonthDays) {
-                validity.push(day.getMonth() === this.focused.month)
+                validity.push(day.getMonth() === this.focused!.month)
             }
 
             if (this.selectableDates) {
@@ -358,9 +370,10 @@ export default {
             return validity.indexOf(false) < 0
         },
 
-        eventsInThisWeek(week) {
+        eventsInThisWeek(week: Date[]) {
             return this.eventsInThisMonth.filter((event) => {
-                const stripped = new Date(Date.parse(event.date))
+                // TODO: we may do `new Date(event.date)` instead
+                const stripped = new Date(Date.parse(event.date + ''))
                 stripped.setHours(0, 0, 0, 0)
                 const timed = stripped.getTime()
 
@@ -368,11 +381,11 @@ export default {
             })
         },
 
-        setRangeHoverEndDate(day) {
+        setRangeHoverEndDate(day: Date) {
             this.hoveredEndDate = day
         },
 
-        changeFocus(day) {
+        changeFocus(day: Date) {
             const focused = {
                 day: day.getDate(),
                 month: day.getMonth(),
@@ -381,5 +394,5 @@ export default {
             this.$emit('update:focused', focused)
         }
     }
-}
+})
 </script>
diff --git a/packages/buefy-next/src/components/datepicker/DatepickerTableRow.spec.js b/packages/buefy-next/src/components/datepicker/DatepickerTableRow.spec.ts
similarity index 89%
rename from packages/buefy-next/src/components/datepicker/DatepickerTableRow.spec.js
rename to packages/buefy-next/src/components/datepicker/DatepickerTableRow.spec.ts
index c1ccd950a..5a813f000 100644
--- a/packages/buefy-next/src/components/datepicker/DatepickerTableRow.spec.js
+++ b/packages/buefy-next/src/components/datepicker/DatepickerTableRow.spec.ts
@@ -1,10 +1,16 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import BDatepickerTableRow from '@components/datepicker/DatepickerTableRow'
+import type { VueWrapper } from '@vue/test-utils'
+import BDatepickerTableRow from '@components/datepicker/DatepickerTableRow.vue'
 
-const newDate = (y, m, d) => {
+const newDate = (y?: number, m?: number, d?: number) => {
     // it used to create a date in UTC. but it is unnecessary,
     // because DatepickerTableRow entirely works in the local time zone
-    return new Date(y, m, d)
+    if (y != null && m != null && d != null) {
+        return new Date(y, m, d)
+    } else {
+        return new Date()
+    }
 }
 const props = {
     firstDayOfWeek: 0,
@@ -21,7 +27,7 @@ const props = {
     dateCreator: () => newDate()
 }
 
-let wrapper
+let wrapper: VueWrapper<InstanceType<typeof BDatepickerTableRow>>
 
 describe('BDatepickerTableRow', () => {
     beforeEach(() => {
@@ -139,13 +145,13 @@ describe('BDatepickerTableRow', () => {
     })
 
     it('emit chosen date', () => {
-        wrapper.vm.selectableDate = jest.fn(() => false)
-        wrapper.vm.emitChosenDate(5)
+        wrapper.vm.selectableDate = vi.fn(() => false)
+        wrapper.vm.emitChosenDate(new Date(5))
         expect(wrapper.vm.selectableDate).toHaveBeenCalled()
         expect(wrapper.emitted().select).toBeFalsy()
 
-        wrapper.vm.selectableDate = jest.fn(() => true)
-        wrapper.vm.emitChosenDate(5)
+        wrapper.vm.selectableDate = vi.fn(() => true)
+        wrapper.vm.emitChosenDate(new Date(5))
         expect(wrapper.vm.selectableDate).toHaveBeenCalled()
         expect(wrapper.emitted().select).toBeTruthy()
     })
@@ -162,10 +168,11 @@ describe('BDatepickerTableRow', () => {
             global: {
                 provide: {
                     $datepicker: {
-                        $emit(event) {
+                        // TODO: it should be sufficient to test if `$emit` is called
+                        $emit(event: string, week: number, year: number) {
                             // Vue warns because BDatepickerTableRow is not
                             // supposed to emit "week-number-click"
-                            wrapper.vm.$emit(event, arguments[1], arguments[2])
+                            wrapper.vm.$emit(event, week, year)
                         }
                     }
                 }
@@ -176,7 +183,7 @@ describe('BDatepickerTableRow', () => {
         await $weekButton.trigger('click')
 
         expect(wrapper.emitted()['week-number-click']).toBeTruthy()
-        expect(wrapper.emitted()['week-number-click'][0].sort()).toEqual([weekDate.getDate(), weekDate.getFullYear()].sort())
+        expect((wrapper.emitted()['week-number-click'][0] as number[]).sort()).toEqual([weekDate.getDate(), weekDate.getFullYear()].sort())
     })
 
     it('emit focused date', async () => {
@@ -186,7 +193,7 @@ describe('BDatepickerTableRow', () => {
         const inc = 1
         wrapper.vm.changeFocus(day, inc)
         await wrapper.vm.$nextTick()
-        const valueEmitted = wrapper.emitted()['change-focus'][0]
+        const valueEmitted = wrapper.emitted<[Date]>('change-focus')![0]
         expect(valueEmitted[0].getDate()).toEqual(d + inc)
     })
 
@@ -264,8 +271,8 @@ describe('BDatepickerTableRow', () => {
     })
 
     describe('focus', () => {
-        let wrapper
-        let cellToFocus
+        let wrapper: VueWrapper<InstanceType<typeof BDatepickerTableRow>>
+        let cellToFocus: HTMLElement
 
         beforeEach(() => {
             wrapper = shallowMount(BDatepickerTableRow, {
@@ -279,9 +286,9 @@ describe('BDatepickerTableRow', () => {
             if (Array.isArray(wrapper.vm.$refs[refName])) {
                 cellToFocus = wrapper.vm.$refs[refName][0]
             } else {
-                cellToFocus = wrapper.vm.$refs[refName]
+                cellToFocus = wrapper.vm.$refs[refName] as HTMLElement
             }
-            jest.spyOn(cellToFocus, 'focus')
+            vi.spyOn(cellToFocus, 'focus')
         })
 
         it('changing day should call focus on the corresponding cell', async () => {
diff --git a/packages/buefy-next/src/components/datepicker/DatepickerTableRow.vue b/packages/buefy-next/src/components/datepicker/DatepickerTableRow.vue
index a10b5145f..1b2429e6a 100644
--- a/packages/buefy-next/src/components/datepicker/DatepickerTableRow.vue
+++ b/packages/buefy-next/src/components/datepicker/DatepickerTableRow.vue
@@ -1,4 +1,5 @@
 <template>
+    <!-- eslint-disable max-len -->
     <div class="datepicker-row">
         <a
             class="datepicker-cell is-week-number"
@@ -20,14 +21,14 @@
                 @click.prevent="emitChosenDate(weekDay)"
                 @mouseenter="setRangeHoverEndDate(weekDay)"
                 @keydown="manageKeydown($event, weekDay)"
-                :tabindex="day === weekDay.getDate() && month === weekDay.getMonth() ? null : -1"
+                :tabindex="day === weekDay.getDate() && month === weekDay.getMonth() ? undefined : -1"
             >
                 <span>{{ weekDay.getDate() }}</span>
                 <div class="events" v-if="eventsDateMatch(weekDay)">
                     <div
                         class="event"
                         :class="event.type"
-                        v-for="(event, evIdx) in eventsDateMatch(weekDay)"
+                        v-for="(event, evIdx) in eventsDateMatch(weekDay) as DatepickerEvent[]"
                         :key="evIdx"
                     />
                 </div>
@@ -42,46 +43,57 @@
                     <div
                         class="event"
                         :class="event.type"
-                        v-for="(event, evIdx) in eventsDateMatch(weekDay)"
+                        v-for="(event, evIdx) in eventsDateMatch(weekDay) as DatepickerEvent[]"
                         :key="evIdx"
                     />
                 </div>
             </div>
         </template>
     </div>
+    <!-- eslint-enable max-len -->
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import type { DatepickerEvent, DateSelector, IDatepicker } from './types'
+
+interface WeekNumber {
+    week: number
+    year: number
+}
+
+export default defineComponent({
     name: 'BDatepickerTableRow',
     inject: {
         $datepicker: { name: '$datepicker', default: false }
     },
     props: {
         selectedDate: {
-            type: [Date, Array]
+            type: [Date, Array<Date>]
         },
-        hoveredDateRange: Array,
+        hoveredDateRange: Array<Date>,
         day: {
             type: Number
         },
         week: {
-            type: Array,
+            type: Array<Date>,
             required: true
         },
         month: {
             type: Number,
             required: true
         },
-        minDate: Date,
-        maxDate: Date,
+        minDate: [Date, null] as PropType<Date | null>,
+        maxDate: [Date, null] as PropType<Date | null>,
         disabled: Boolean,
-        unselectableDates: [Array, Function],
-        unselectableDaysOfWeek: Array,
-        selectableDates: [Array, Function],
-        events: Array,
+        unselectableDates: [Array, Function, null] as PropType<Date[] | DateSelector | null>,
+        unselectableDaysOfWeek: [Array<number>, null] as PropType<number[] | null>,
+        selectableDates: [Array, Function, null] as PropType<Date[] | DateSelector | null>,
+        events: Array<DatepickerEvent>,
         indicators: String,
-        dateCreator: Function,
+        dateCreator: Function as PropType<() => Date>,
         nearbyMonthDays: Boolean,
         nearbySelectableMonthDays: Boolean,
         showWeekNumber: Boolean,
@@ -89,9 +101,15 @@ export default {
         range: Boolean,
         multiple: Boolean,
         rulesForFirstWeek: Number,
-        firstDayOfWeek: Number
+        firstDayOfWeek: [Number, null] as PropType<number | null>
+    },
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        'change-focus': (_day: Date) => true,
+        rangeHoverEndDate: (_day: Date) => true,
+        select: (_day: Date) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
     },
-    emits: ['change-focus', 'rangeHoverEndDate', 'select'],
     watch: {
         day(day) {
             const refName = `day-${this.month}-${day}`
@@ -100,9 +118,9 @@ export default {
                 // but ≥ v3.2.25, refs in v-for are stored in an array (same as Vue 2)
                 let cell
                 if (Array.isArray(this.$refs[refName])) {
-                    cell = this.$refs[refName][0]
+                    cell = (this.$refs[refName] as HTMLElement[])[0]
                 } else {
-                    cell = this.$refs[refName]
+                    cell = this.$refs[refName] as HTMLElement
                 }
                 if (cell) {
                     cell.focus()
@@ -111,7 +129,7 @@ export default {
         }
     },
     methods: {
-        firstWeekOffset(year, dow, doy) {
+        firstWeekOffset(year: number, dow: number, doy: number) {
             // first-week day -- which january is always in the first week (4 for iso, 1 for other)
             const fwd = 7 + dow - doy
             // first-week day local weekday -- which local weekday is fwd
@@ -119,24 +137,24 @@ export default {
             const fwdlw = (7 + firstJanuary.getDay() - dow) % 7
             return -fwdlw + fwd - 1
         },
-        daysInYear(year) {
+        daysInYear(year: number) {
             return this.isLeapYear(year) ? 366 : 365
         },
-        isLeapYear(year) {
+        isLeapYear(year: number) {
             return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
         },
-        getSetDayOfYear(input) {
-            return Math.round((input - new Date(input.getFullYear(), 0, 1)) / 864e5) + 1
+        getSetDayOfYear(input: Date) {
+            return Math.round((+input - +new Date(input.getFullYear(), 0, 1)) / 864e5) + 1
         },
-        weeksInYear(year, dow, doy) {
+        weeksInYear(year: number, dow: number, doy: number) {
             const weekOffset = this.firstWeekOffset(year, dow, doy)
             const weekOffsetNext = this.firstWeekOffset(year + 1, dow, doy)
             return (this.daysInYear(year) - weekOffset + weekOffsetNext) / 7
         },
-        getWeekNumber(mom) {
-            const dow = this.firstDayOfWeek // first day of week
+        getWeekNumber(mom: Date): WeekNumber {
+            const dow = this.firstDayOfWeek! // first day of week
             // Rules for the first week : 1 for the 1st January, 4 for the 4th January
-            const doy = this.rulesForFirstWeek
+            const doy = this.rulesForFirstWeek!
             const weekOffset = this.firstWeekOffset(mom.getFullYear(), dow, doy)
             const week = Math.floor((this.getSetDayOfYear(mom) - weekOffset - 1) / 7) + 1
             let resWeek
@@ -153,16 +171,16 @@ export default {
             }
             return { week: resWeek, year: resYear }
         },
-        clickWeekNumber(weekData) {
+        clickWeekNumber(weekData: WeekNumber) {
             if (this.weekNumberClickable) {
-                this.$datepicker.$emit('week-number-click', weekData.week, weekData.year)
+                (this.$datepicker as IDatepicker).$emit('week-number-click', weekData.week, weekData.year)
             }
         },
         /*
          * Check that selected day is within earliest/latest params and
          * is within this month
          */
-        selectableDate(day) {
+        selectableDate(day: Date) {
             const validity = []
 
             if (this.minDate) {
@@ -226,7 +244,7 @@ export default {
         /*
         * Emit select event with chosen date as payload
         */
-        emitChosenDate(day) {
+        emitChosenDate(day: Date) {
             if (this.disabled) return
 
             if (this.selectableDate(day)) {
@@ -234,10 +252,11 @@ export default {
             }
         },
 
-        eventsDateMatch(day) {
+        // TODO: return undefined instead of boolean if no events
+        eventsDateMatch(day: Date) {
             if (!this.events || !this.events.length) return false
 
-            const dayEvents = []
+            const dayEvents: DatepickerEvent[] = []
 
             for (let i = 0; i < this.events.length; i++) {
                 if (this.events[i].date.getDay() === day.getDay()) {
@@ -255,8 +274,12 @@ export default {
         /*
         * Build classObject for cell using validations
         */
-        classObject(day) {
-            function dateMatch(dateOne, dateTwo, multiple) {
+        classObject(day: Date) {
+            function dateMatch(
+                dateOne: Date,
+                dateTwo: Date | Date[] | undefined,
+                multiple?: boolean
+            ) {
                 // if either date is null or undefined, return false
                 // if using multiple flag, return false
                 if (!dateOne || !dateTwo || multiple) {
@@ -275,7 +298,11 @@ export default {
                     dateOne.getMonth() === dateTwo.getMonth())
             }
 
-            function dateWithin(dateOne, dates, multiple) {
+            function dateWithin(
+                dateOne: Date,
+                dates: Date | Date[] | undefined,
+                multiple?: boolean
+            ) {
                 if (!Array.isArray(dates) || multiple) { return false }
 
                 return dateOne > dates[0] && dateOne < dates[1]
@@ -286,7 +313,7 @@ export default {
                 'is-first-selected':
                     dateMatch(
                         day,
-                        Array.isArray(this.selectedDate) && this.selectedDate[0],
+                        Array.isArray(this.selectedDate) ? this.selectedDate[0] : undefined,
                         this.multiple
                     ),
                 'is-within-selected':
@@ -294,7 +321,7 @@ export default {
                 'is-last-selected':
                     dateMatch(
                         day,
-                        Array.isArray(this.selectedDate) && this.selectedDate[1],
+                        Array.isArray(this.selectedDate) ? this.selectedDate[1] : undefined,
                         this.multiple
                     ),
                 'is-within-hovered-range':
@@ -303,30 +330,30 @@ export default {
                         dateWithin(day, this.hoveredDateRange)),
                 'is-first-hovered': dateMatch(
                     day,
-                    Array.isArray(this.hoveredDateRange) && this.hoveredDateRange[0]
+                    Array.isArray(this.hoveredDateRange) ? this.hoveredDateRange[0] : undefined
                 ),
                 'is-within-hovered':
                     dateWithin(day, this.hoveredDateRange),
                 'is-last-hovered': dateMatch(
                     day,
-                    Array.isArray(this.hoveredDateRange) && this.hoveredDateRange[1]
+                    Array.isArray(this.hoveredDateRange) ? this.hoveredDateRange[1] : undefined
                 ),
-                'is-today': dateMatch(day, this.dateCreator()),
+                'is-today': dateMatch(day, this.dateCreator!()),
                 'is-selectable': this.selectableDate(day) && !this.disabled,
                 'is-unselectable': !this.selectableDate(day) || this.disabled,
                 'is-invisible': !this.nearbyMonthDays && day.getMonth() !== this.month,
                 'is-nearby': this.nearbySelectableMonthDays && day.getMonth() !== this.month,
                 'has-event': this.eventsDateMatch(day),
-                [this.indicators]: this.eventsDateMatch(day)
+                [this.indicators!]: this.eventsDateMatch(day)
             }
         },
-        setRangeHoverEndDate(day) {
+        setRangeHoverEndDate(day: Date) {
             if (this.range) {
                 this.$emit('rangeHoverEndDate', day)
             }
         },
 
-        manageKeydown(event, weekDay) {
+        manageKeydown(event: KeyboardEvent, weekDay: Date) {
             // https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values#Navigation_keys
             const { key } = event
             let preventDefault = true
@@ -371,7 +398,7 @@ export default {
             }
         },
 
-        changeFocus(day, inc) {
+        changeFocus(day: Date, inc: number) {
             const nextDay = new Date(day.getTime())
             nextDay.setDate(day.getDate() + inc)
             while (
@@ -385,5 +412,5 @@ export default {
             this.$emit('change-focus', nextDay)
         }
     }
-}
+})
 </script>
diff --git a/packages/buefy-next/src/components/datepicker/__snapshots__/Datepicker.spec.js.snap b/packages/buefy-next/src/components/datepicker/__snapshots__/Datepicker.spec.js.snap
deleted file mode 100644
index 191dfc00c..000000000
--- a/packages/buefy-next/src/components/datepicker/__snapshots__/Datepicker.spec.js.snap
+++ /dev/null
@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BDatepicker render correctly 1`] = `
-<div class="datepicker control">
-  <div class="dropdown dropdown-menu-animation is-mobile-modal">
-    <div tabindex="-1" class="dropdown-trigger" aria-haspopup="true">
-      <b-input-stub type="text" lazy="false" passwordreveal="false" iconclickable="false" hascounter="true" customclass="" iconrightclickable="false" autocomplete="off" rounded="false" loading="false" readonly="" use-html5-validation="false"></b-input-stub>
-    </div>
-    <transition-stub name="fade" appear="false" persisted="false" css="true">
-      <div class="background" aria-hidden="true" style="display: none;"></div>
-    </transition-stub>
-    <transition-stub name="fade" appear="false" persisted="true" css="true">
-      <div class="dropdown-menu" aria-hidden="true" style="display: none;">
-        <div class="dropdown-content" role="dialog" aria-modal="true">
-          <div class="dropdown-item" tabindex="0">
-            <div>
-              <header class="datepicker-header">
-                <div class="pagination field is-centered"><a class="pagination-previous" role="button" href="#">
-                    <b-icon-stub icon="chevron-left" type="is-primary is-clickable" both="true"></b-icon-stub>
-                  </a><a class="pagination-next" role="button" href="#">
-                    <b-icon-stub icon="chevron-right" type="is-primary is-clickable" both="true"></b-icon-stub>
-                  </a>
-                  <div class="pagination-list">
-                    <div class="field">
-                      <!--v-if-->
-                      <div class="field-body">
-                        <div class="field has-addons">
-                          <!--v-if-->
-                          <div class="control"><span class="select"><select><!--v-if--><option value="0">January</option><option value="1">February</option><option value="2">March</option><option value="3">April</option><option value="4">May</option><option value="5">June</option><option value="6">July</option><option value="7">August</option><option value="8">September</option><option value="9">October</option><option value="10">November</option><option value="11">December</option></select></span>
-                            <!--v-if-->
-                          </div>
-                          <div class="control"><span class="select"><select><!--v-if--><option value="2028">2028</option><option value="2027">2027</option><option value="2026">2026</option><option value="2025">2025</option><option value="2024">2024</option><option value="2023">2023</option><option value="2022">2022</option><option value="2021">2021</option><option value="2020">2020</option><option value="2019">2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option><option value="1929">1929</option><option value="1928">1928</option><option value="1927">1927</option><option value="1926">1926</option><option value="1925">1925</option><option value="1924">1924</option><option value="1923">1923</option><option value="1922">1922</option><option value="1921">1921</option><option value="1920">1920</option><option value="1919">1919</option><option value="1918">1918</option></select></span>
-                            <!--v-if-->
-                          </div>
-                          <!--v-if-->
-                        </div>
-                      </div>
-                      <!--v-if-->
-                    </div>
-                  </div>
-                </div>
-              </header>
-              <div class="datepicker-content">
-                <b-datepicker-table-stub daynames="Su,M,Tu,W,Th,F,S" monthnames="January,February,March,April,May,June,July,August,September,October,November,December" firstdayofweek="0" rulesforfirstweek="4" focused="[object Object]" indicators="dots" datecreator="[Function]" nearbymonthdays="true" nearbyselectablemonthdays="false" showweeknumber="false" weeknumberclickable="false" range="false" multiple="false" type-month="false"></b-datepicker-table-stub>
-              </div>
-            </div>
-            <!--v-if-->
-          </div>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-</div>
-`;
diff --git a/packages/buefy-next/src/components/datepicker/__snapshots__/Datepicker.spec.ts.snap b/packages/buefy-next/src/components/datepicker/__snapshots__/Datepicker.spec.ts.snap
new file mode 100644
index 000000000..c6914127b
--- /dev/null
+++ b/packages/buefy-next/src/components/datepicker/__snapshots__/Datepicker.spec.ts.snap
@@ -0,0 +1,54 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BDatepicker > render correctly 1`] = `
+"<div class=\\"datepicker control\\">
+  <div class=\\"dropdown dropdown-menu-animation is-mobile-modal\\">
+    <div tabindex=\\"-1\\" class=\\"dropdown-trigger\\" aria-haspopup=\\"true\\">
+      <b-input-stub type=\\"text\\" lazy=\\"false\\" passwordreveal=\\"false\\" iconclickable=\\"false\\" hascounter=\\"true\\" customclass=\\"\\" iconrightclickable=\\"false\\" autocomplete=\\"off\\" rounded=\\"false\\" loading=\\"false\\" readonly=\\"\\" use-html5-validation=\\"false\\"></b-input-stub>
+    </div>
+    <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+      <div class=\\"background\\" aria-hidden=\\"true\\" style=\\"display: none;\\"></div>
+    </transition-stub>
+    <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
+      <div class=\\"dropdown-menu\\" aria-hidden=\\"true\\" style=\\"display: none;\\">
+        <div class=\\"dropdown-content\\" role=\\"dialog\\" aria-modal=\\"true\\">
+          <div class=\\"dropdown-item\\" tabindex=\\"0\\">
+            <div>
+              <header class=\\"datepicker-header\\">
+                <div class=\\"pagination field is-centered\\"><a class=\\"pagination-previous\\" role=\\"button\\" href=\\"#\\">
+                    <b-icon-stub icon=\\"chevron-left\\" type=\\"is-primary is-clickable\\" both=\\"true\\"></b-icon-stub>
+                  </a><a class=\\"pagination-next\\" role=\\"button\\" href=\\"#\\">
+                    <b-icon-stub icon=\\"chevron-right\\" type=\\"is-primary is-clickable\\" both=\\"true\\"></b-icon-stub>
+                  </a>
+                  <div class=\\"pagination-list\\">
+                    <div class=\\"field\\">
+                      <!--v-if-->
+                      <div class=\\"field-body\\">
+                        <div class=\\"field has-addons\\">
+                          <!--v-if-->
+                          <div class=\\"control\\"><span class=\\"select\\"><select><!--v-if--><option value=\\"0\\">January</option><option value=\\"1\\">February</option><option value=\\"2\\">March</option><option value=\\"3\\">April</option><option value=\\"4\\">May</option><option value=\\"5\\">June</option><option value=\\"6\\">July</option><option value=\\"7\\">August</option><option value=\\"8\\">September</option><option value=\\"9\\">October</option><option value=\\"10\\">November</option><option value=\\"11\\">December</option></select></span>
+                            <!--v-if-->
+                          </div>
+                          <div class=\\"control\\"><span class=\\"select\\"><select><!--v-if--><option value=\\"2028\\">2028</option><option value=\\"2027\\">2027</option><option value=\\"2026\\">2026</option><option value=\\"2025\\">2025</option><option value=\\"2024\\">2024</option><option value=\\"2023\\">2023</option><option value=\\"2022\\">2022</option><option value=\\"2021\\">2021</option><option value=\\"2020\\">2020</option><option value=\\"2019\\">2019</option><option value=\\"2018\\">2018</option><option value=\\"2017\\">2017</option><option value=\\"2016\\">2016</option><option value=\\"2015\\">2015</option><option value=\\"2014\\">2014</option><option value=\\"2013\\">2013</option><option value=\\"2012\\">2012</option><option value=\\"2011\\">2011</option><option value=\\"2010\\">2010</option><option value=\\"2009\\">2009</option><option value=\\"2008\\">2008</option><option value=\\"2007\\">2007</option><option value=\\"2006\\">2006</option><option value=\\"2005\\">2005</option><option value=\\"2004\\">2004</option><option value=\\"2003\\">2003</option><option value=\\"2002\\">2002</option><option value=\\"2001\\">2001</option><option value=\\"2000\\">2000</option><option value=\\"1999\\">1999</option><option value=\\"1998\\">1998</option><option value=\\"1997\\">1997</option><option value=\\"1996\\">1996</option><option value=\\"1995\\">1995</option><option value=\\"1994\\">1994</option><option value=\\"1993\\">1993</option><option value=\\"1992\\">1992</option><option value=\\"1991\\">1991</option><option value=\\"1990\\">1990</option><option value=\\"1989\\">1989</option><option value=\\"1988\\">1988</option><option value=\\"1987\\">1987</option><option value=\\"1986\\">1986</option><option value=\\"1985\\">1985</option><option value=\\"1984\\">1984</option><option value=\\"1983\\">1983</option><option value=\\"1982\\">1982</option><option value=\\"1981\\">1981</option><option value=\\"1980\\">1980</option><option value=\\"1979\\">1979</option><option value=\\"1978\\">1978</option><option value=\\"1977\\">1977</option><option value=\\"1976\\">1976</option><option value=\\"1975\\">1975</option><option value=\\"1974\\">1974</option><option value=\\"1973\\">1973</option><option value=\\"1972\\">1972</option><option value=\\"1971\\">1971</option><option value=\\"1970\\">1970</option><option value=\\"1969\\">1969</option><option value=\\"1968\\">1968</option><option value=\\"1967\\">1967</option><option value=\\"1966\\">1966</option><option value=\\"1965\\">1965</option><option value=\\"1964\\">1964</option><option value=\\"1963\\">1963</option><option value=\\"1962\\">1962</option><option value=\\"1961\\">1961</option><option value=\\"1960\\">1960</option><option value=\\"1959\\">1959</option><option value=\\"1958\\">1958</option><option value=\\"1957\\">1957</option><option value=\\"1956\\">1956</option><option value=\\"1955\\">1955</option><option value=\\"1954\\">1954</option><option value=\\"1953\\">1953</option><option value=\\"1952\\">1952</option><option value=\\"1951\\">1951</option><option value=\\"1950\\">1950</option><option value=\\"1949\\">1949</option><option value=\\"1948\\">1948</option><option value=\\"1947\\">1947</option><option value=\\"1946\\">1946</option><option value=\\"1945\\">1945</option><option value=\\"1944\\">1944</option><option value=\\"1943\\">1943</option><option value=\\"1942\\">1942</option><option value=\\"1941\\">1941</option><option value=\\"1940\\">1940</option><option value=\\"1939\\">1939</option><option value=\\"1938\\">1938</option><option value=\\"1937\\">1937</option><option value=\\"1936\\">1936</option><option value=\\"1935\\">1935</option><option value=\\"1934\\">1934</option><option value=\\"1933\\">1933</option><option value=\\"1932\\">1932</option><option value=\\"1931\\">1931</option><option value=\\"1930\\">1930</option><option value=\\"1929\\">1929</option><option value=\\"1928\\">1928</option><option value=\\"1927\\">1927</option><option value=\\"1926\\">1926</option><option value=\\"1925\\">1925</option><option value=\\"1924\\">1924</option><option value=\\"1923\\">1923</option><option value=\\"1922\\">1922</option><option value=\\"1921\\">1921</option><option value=\\"1920\\">1920</option><option value=\\"1919\\">1919</option><option value=\\"1918\\">1918</option></select></span>
+                            <!--v-if-->
+                          </div>
+                          <!--v-if-->
+                        </div>
+                      </div>
+                      <!--v-if-->
+                    </div>
+                  </div>
+                </div>
+              </header>
+              <div class=\\"datepicker-content\\">
+                <b-datepicker-table-stub daynames=\\"Su,M,Tu,W,Th,F,S\\" monthnames=\\"January,February,March,April,May,June,July,August,September,October,November,December\\" firstdayofweek=\\"0\\" rulesforfirstweek=\\"4\\" focused=\\"[object Object]\\" indicators=\\"dots\\" datecreator=\\"[Function]\\" nearbymonthdays=\\"true\\" nearbyselectablemonthdays=\\"false\\" showweeknumber=\\"false\\" weeknumberclickable=\\"false\\" range=\\"false\\" multiple=\\"false\\" type-month=\\"false\\"></b-datepicker-table-stub>
+              </div>
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+    </transition-stub>
+  </div>
+</div>"
+`;
diff --git a/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerMonth.spec.js.snap b/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerMonth.spec.js.snap
deleted file mode 100644
index 9317fb1ea..000000000
--- a/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerMonth.spec.js.snap
+++ /dev/null
@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BDatepickerMonth render correctly 1`] = `
-<section class="datepicker-table">
-  <div class="datepicker-body">
-    <div class="datepicker-months"><a class="is-selectable datepicker-cell" role="button" href="#" tabindex="-1">January
-        <!--v-if-->
-      </a><a class="is-selectable datepicker-cell" role="button" href="#" tabindex="-1">February
-        <!--v-if-->
-      </a><a class="is-selectable datepicker-cell" role="button" href="#" tabindex="-1">March
-        <!--v-if-->
-      </a><a class="is-selectable datepicker-cell" role="button" href="#" tabindex="-1">April
-        <!--v-if-->
-      </a><a class="is-selectable datepicker-cell" role="button" href="#">May
-        <!--v-if-->
-      </a><a class="is-selectable datepicker-cell" role="button" href="#" tabindex="-1">June
-        <!--v-if-->
-      </a><a class="is-selectable datepicker-cell" role="button" href="#" tabindex="-1">July
-        <!--v-if-->
-      </a><a class="is-selectable datepicker-cell" role="button" href="#" tabindex="-1">August
-        <!--v-if-->
-      </a><a class="is-selectable datepicker-cell" role="button" href="#" tabindex="-1">September
-        <!--v-if-->
-      </a><a class="is-selectable datepicker-cell" role="button" href="#" tabindex="-1">October
-        <!--v-if-->
-      </a><a class="is-selectable datepicker-cell" role="button" href="#" tabindex="-1">November
-        <!--v-if-->
-      </a><a class="is-selectable datepicker-cell" role="button" href="#" tabindex="-1">December
-        <!--v-if-->
-      </a></div>
-  </div>
-</section>
-`;
diff --git a/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerMonth.spec.ts.snap b/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerMonth.spec.ts.snap
new file mode 100644
index 000000000..b3dbcef24
--- /dev/null
+++ b/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerMonth.spec.ts.snap
@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BDatepickerMonth > render correctly 1`] = `
+"<section class=\\"datepicker-table\\">
+  <div class=\\"datepicker-body\\">
+    <div class=\\"datepicker-months\\"><a class=\\"is-selectable datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\">January
+        <!--v-if-->
+      </a><a class=\\"is-selectable datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\">February
+        <!--v-if-->
+      </a><a class=\\"is-selectable datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\">March
+        <!--v-if-->
+      </a><a class=\\"is-selectable datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\">April
+        <!--v-if-->
+      </a><a class=\\"is-selectable datepicker-cell\\" role=\\"button\\" href=\\"#\\">May
+        <!--v-if-->
+      </a><a class=\\"is-selectable datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\">June
+        <!--v-if-->
+      </a><a class=\\"is-selectable datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\">July
+        <!--v-if-->
+      </a><a class=\\"is-selectable datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\">August
+        <!--v-if-->
+      </a><a class=\\"is-selectable datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\">September
+        <!--v-if-->
+      </a><a class=\\"is-selectable datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\">October
+        <!--v-if-->
+      </a><a class=\\"is-selectable datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\">November
+        <!--v-if-->
+      </a><a class=\\"is-selectable datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\">December
+        <!--v-if-->
+      </a></div>
+  </div>
+</section>"
+`;
diff --git a/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTable.spec.js.snap b/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTable.spec.js.snap
deleted file mode 100644
index 3951c6d40..000000000
--- a/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTable.spec.js.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BDatepickerTable render correctly 1`] = `
-<section class="datepicker-table">
-  <header class="datepicker-header">
-    <div class="datepicker-cell"><span>Su</span></div>
-    <div class="datepicker-cell"><span>M</span></div>
-    <div class="datepicker-cell"><span>Tu</span></div>
-    <div class="datepicker-cell"><span>W</span></div>
-    <div class="datepicker-cell"><span>Th</span></div>
-    <div class="datepicker-cell"><span>F</span></div>
-    <div class="datepicker-cell"><span>S</span></div>
-  </header>
-  <div class="datepicker-body"></div>
-</section>
-`;
diff --git a/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTable.spec.ts.snap b/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTable.spec.ts.snap
new file mode 100644
index 000000000..30cdf446b
--- /dev/null
+++ b/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTable.spec.ts.snap
@@ -0,0 +1,16 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BDatepickerTable > render correctly 1`] = `
+"<section class=\\"datepicker-table\\">
+  <header class=\\"datepicker-header\\">
+    <div class=\\"datepicker-cell\\"><span>Su</span></div>
+    <div class=\\"datepicker-cell\\"><span>M</span></div>
+    <div class=\\"datepicker-cell\\"><span>Tu</span></div>
+    <div class=\\"datepicker-cell\\"><span>W</span></div>
+    <div class=\\"datepicker-cell\\"><span>Th</span></div>
+    <div class=\\"datepicker-cell\\"><span>F</span></div>
+    <div class=\\"datepicker-cell\\"><span>S</span></div>
+  </header>
+  <div class=\\"datepicker-body\\"></div>
+</section>"
+`;
diff --git a/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTableRow.spec.js.snap b/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTableRow.spec.js.snap
deleted file mode 100644
index 581f29013..000000000
--- a/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTableRow.spec.js.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BDatepickerTableRow render correctly 1`] = `
-<div class="datepicker-row">
-  <!--v-if--><a class="is-selectable is-invisible datepicker-cell" role="button" href="#" tabindex="-1"><span>31</span>
-    <!--v-if-->
-  </a><a class="is-selectable is-invisible datepicker-cell" role="button" href="#" tabindex="-1"><span>1</span>
-    <!--v-if-->
-  </a><a class="is-selectable is-invisible datepicker-cell" role="button" href="#" tabindex="-1"><span>2</span>
-    <!--v-if-->
-  </a><a class="is-selectable is-invisible datepicker-cell" role="button" href="#" tabindex="-1"><span>3</span>
-    <!--v-if-->
-  </a><a class="is-selectable is-invisible datepicker-cell" role="button" href="#" tabindex="-1"><span>4</span>
-    <!--v-if-->
-  </a><a class="is-selectable is-invisible datepicker-cell" role="button" href="#" tabindex="-1"><span>5</span>
-    <!--v-if-->
-  </a><a class="is-selectable is-invisible datepicker-cell" role="button" href="#" tabindex="-1"><span>6</span>
-    <!--v-if-->
-  </a>
-</div>
-`;
diff --git a/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTableRow.spec.ts.snap b/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTableRow.spec.ts.snap
new file mode 100644
index 000000000..6db381bb9
--- /dev/null
+++ b/packages/buefy-next/src/components/datepicker/__snapshots__/DatepickerTableRow.spec.ts.snap
@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BDatepickerTableRow > render correctly 1`] = `
+"<!-- eslint-disable max-len -->
+<div class=\\"datepicker-row\\">
+  <!--v-if--><a class=\\"is-selectable is-invisible datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\"><span>31</span>
+    <!--v-if-->
+  </a><a class=\\"is-selectable is-invisible datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\"><span>1</span>
+    <!--v-if-->
+  </a><a class=\\"is-selectable is-invisible datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\"><span>2</span>
+    <!--v-if-->
+  </a><a class=\\"is-selectable is-invisible datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\"><span>3</span>
+    <!--v-if-->
+  </a><a class=\\"is-selectable is-invisible datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\"><span>4</span>
+    <!--v-if-->
+  </a><a class=\\"is-selectable is-invisible datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\"><span>5</span>
+    <!--v-if-->
+  </a><a class=\\"is-selectable is-invisible datepicker-cell\\" role=\\"button\\" href=\\"#\\" tabindex=\\"-1\\"><span>6</span>
+    <!--v-if-->
+  </a>
+</div>
+<!-- eslint-enable max-len -->"
+`;
diff --git a/packages/buefy-next/src/components/datepicker/index.js b/packages/buefy-next/src/components/datepicker/index.ts
similarity index 80%
rename from packages/buefy-next/src/components/datepicker/index.js
rename to packages/buefy-next/src/components/datepicker/index.ts
index 1e24336a0..047ccf669 100644
--- a/packages/buefy-next/src/components/datepicker/index.js
+++ b/packages/buefy-next/src/components/datepicker/index.ts
@@ -1,9 +1,11 @@
+import type { App } from 'vue'
+
 import Datepicker from './Datepicker.vue'
 
 import { registerComponent } from '../../utils/plugins'
 
 const Plugin = {
-    install(Vue) {
+    install(Vue: App) {
         registerComponent(Vue, Datepicker)
     }
 }
diff --git a/packages/buefy-next/src/components/datepicker/types.ts b/packages/buefy-next/src/components/datepicker/types.ts
new file mode 100644
index 000000000..28689b03a
--- /dev/null
+++ b/packages/buefy-next/src/components/datepicker/types.ts
@@ -0,0 +1,41 @@
+// Defines common types used among the datepicker components.
+
+import type { ComponentPublicInstance } from 'vue'
+
+export interface DatepickerEvent {
+    type: string
+    date: Date
+}
+
+export interface FocusedDate {
+    year: number
+    month: number
+    day?: number
+}
+
+export type DateSelector = (day: Date) => boolean
+
+/* eslint-disable @typescript-eslint/ban-types */
+// Partial interface that `Datepicker` is supposed to satisfy.
+//
+// Defined separately to avoid circular dependencies.
+export type IDatepicker = ComponentPublicInstance<
+    {
+        multiple?: boolean
+    }, // P(rops)
+    {}, // B (raw bindings)
+    {}, // D(ata)
+    {
+        isTypeMonth: () => boolean,
+        dtf: () => Intl.DateTimeFormat
+        dtfMonth: () => Intl.DateTimeFormat
+    }, // C(omputed)
+    {}, // M(ethods)
+    {
+        'week-number-click': (_week: number, _year: number) => boolean
+    } // E(mits)
+>
+/* eslint-enable @typescript-eslint/ban-types */
+
+export type DateFormatter = (date: Date | Date[], vm: IDatepicker) => string
+export type DateParser = (date: string, vm: IDatepicker) => Date | null
diff --git a/packages/docs/src/pages/components/datepicker/Datepicker.vue b/packages/docs/src/pages/components/datepicker/Datepicker.vue
index 2f2ff46a3..e400a3ca9 100644
--- a/packages/docs/src/pages/components/datepicker/Datepicker.vue
+++ b/packages/docs/src/pages/components/datepicker/Datepicker.vue
@@ -85,51 +85,62 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+    import { defineComponent } from 'vue'
+
+    import { shallowFields } from '@/utils'
+    import ApiView from '@/components/ApiView.vue'
+    import Example from '@/components/Example.vue'
+    import VariablesView from '@/components/VariablesView.vue'
+
     import api from './api/datepicker'
     import variables from './variables/datepicker'
-    import { shallowFields } from '@/utils'
 
-    import ExSimple from './examples/ExSimple'
+    import ExSimple from './examples/ExSimple.vue'
     import ExSimpleCode from './examples/ExSimple.vue?raw'
 
-    import ExEditable from './examples/ExEditable'
+    import ExEditable from './examples/ExEditable.vue'
     import ExEditableCode from './examples/ExEditable.vue?raw'
 
-    import ExRange from './examples/ExRange'
+    import ExRange from './examples/ExRange.vue'
     import ExRangeCode from './examples/ExRange.vue?raw'
 
-    import ExFooter from './examples/ExFooter'
+    import ExFooter from './examples/ExFooter.vue'
     import ExFooterCode from './examples/ExFooter.vue?raw'
 
-    import ExHeader from './examples/ExHeader'
+    import ExHeader from './examples/ExHeader.vue'
     import ExHeaderCode from './examples/ExHeader.vue?raw'
 
-    import ExProgrammatically from './examples/ExProgrammatically'
+    import ExProgrammatically from './examples/ExProgrammatically.vue'
     import ExProgrammaticallyCode from './examples/ExProgrammatically.vue?raw'
 
-    import ExTrigger from './examples/ExTrigger'
+    import ExTrigger from './examples/ExTrigger.vue'
     import ExTriggerCode from './examples/ExTrigger.vue?raw'
 
-    import ExMonth from './examples/ExMonth'
+    import ExMonth from './examples/ExMonth.vue'
     import ExMonthCode from './examples/ExMonth.vue?raw'
 
-    import ExInline from './examples/ExInline'
+    import ExInline from './examples/ExInline.vue'
     import ExInlineCode from './examples/ExInline.vue?raw'
 
-    import ExUnselectable from './examples/ExUnselectable'
+    import ExUnselectable from './examples/ExUnselectable.vue'
     import ExUnselectableCode from './examples/ExUnselectable.vue?raw'
 
-    import ExEvents from './examples/ExEvents'
+    import ExEvents from './examples/ExEvents.vue'
     import ExEventsCode from './examples/ExEvents.vue?raw'
 
-    import ExRangeInput from './examples/ExRangeInput'
+    import ExRangeInput from './examples/ExRangeInput.vue'
     import ExRangeInputCode from './examples/ExRangeInput.vue?raw'
 
-    import ExMultipleInput from './examples/ExMultipleInput'
+    import ExMultipleInput from './examples/ExMultipleInput.vue'
     import ExMultipleInputCode from './examples/ExMultipleInput.vue?raw'
 
-    export default {
+    export default defineComponent({
+        components: {
+            ApiView,
+            Example,
+            VariablesView
+        },
         data() {
             return {
                 api,
@@ -164,5 +175,5 @@
                 ExMultipleInputCode
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/api/datepicker.js b/packages/docs/src/pages/components/datepicker/api/datepicker.ts
similarity index 100%
rename from packages/docs/src/pages/components/datepicker/api/datepicker.js
rename to packages/docs/src/pages/components/datepicker/api/datepicker.ts
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExEditable.vue b/packages/docs/src/pages/components/datepicker/examples/ExEditable.vue
index c3f4bd27a..05d62de2d 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExEditable.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExEditable.vue
@@ -29,8 +29,16 @@
     </section>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BDatepicker, BField, BSelect } from '@ntohq/buefy-next'
+
 export default {
+    components: {
+        BDatepicker,
+        BField,
+        BSelect
+    },
     data() {
         return {
             locale: undefined // Browser locale
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExEvents.vue b/packages/docs/src/pages/components/datepicker/examples/ExEvents.vue
index 46d9b0ba7..94544498e 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExEvents.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExEvents.vue
@@ -14,10 +14,18 @@
     </span>
 </template>
 
-<script>
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BDatepicker, BField, BSwitch } from '@ntohq/buefy-next'
+
     const thisMonth = new Date().getMonth()
 
-    export default {
+    export default defineComponent({
+        components: {
+            BDatepicker,
+            BField,
+            BSwitch
+        },
         computed: {
             indicators() {
                 return this.bars ? 'bars' : 'dots'
@@ -74,5 +82,5 @@
                 bars: false
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExFooter.vue b/packages/docs/src/pages/components/datepicker/examples/ExFooter.vue
index 72e86bb38..3bed79f37 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExFooter.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExFooter.vue
@@ -20,12 +20,20 @@
     </b-field>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BButton, BDatepicker, BField } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: {
+            BButton,
+            BDatepicker,
+            BField
+        },
         data() {
             return {
-                date: new Date()
+                date: new Date() as Date | null
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExHeader.vue b/packages/docs/src/pages/components/datepicker/examples/ExHeader.vue
index 24939ef88..e88d54240 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExHeader.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExHeader.vue
@@ -24,12 +24,20 @@
     </b-field>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BAutocomplete, BDatepicker, BField } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: {
+            BAutocomplete,
+            BDatepicker,
+            BField
+        },
         data() {
             return {
                 date: new Date(),
-                month: null,
+                month: null as string | null,
                 months: [
                     { name: 'January', value: 0 },
                     { name:'February', value: 1 },
@@ -47,7 +55,7 @@
             }
         },
         methods: {
-            selectMonth(option) {
+            selectMonth(option: { value: number } | undefined) {
                 if (option) {
                     this.date = new Date(this.date)
                     this.date.setMonth(option.value)
@@ -59,5 +67,5 @@
                 item.value == this.date.getMonth()
             )[0].name
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExInline.vue b/packages/docs/src/pages/components/datepicker/examples/ExInline.vue
index e1bfef383..72263fe96 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExInline.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExInline.vue
@@ -5,12 +5,16 @@
     </b-datepicker>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BDatepicker } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: { BDatepicker },
         data() {
             return {
                 date: new Date()
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExMonth.vue b/packages/docs/src/pages/components/datepicker/examples/ExMonth.vue
index 76a82ad0f..ff2217eda 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExMonth.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExMonth.vue
@@ -8,3 +8,7 @@
         </b-datepicker>
     </b-field>
 </template>
+
+<script setup lang="ts">
+import { BDatepicker, BField } from '@ntohq/buefy-next'
+</script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExMultipleInput.vue b/packages/docs/src/pages/components/datepicker/examples/ExMultipleInput.vue
index f02069088..53b36c413 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExMultipleInput.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExMultipleInput.vue
@@ -8,12 +8,19 @@
     </b-field>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BDatepicker, BField } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BDatepicker,
+        BField
+    },
     data() {
         return {
             dates: []
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExProgrammatically.vue b/packages/docs/src/pages/components/datepicker/examples/ExProgrammatically.vue
index 2fe46bca7..814274ea8 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExProgrammatically.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExProgrammatically.vue
@@ -7,14 +7,13 @@
                 placeholder="Select a date">
             </b-datepicker>
             <b-button
-                @click="$refs.datepicker.toggle()"
+                @click="($refs.datepicker as InstanceType<typeof BDatepicker>).toggle()"
                 icon-left="calendar-today"
                 type="is-primary" />
         </b-field>
     </section>
 </template>
 
-<script>
-// TODO: remove this empty script section after TypeScript migration completes
-export default {}
+<script setup lang="ts">
+import { BButton, BDatepicker, BField } from '@ntohq/buefy-next'
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExRange.vue b/packages/docs/src/pages/components/datepicker/examples/ExRange.vue
index 8c46ecf4a..4daa0127a 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExRange.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExRange.vue
@@ -8,8 +8,15 @@
     </b-field>
 </template>
 
-<script>
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BDatepicker, BField } from '@ntohq/buefy-next'
+
     export default {
+        components: {
+            BDatepicker,
+            BField
+        },
         data() {
             const today = new Date()
 
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExRangeInput.vue b/packages/docs/src/pages/components/datepicker/examples/ExRangeInput.vue
index f69f9f3a6..1bda5b63d 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExRangeInput.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExRangeInput.vue
@@ -8,12 +8,19 @@
     </b-field>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BDatepicker, BField } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BDatepicker,
+        BField
+    },
     data() {
         return {
             dates: []
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExSimple.vue b/packages/docs/src/pages/components/datepicker/examples/ExSimple.vue
index 53f75b98d..5a8ebf65d 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExSimple.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExSimple.vue
@@ -40,11 +40,20 @@
     </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BDatepicker, BField, BSelect, BSwitch } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BDatepicker,
+        BField,
+        BSelect,
+        BSwitch
+    },
     data() {
         return {
-            selected: new Date(),
+            selected: new Date() as Date | null,
             showWeekNumber: false,
             locale: undefined // Browser locale
         }
@@ -54,6 +63,6 @@ export default {
             this.selected = null
         }
     }
-}
+})
 </script>
 
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExTrigger.vue b/packages/docs/src/pages/components/datepicker/examples/ExTrigger.vue
index c887fddeb..151a53690 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExTrigger.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExTrigger.vue
@@ -13,11 +13,20 @@
     </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BButton, BDatepicker, BField, BInput } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BButton,
+        BDatepicker,
+        BField,
+        BInput
+    },
     data() {
         return {
-            selected: null
+            selected: null as Date | null
         }
     },
     computed: {
@@ -25,5 +34,5 @@ export default {
             return this.selected ? this.selected.toDateString() : ''
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExUnselectable.vue b/packages/docs/src/pages/components/datepicker/examples/ExUnselectable.vue
index 6974031c3..08e7aa324 100644
--- a/packages/docs/src/pages/components/datepicker/examples/ExUnselectable.vue
+++ b/packages/docs/src/pages/components/datepicker/examples/ExUnselectable.vue
@@ -20,8 +20,17 @@
     </section>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BDatepicker, BField, BInput, BSwitch } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: {
+            BDatepicker,
+            BField,
+            BInput,
+            BSwitch
+        },
         data() {
             return {
                 date: new Date(),
@@ -30,9 +39,9 @@
             }
         },
         methods: {
-            unselectableDates(day) {
+            unselectableDates(day: Date) {
                 return this.unselectableAfterDate < day.getDate()
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/variables/datepicker.js b/packages/docs/src/pages/components/datepicker/variables/datepicker.ts
similarity index 100%
rename from packages/docs/src/pages/components/datepicker/variables/datepicker.js
rename to packages/docs/src/pages/components/datepicker/variables/datepicker.ts