diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 7adfe5f454..7d3aaba442 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -436,7 +436,17 @@ onMounted(async () => {
               {{ $t('labels.organiseBy') }}
             </span>
             <NcSelect v-model:value="range.fk_from_column_id" :disabled="isMetaLoading" :loading="isMetaLoading">
-              <a-select-option v-for="(option, id) in viewSelectFieldOptions" :key="id" :value="option.value">
+              <a-select-option
+                v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
+                  // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
+                  // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
+                  if (index === 0) return true
+                  const firstRange = viewSelectFieldOptions.find((f) => f.value === form.calendarRange[0].fk_from_column_id)
+                  return firstRange?.uidt === f.uidt
+                })"
+                :key="id"
+                :value="option.value"
+              >
                 <div class="flex items-center">
                   <SmartsheetHeaderIcon :column="option" />
                   <NcTooltip class="truncate flex-1" placement="top" show-on-truncate-only>
@@ -466,7 +476,17 @@ onMounted(async () => {
                   :placeholder="$t('placeholder.notSelected')"
                   class="!rounded-r-none nc-to-select"
                 >
-                  <a-select-option v-for="(option, id) in viewSelectFieldOptions" :key="id" :value="option.value">
+                  <a-select-option
+                    v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
+                      // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
+                      // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
+
+                      const firstRange = viewSelectFieldOptions.find((f) => f.value === form.calendarRange[0].fk_from_column_id)
+                      return firstRange?.uidt === f.uidt
+                    })"
+                    :key="id"
+                    :value="option.value"
+                  >
                     <div class="flex items-center">
                       <SmartsheetHeaderIcon :column="option" />
                       <NcTooltip class="truncate flex-1" placement="top" show-on-truncate-only>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue b/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
index 1f8e146902..60450e953f 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
@@ -130,7 +130,15 @@ const removeRange = async (id: number) => {
             :placeholder="$t('placeholder.notSelected')"
             @change="saveCalendarRanges"
           >
-            <a-select-option v-for="(option, opId) in dateFieldOptions" :key="opId" :value="option.value">
+            <a-select-option
+              v-for="(option, opId) in [...dateFieldOptions].filter((r) => {
+                if (id === 0) return true
+                const firstRange = dateFieldOptions.find((f) => f.value === calendarRange[0].fk_from_column_id)
+                return firstRange?.uidt === r.uidt
+              })"
+              :key="opId"
+              :value="option.value"
+            >
               <div class="flex items-center">
                 <SmartsheetHeaderIcon :column="option" />
                 <NcTooltip class="truncate flex-1" placement="top" show-on-truncate-only>
@@ -166,7 +174,14 @@ const removeRange = async (id: number) => {
                 class="!rounded-r-none nc-to-select"
                 @change="saveCalendarRanges"
               >
-                <a-select-option v-for="(option, opId) in dateFieldOptions" :key="opId" :value="option.value">
+                <a-select-option
+                  v-for="(option, opId) in [...dateFieldOptions].filter((f) => {
+                    const firstRange = dateFieldOptions.find((f) => f.value === calendarRange[0].fk_from_column_id)
+                    return firstRange?.uidt === f.uidt
+                  })"
+                  :key="opId"
+                  :value="option.value"
+                >
                   <div class="flex items-center">
                     <SmartsheetHeaderIcon :column="option" />
                     <NcTooltip class="truncate flex-1" placement="top" show-on-truncate-only>