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 影响。
