diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
index c3a58e9980..ca5213d124 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
@@ -412,6 +412,7 @@ onMounted(() => {
                   </el-dropdown-item>
                   <el-dropdown-item
                     class="menu-item-padding"
+                    v-if="!chart.type.includes('bar-range')"
                     :command="beforeDateStyle('H_m_s')"
                     divided
                   >
@@ -428,6 +429,7 @@ onMounted(() => {
                   <el-dropdown-item
                     class="menu-item-padding"
                     :command="beforeDateStyle('y_M_d_H_m')"
+                    :divided="chart.type.includes('bar-range')"
                   >
                     <span
                       class="sub-menu-content"
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
index c84a2e737a..68a0badfea 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
@@ -123,6 +123,35 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
 
     const isDate = !!chart.data.isDate
 
+    const axis = chart.yAxis ?? chart.yAxisExt ?? []
+    let dateFormat: string
+    const dateSplit = axis[0]?.datePattern === 'date_split' ? '/' : '-'
+    switch (axis[0]?.dateStyle) {
+      case 'y':
+        dateFormat = 'YYYY'
+        break
+      case 'y_M':
+        dateFormat = 'YYYY' + dateSplit + 'MM'
+        break
+      case 'y_M_d':
+        dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD'
+        break
+      // case 'H_m_s':
+      //   dateFormat = 'HH:mm:ss'
+      //   break
+      case 'y_M_d_H':
+        dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD' + ' HH'
+        break
+      case 'y_M_d_H_m':
+        dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD' + ' HH:mm'
+        break
+      case 'y_M_d_H_m_s':
+        dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD' + ' HH:mm:ss'
+        break
+      default:
+        dateFormat = 'YYYY-MM-dd HH:mm:ss'
+    }
+
     const minTime = chart.data.minTime
     const maxTime = chart.data.maxTime
 
@@ -143,7 +172,7 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
               type: 'time',
               min: minTime,
               max: maxTime,
-              mask: 'YYYY-MM-DD HH:mm:ss'
+              mask: dateFormat
             },
             tempId: {
               key: true
@@ -153,7 +182,7 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
             values: {
               min: minNumber,
               max: maxNumber,
-              mask: 'YYYY-MM-DD HH:mm:ss'
+              mask: dateFormat
             },
             tempId: {
               key: true