vxe-gantt 如何自定义日期格式

vxe-gantt 如何自定义日期格式
在实际项目中，不同地区或业务场景对日期显示格式有不同要求。例如，中国常用 yyyy-MM-dd，欧洲常用 dd/MM/yyyy，美国常用 MM/dd/yyyy，有时还需要精确到时分秒。vxe-gantt 提供了灵活的日期格式配置，只需简单设置即可满足各种格式需求。

用法

支持字符串日期格式自定义，通过 task-config.dateFormat='yyyy-MM-dd HH:mm:ss' 来设置

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const ganttOptions = reactive({
  taskConfig: {
    dateFormat: 'dd/MM/yyyy'   // 设置日期格式为 日/月/年
  },
  columns: [
    { field: 'title', title: '任务名称' },
    { field: 'start', title: '开始时间', width: 100 },
    { field: 'end', title: '结束时间', width: 100 }
  ],
  data: [
    { id: 10001, title: 'A项目', start: '03/03/2024', end: '04/03/2024', progress: 3 },
    { id: 10002, title: '城市道路修理进度', start: '04/03/2024', end: '08/03/2024', progress: 10 },
    { id: 10003, title: 'B大工程', start: '08/03/2024', end: '12/03/2024', progress: 90 },
    { id: 10004, title: '超级大工程', start: '14/03/2024', end: '19/03/2024', progress: 15 },
    { id: 10005, title: '地球净化项目', start: '10/03/2024', end: '17/03/2024', progress: 100 }
  ]
})

</script>

支持的日期格式占位符

vxe-gantt 内部基于日期处理库，支持以下常用占位符：

占位符	说明	示例值
yyyy	四位年份	2024
yy	两位年份	24
MM	月份（两位）	03
M	月份（不补零）	3
dd	日期（两位）	09
d	日期（不补零）	9
HH	24小时制小时（两位）	14
H	24小时制小时（不补零）	14
hh	12小时制小时（两位）	02
h	12小时制小时（不补零）	2
mm	分钟（两位）	05
m	分钟（不补零）	5
ss	秒（两位）	08
s	秒（不补零）	8

说明

* 数据格式必须与配置保持一致：设置 dateFormat 后，data 中的 start、end 字段必须使用相同的格式字符串，否则组件无法正确解析日期。
* 全局生效：该配置影响甘特图中所有日期字段的显示和内部计算（包括任务条拖拽、依赖线更新等）。
* 动态修改：如果需要动态切换日期格式，可以修改 ganttOptions.taskConfig.dateFormat 并重新赋值，组件会响应变化。
* 与列模板的关系：如果 columns 中单独为某个日期列设置了 formatter，该列的显示会以 formatter 为准，不会受 dateFormat 影响。

https://gantt.vxeui.com