fix: groupBy dateTime/time field title format should be same as cell display format

packages/nc-gui/components/smartsheet/grid/GroupBy.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
-import { UITypes } from 'nocodb-sdk'
+import dayjs from 'dayjs'
+import { UITypes, dateFormats, timeFormats } from 'nocodb-sdk'
 import Table from './Table.vue'
 import GroupBy from './GroupBy.vue'
 import GroupByTable from './GroupByTable.vue'
@@ -139,7 +140,7 @@ const onScroll = (e: Event) => {
 
 // a method to parse group key if grouped column type is LTAR or Lookup
 // in these 2 scenario it will return json array or `___` separated value
-const parseKey = (group) => {
+const parseKey = (group: Group) => {
   let key = group.key.toString()
 
   // parse json array key if it's a lookup or link to another record
@@ -151,6 +152,21 @@ const parseKey = (group) => {
       return key.split('___')
     }
   }
+
+  // show the groupBy dateTime field title format as like cell format
+  if (key && group.column?.uidt === UITypes.DateTime && dayjs(key).isValid()) {
+    const dateFormat = parseProp(group.column?.meta)?.date_format ?? dateFormats[0]
+    const timeFormat = parseProp(group.column?.meta)?.time_format ?? timeFormats[0]
+
+    const dateTimeFormat = `${dateFormat} ${timeFormat}`
+
+    return [dayjs(key).utc().local().format(dateTimeFormat)]
+  }
+
+  // show the groupBy time field title format as like cell format
+  if (key && group.column?.uidt === UITypes.Time && dayjs(key).isValid()) {
+    return [dayjs(key).format(timeFormats[0])]
+  }
   return [key]
 }