Vue3 + Element Plus 日期处理开发参考

Vue3 + Element Plus 日期处理开发参考

🎯 核心原则

日期格式标准

const DATE_FORMATS = {
  DATE_ONLY: 'YYYY-MM-DD',           // 业务日期
  DATETIME: 'YYYY-MM-DD HH:mm:ss',   // 系统时间
}

数据库字段类型

-- 系统字段：timestamp(6)
"create_time" timestamp(6) NOT NULL DEFAULT CURRENT_TIMESTAMP,

-- 业务时间：timestamp(6) 
"delivery_date" timestamp(6),

-- 业务日期：date
"sign_date" date,

##️ 开发工具

日期处理工具类

// utils/dateHandler.ts
export class DateHandler {
  static formatDate(date: any, format: string = 'YYYY-MM-DD'): string {
    return date ? dayjs(date).format(format) : ''
  }
  
  static getDateRangeQuery(dateRange: [string, string]) {
    if (!dateRange || dateRange.length !== 2) return { startTime: '', endTime: '' }
    return {
      startTime: dayjs(dateRange[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
      endTime: dayjs(dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
    }
  }
}

表格格式化函数

// utils/tableFormatters.ts
export const tableDateFormatters = {
  dateOnly: (row: any, column: any, cellValue: any): string => {
    return DateHandler.formatDate(cellValue, 'YYYY-MM-DD') || '-'
  },
  dateTime: (row: any, column: any, cellValue: any): string => {
    return DateHandler.formatDate(cellValue, 'YYYY-MM-DD HH:mm:ss') || '-'
  }
}

开发模板

1. 日期选择器配置

<!-- 业务日期 -->
<el-date-picker
  v-model="formData.signDate"
  type="date"
  value-format="YYYY-MM-DD"
/>

<!-- 系统时间 -->
<el-date-picker
  v-model="formData.deliveryDate"
  type="datetime"
  value-format="YYYY-MM-DD HH:mm:ss"
/>

<!-- 日期范围查询 -->
<el-date-picker
  v-model="queryParams.dateRange"
  type="daterange"
  value-format="YYYY-MM-DD"
  :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
/>

2. 表格列配置

<el-table :data="list">
  <el-table-column 
    label="签订日期" 
    prop="signDate" 
    :formatter="tableDateFormatters.dateOnly"
  />
  <el-table-column 
    label="创建时间" 
    prop="createTime" 
    :formatter="tableDateFormatters.dateTime"
  />
</el-table>

3. 表单提交处理

const submitForm = async () => {
  const data = {
    ...formData.value,
    signDate: DateHandler.formatDate(formData.value.signDate, 'YYYY-MM-DD'),
    deliveryDate: DateHandler.formatDate(formData.value.deliveryDate, 'YYYY-MM-DD HH:mm:ss')
  }
  await Api.create(data)
}

4. 查询参数处理

const getList = async () => {
  const params = {
    ...queryParams,
    ...DateHandler.getDateRangeQuery(queryParams.dateRange)
  }
  const data = await Api.getList(params)
  list.value = data.list || []
}

##️ 数据库设计

表结构模板

CREATE TABLE "table_name" (
  "id" int8 NOT NULL,
  "name" varchar(100) NOT NULL,
  
  -- 业务日期字段
  "sign_date" date,
  "effective_date" date,
  
  -- 业务时间字段
  "delivery_date" timestamp(6),
  "shipping_date" timestamp(6),
  
  -- 系统字段
  "create_time" timestamp(6) NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "update_time" timestamp(6) NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "deleted" bool NOT NULL DEFAULT false,
  "tenant_id" int8 NOT NULL DEFAULT 0
);

索引

CREATE INDEX "idx_table_name_sign_date" ON "table_name" ("sign_date");
CREATE INDEX "idx_table_name_create_time" ON "table_name" ("create_time");

☕ Java实体类

DO类模板

@Data
@TableName("table_name")
public class TableDO {
    private Long id;
    private String name;
    
    // 业务日期字段
    @JsonFormat(pattern = "yyyy-MM-dd")
    private LocalDate signDate;
    
    // 业务时间字段
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private LocalDateTime deliveryDate;
    
    // 系统字段
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private LocalDateTime createTime;
    
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private LocalDateTime updateTime;
}

⚠️ 注意事项

避免的坑

• ❌ 不要混用不同的日期格式
• ❌ 不要用varchar存储时间
• ❌ 不要省略timestamp精度

开发检查清单

• 日期选择器格式统一
• 表格显示格式一致
• 数据库字段类型正确
• Java实体类注解完整
• 查询参数处理正确
• 索引已添加

快速开始

1. 复制工具类：把DateHandler和tableDateFormatters复制到项目中
2. 使用模板：按照模板配置日期选择器和表格列
3. 数据库设计：按照模板设计表结构
4. Java实体：按照模板编写DO和VO类
5. 测试验证：确保前后端数据交互正常

这样就能避免大部分日期处理的问题，提高开发效率！