diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 692c3f667c..460f7b9e11 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AAlert: typeof import('ant-design-vue/es')['Alert']
     AAnchorLink: typeof import('ant-design-vue/es')['AnchorLink']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
@@ -15,6 +16,7 @@ declare module '@vue/runtime-core' {
     ACol: typeof import('ant-design-vue/es')['Col']
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
+    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
new file mode 100644
index 0000000000..9ed5f86c42
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+import { ReadonlyInj } from '~/context'
+const { modelValue } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+dayjs.extend(customParseFormat)
+
+interface Props {
+  modelValue: number
+}
+
+const readOnlyMode = inject(ReadonlyInj, false)
+
+let isYearInvalid = $ref(false)
+
+const localState = $computed({
+  get() {
+    if (!modelValue) {
+      return undefined
+    }
+
+    const yearDate = dayjs(modelValue.toString(), 'YYYY')
+    if (!yearDate.isValid()) {
+      isYearInvalid = true
+      return undefined
+    }
+
+    return yearDate
+  },
+  set(val?: dayjs.Dayjs) {
+    if (!val) {
+      emit('update:modelValue', null)
+      return
+    }
+
+    if (val?.isValid()) {
+      emit('update:modelValue', Number(val?.format('YYYY')))
+    }
+  },
+})
+</script>
+
+<template>
+  <a-date-picker
+    v-model:value="localState"
+    picker="year"
+    :bordered="false"
+    class="!w-full px-1"
+    :placeholder="isYearInvalid ? 'Invalid year' : !readOnlyMode ? 'Select year' : ''"
+    :allow-clear="!readOnlyMode"
+    :input-read-only="true"
+    :open="readOnlyMode ? false : undefined"
+  >
+    <template v-if="readOnlyMode" #suffixIcon></template>
+  </a-date-picker>
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index c1b4bb7cbb..f643b37140 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -32,6 +32,7 @@ const {
   isEmail,
   isJSON,
   isDate,
+  isYear,
   isDateTime,
   isTime,
   isBoolean,
@@ -177,6 +178,7 @@ todo :
     <CellSingleSelect v-else-if="isSingleSelect" v-model="localState" />
     <CellMultiSelect v-else-if="isMultiSelect" v-model="localState" />
     <CellDatePicker v-else-if="isDate" v-model="localState" />
+    <CellYearPicker v-else-if="isYear" v-model="localState" />
     <CellDateTimePicker v-else-if="isDateTime" v-model="localState" />
     <CellDateTimePicker v-else-if="isTime" v-model="localState" />
     <CellRating v-else-if="isRating" v-model="localState" />
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index decddd5778..9eb65f1195 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -17,6 +17,7 @@ export default (column: ColumnType) => {
   const isInt = abstractType === 'integer'
   const isFloat = abstractType === 'float'
   const isDate = abstractType === 'date' || uiDatatype === 'Date'
+  const isYear = abstractType === 'year' || uiDatatype === 'Year'
   const isTime = abstractType === 'time' || uiDatatype === 'Time'
   const isDateTime = abstractType === 'datetime' || uiDatatype === 'DateTime'
   const isJSON = uiDatatype === 'JSON'
@@ -55,6 +56,7 @@ export default (column: ColumnType) => {
     isInt,
     isFloat,
     isDate,
+    isYear,
     isTime,
     isDateTime,
     isJSON,