diff --git a/frontend/src/metabase/components/YearPicker/YearPicker.stories.tsx b/frontend/src/metabase/components/YearPicker/YearPicker.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..77824720b5b18895b61d2bc1e63ae30a55b79f24
--- /dev/null
+++ b/frontend/src/metabase/components/YearPicker/YearPicker.stories.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { ComponentStory } from "@storybook/react";
+import { useArgs } from "@storybook/client-api";
+import YearPicker from "./YearPicker";
+
+export default {
+  title: "Parameters/YearPicker",
+  component: YearPicker,
+};
+
+const Template: ComponentStory<typeof YearPicker> = args => {
+  const [{ value }, updateArgs] = useArgs();
+
+  const handleChange = (year: number) => {
+    updateArgs({ value: year });
+  };
+
+  return <YearPicker {...args} value={value} onChange={handleChange} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  value: 2022,
+};
diff --git a/frontend/src/metabase/components/YearPicker/YearPicker.tsx b/frontend/src/metabase/components/YearPicker/YearPicker.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..42f502b8ffec32c95b26edc8a522a0b2b591d660
--- /dev/null
+++ b/frontend/src/metabase/components/YearPicker/YearPicker.tsx
@@ -0,0 +1,26 @@
+import React, { ChangeEvent } from "react";
+
+import Select from "metabase/core/components/Select";
+import _ from "underscore";
+
+const YEARS = _.range(new Date().getFullYear(), 1900, -1);
+
+export interface YearPickerProps {
+  value: number;
+  onChange: (v: number) => void;
+}
+
+const YearPicker = ({ value, onChange }: YearPickerProps) => (
+  <Select
+    className="borderless"
+    value={value}
+    options={YEARS}
+    optionNameFn={(option: any) => option}
+    optionValueFn={(option: any) => option}
+    onChange={({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+      onChange(parseInt(value as string, 10))
+    }
+  />
+);
+
+export default YearPicker;
diff --git a/frontend/src/metabase/components/YearPicker/YearPicker.unit.spec.tsx b/frontend/src/metabase/components/YearPicker/YearPicker.unit.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..343b066e1e5fb707b0aecc4e54d64c3be0d5fc8c
--- /dev/null
+++ b/frontend/src/metabase/components/YearPicker/YearPicker.unit.spec.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import YearPicker from "./YearPicker";
+
+describe("YearPicker", () => {
+  it("should render correctly", () => {
+    render(<YearPicker value={2022} onChange={jest.fn()}></YearPicker>);
+    expect(screen.getByRole("button")).toHaveTextContent("2022");
+  });
+});
diff --git a/frontend/src/metabase/components/YearPicker/index.tsx b/frontend/src/metabase/components/YearPicker/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..89d4b7ad30a750905bc1e073a0fc44f716f62173
--- /dev/null
+++ b/frontend/src/metabase/components/YearPicker/index.tsx
@@ -0,0 +1 @@
+export { default } from "./YearPicker";
diff --git a/frontend/src/metabase/parameters/components/widgets/DateMonthYearWidget.jsx b/frontend/src/metabase/parameters/components/widgets/DateMonthYearWidget.jsx
index 528b3e858b5654526d517b9b2386df57a288b352..1fbbe4d01e010f2097e7b89e40364eb0d52f7adc 100644
--- a/frontend/src/metabase/parameters/components/widgets/DateMonthYearWidget.jsx
+++ b/frontend/src/metabase/parameters/components/widgets/DateMonthYearWidget.jsx
@@ -1,10 +1,11 @@
 /* eslint-disable react/prop-types */
 import React from "react";
-import YearPicker from "./YearPicker";
-
 import moment from "moment";
 import _ from "underscore";
 import cx from "classnames";
+
+import YearPicker from "metabase/components/YearPicker";
+
 import { MonthContainer, MonthList } from "./DateMonthYearWidget.styled";
 
 export default class DateMonthYearWidget extends React.Component {
diff --git a/frontend/src/metabase/parameters/components/widgets/DateQuarterYearWidget.jsx b/frontend/src/metabase/parameters/components/widgets/DateQuarterYearWidget.jsx
index 54a10f0e750760f2ec25e2acb2796b1315fb654f..1af4d83d881ea565aee7f19104e5d02f7b9208a1 100644
--- a/frontend/src/metabase/parameters/components/widgets/DateQuarterYearWidget.jsx
+++ b/frontend/src/metabase/parameters/components/widgets/DateQuarterYearWidget.jsx
@@ -1,13 +1,12 @@
 /* eslint-disable react/prop-types */
 import React, { Component } from "react";
-
-import YearPicker from "./YearPicker";
-
 import moment from "moment";
 import _ from "underscore";
 import cx from "classnames";
 import { t } from "ttag";
 
+import YearPicker from "metabase/components/YearPicker";
+
 // translator: this is a "moment" format string (https://momentjs.com/docs/#/displaying/format/) It should include "Q" for the quarter number, and raw text can be escaped by brackets. For eample "[Quarter] Q" will be rendered as "Quarter 1" etc
 const QUARTER_FORMAT_STRING = t`[Q]Q`;
 
diff --git a/frontend/src/metabase/parameters/components/widgets/YearPicker.jsx b/frontend/src/metabase/parameters/components/widgets/YearPicker.jsx
deleted file mode 100644
index d23a976d4eba4437c0bed9511facc56bc972310f..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/parameters/components/widgets/YearPicker.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react";
-
-import Select from "metabase/core/components/Select";
-import _ from "underscore";
-
-const YEARS = _.range(new Date().getFullYear(), 1900, -1);
-
-const YearPicker = ({ value, onChange }) => (
-  <Select
-    className="borderless"
-    value={value}
-    options={YEARS}
-    optionNameFn={option => option}
-    optionValueFn={option => option}
-    onChange={({ target: { value } }) => onChange(value)}
-  />
-);
-
-export default YearPicker;