Flutter实现日期显示dd-MM-yyyy与存储yyyy-MM-dd的方案优化

1. 依赖准备 #

先确保在pubspec.yaml中引入日期格式化所需的intl包：

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.18.1 # 版本可根据项目实际情况调整

2. 核心格式转换工具封装 #

创建统一的日期工具类，把展示和存储的格式逻辑抽离，避免重复代码：

import 'package:intl/intl.dart';

class DateFormatter {
  // 界面展示用格式：dd-MM-yyyy
  static final DateFormat displayFormat = DateFormat('dd-MM-yyyy');
  // 数据库存储用格式：yyyy-MM-dd
  static final DateFormat storageFormat = DateFormat('yyyy-MM-dd');

  // DateTime转界面展示字符串
  static String toDisplayString(DateTime date) {
    return displayFormat.format(date);
  }

  // DateTime转数据库存储字符串
  static String toStorageString(DateTime date) {
    return storageFormat.format(date);
  }

  // 展示格式字符串转DateTime
  static DateTime parseDisplayString(String dateStr) {
    return displayFormat.parse(dateStr);
  }

  // 存储格式字符串转DateTime
  static DateTime parseStorageString(String dateStr) {
    return storageFormat.parse(dateStr);
  }
}

3. 日期选择组件改造（含自动保存） #

基于DatePicker改造，确保界面展示正确格式，同时自动保存时转换为存储格式：

import 'package:flutter/material.dart';

class DateRangePicker extends StatefulWidget {
  final Function(String startStorageDate, String endStorageDate) onAutoSave;

  const DateRangePicker({super.key, required this.onAutoSave});

  @override
  State<DateRangePicker> createState() => _DateRangePickerState();
}

class _DateRangePickerState extends State<DateRangePicker> {
  DateTime? _selectedStartDate;
  DateTime? _selectedEndDate;

  // 界面展示的日期文本
  String get _startDateText => _selectedStartDate != null
      ? DateFormatter.toDisplayString(_selectedStartDate!)
      : '选择开始日期';
  String get _endDateText => _selectedEndDate != null
      ? DateFormatter.toDisplayString(_selectedEndDate!)
      : '选择结束日期';

  Future<void> _pickStartDate() async {
    final picked = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );
    if (picked != null && picked != _selectedStartDate) {
      setState(() => _selectedStartDate = picked);
      _triggerAutoSave();
    }
  }

  Future<void> _pickEndDate() async {
    final picked = await showDatePicker(
      context: context,
      initialDate: _selectedStartDate ?? DateTime.now(),
      firstDate: _selectedStartDate ?? DateTime(2000),
      lastDate: DateTime(2100),
    );
    if (picked != null && picked != _selectedEndDate) {
      setState(() => _selectedEndDate = picked);
      _triggerAutoSave();
    }
  }

  // 自动保存触发逻辑：仅当两个日期都选好时执行
  void _triggerAutoSave() {
    if (_selectedStartDate != null && _selectedEndDate != null) {
      final startStorage = DateFormatter.toStorageString(_selectedStartDate!);
      final endStorage = DateFormatter.toStorageString(_selectedEndDate!);
      widget.onAutoSave(startStorage, endStorage);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: _pickStartDate,
          child: Text(_startDateText),
        ),
        const SizedBox(width: 16),
        ElevatedButton(
          onPressed: _pickEndDate,
          child: Text(_endDateText),
        ),
      ],
    );
  }
}

4. 页面集成示例 #

在业务页面中使用该组件，并对接数据库保存逻辑：

class DateManagePage extends StatelessWidget {
  const DateManagePage({super.key});

  // 模拟数据库保存方法
  void _saveToDb(String startDate, String endDate) {
    // 替换为实际的数据库插入/更新操作
    print('已保存到数据库：开始日期=$startDate，结束日期=$endDate');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('日期范围选择')),
      body: Center(
        child: DateRangePicker(onAutoSave: _saveToDb),
      ),
    );
  }
}

代码审核说明 #

• 格式逻辑统一封装，避免散落在业务代码中，后续修改格式只需改工具类
• 界面展示与存储格式完全分离，不会出现格式混淆的问题
• 自动保存仅在两个日期都选择完成后触发，避免无效的数据库操作
• 结束日期选择时限制不能早于开始日期，提升用户体验

内容的提问来源于stack exchange，提问作者sonam srivastava