diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 9fae66cc85..08362605d7 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -4,9 +4,10 @@ import { ColumnInj, ReadonlyInj, computed, inject, ref, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null
+  isPk?: boolean
 }
 
-const { modelValue } = defineProps<Props>()
+const { modelValue, isPk } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -65,10 +66,10 @@ const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
     class="!w-full !px-0 !border-none"
     :format="dateFormat"
     :placeholder="placeholder"
-    :allow-clear="!readOnly"
+    :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :dropdown-class-name="`${randomClass} nc-picker-date`"
-    :open="readOnly ? false : open"
+    :open="readOnly || (localState && isPk) ? false : open"
     @click="open = !open"
   >
     <template #suffixIcon></template>
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index d444494c8c..b28e7bf8d4 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -4,9 +4,10 @@ import { ReadonlyInj, inject, ref, useProject, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null
+  isPk?: boolean
 }
 
-const { modelValue } = defineProps<Props>()
+const { modelValue, isPk } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -65,11 +66,11 @@ watch(
     class="!w-full !px-0 !border-none"
     format="YYYY-MM-DD HH:mm"
     :placeholder="isDateInvalid ? 'Invalid date' : ''"
-    :allow-clear="!readOnly"
+    :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :dropdown-class-name="`${randomClass} nc-picker-datetime`"
-    :open="readOnly ? false : open"
-    :disabled="readOnly"
+    :open="readOnly || (localState && isPk) ? false : open"
+    :disabled="readOnly || (localState && isPk)"
     @click="open = !open"
     @ok="open = !open"
   >
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 0844c73065..ed19d62277 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -4,9 +4,10 @@ import { ReadonlyInj, inject, onClickOutside, useProject, watch } from '#imports
 
 interface Props {
   modelValue?: string | null | undefined
+  isPk?: boolean
 }
 
-const { modelValue } = defineProps<Props>()
+const { modelValue, isPk } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -76,9 +77,9 @@ watch(
     format="HH:mm"
     class="!w-full !px-0 !border-none"
     :placeholder="isTimeInvalid ? 'Invalid time' : ''"
-    :allow-clear="!readOnly"
+    :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :open="readOnly ? false : open"
+    :open="readOnly || (localState && isPk) ? false : open"
     :popup-class-name="`${randomClass} nc-picker-time`"
     @click="open = !open"
     @ok="open = !open"
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index d22386a538..1dda01b09a 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -4,9 +4,10 @@ import { ReadonlyInj, computed, inject, onClickOutside, ref, watch } from '#impo
 
 interface Props {
   modelValue?: number | string | null
+  isPk?: boolean
 }
 
-const { modelValue } = defineProps<Props>()
+const { modelValue, isPk = false } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -63,9 +64,9 @@ const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
     :bordered="false"
     class="!w-full !px-0 !border-none"
     :placeholder="placeholder"
-    :allow-clear="!readOnly"
+    :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :open="readOnly ? false : open"
+    :open="readOnly || (localState && isPk) ? false : open"
     :dropdown-class-name="`${randomClass} nc-picker-year`"
     @click="open = !open"
     @change="open = !open"
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index ac4d5d017d..e635e91ce8 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -91,6 +91,7 @@ const {
   isPhoneNumber,
   isAutoSaved,
   isManualSaved,
+  isPrimaryKey,
 } = useColumn(column)
 
 const vModel = computed({
@@ -134,10 +135,10 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
     <LazyCellAttachment v-else-if="isAttachment" v-model="vModel" :row-index="props.rowIndex" />
     <LazyCellSingleSelect v-else-if="isSingleSelect" v-model="vModel" />
     <LazyCellMultiSelect v-else-if="isMultiSelect" v-model="vModel" />
-    <LazyCellDatePicker v-else-if="isDate" v-model="vModel" />
-    <LazyCellYearPicker v-else-if="isYear" v-model="vModel" />
-    <LazyCellDateTimePicker v-else-if="isDateTime" v-model="vModel" />
-    <LazyCellTimePicker v-else-if="isTime" v-model="vModel" />
+    <LazyCellDatePicker v-else-if="isDate" v-model="vModel" :is-pk="isPrimaryKey" />
+    <LazyCellYearPicker v-else-if="isYear" v-model="vModel" :is-pk="isPrimaryKey" />
+    <LazyCellDateTimePicker v-else-if="isDateTime" v-model="vModel" :is-pk="isPrimaryKey" />
+    <LazyCellTimePicker v-else-if="isTime" v-model="vModel" :is-pk="isPrimaryKey" />
     <LazyCellRating v-else-if="isRating" v-model="vModel" />
     <LazyCellDuration v-else-if="isDuration" v-model="vModel" />
     <LazyCellEmail v-else-if="isEmail" v-model="vModel" />
diff --git a/packages/nc-gui/composables/useColumn.ts b/packages/nc-gui/composables/useColumn.ts
index a481e227a0..5ba6a8b6e7 100644
--- a/packages/nc-gui/composables/useColumn.ts
+++ b/packages/nc-gui/composables/useColumn.ts
@@ -61,6 +61,7 @@ export function useColumn(column: Ref<ColumnType | undefined>) {
   )
   const isManualSaved = computed(() => [UITypes.Currency].includes(uiDatatype.value))
   const isPrimary = computed(() => column.value?.pv)
+  const isPrimaryKey = computed(() => !!column.value?.pk)
 
   return {
     abstractType,
@@ -92,5 +93,6 @@ export function useColumn(column: Ref<ColumnType | undefined>) {
     isPercent,
     isPhoneNumber,
     isSpecificDBType,
+    isPrimaryKey,
   }
 }