Flutter待办清单App：如何隐藏日期中的时分秒？

要解决日期显示包含时分秒的问题，你只需要格式化DateTime对象的输出即可，这里提供两种简单方案：

方案1：手动拼接年月日（无需额外依赖） #

直接提取DateTime的年、月、日属性，拼接成你需要的格式，用padLeft(2, '0')保证月份和日期是两位数（比如1月显示为01）：

替换原来的日期显示代码：

Row(
  children: [
    const Text(
      "You selected: ",
      style: TextStyle(fontSize: 20),
    ),
    Text(
      // 这里修改为手动拼接的格式
      '${initialDate.year}-${initialDate.month.toString().padLeft(2, '0')}-${initialDate.day.toString().padLeft(2, '0')}',
      style: const TextStyle(fontSize: 20),
    ),
  ],
),

方案2：使用intl包格式化（更灵活） #

如果需要更多格式选项（比如中文格式2024年05月20日），可以用官方推荐的intl包：

1. 在pubspec.yaml的dependencies下添加依赖：

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.18.1 # 适配Flutter 3.7.8的版本

2. 在页面顶部导入包：

import 'package:intl/intl.dart';

3. 修改日期显示代码：

Row(
  children: [
    const Text(
      "You selected: ",
      style: TextStyle(fontSize: 20),
    ),
    Text(
      // 使用DateFormat格式化，支持多种格式
      DateFormat('yyyy-MM-dd').format(initialDate),
      // 中文格式可以写成：DateFormat('yyyy年MM月dd日').format(initialDate)
      style: const TextStyle(fontSize: 20),
    ),
  ],
),

修改后的完整代码 #

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
// 如果用方案2，添加这行导入
// import 'package:intl/intl.dart';

class AddTaskScreen extends StatefulWidget {
  const AddTaskScreen({super.key});

  @override
  State<AddTaskScreen> createState() => _AddTaskScreenState();
}

class _AddTaskScreenState extends State<AddTaskScreen> {
  bool isshow = false;
  var initialDate = DateTime.now();

  Future<void> _selectDate(BuildContext context) async {
    final pickedDate = await showDatePicker(
        context: context,
        initialDate: initialDate,
        firstDate: DateTime.now(),
        lastDate: DateTime(2100));
    if (pickedDate != null && pickedDate != initialDate)
      setState(() {
        initialDate = pickedDate;
      });
  }

  @override
  Widget build(context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.asset(
              'assets/images/rocket.jpg',
            ),
            const SizedBox(
              height: 30,
            ),
            const SizedBox(
              width: 370,
              child: TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Add new task',
                ),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            Visibility(
              visible: isshow,
              child: const SizedBox(
                width: 370,
                child: TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Add details',
                  ),
                ),
              ),
            ),
            Row(
              children: [
                const Text(
                  "You selected: ",
                  style: TextStyle(fontSize: 20),
                ),
                Text(
                  // 这里替换为格式化后的日期
                  '${initialDate.year}-${initialDate.month.toString().padLeft(2, '0')}-${initialDate.day.toString().padLeft(2, '0')}',
                  // 方案2的写法：DateFormat('yyyy-MM-dd').format(initialDate),
                  style: const TextStyle(fontSize: 20),
                ),
              ],
            ),
            Row(
              children: [
                Column(
                  children: [
                    Row(
                      children: [
                        IconButton(
                            onPressed: () {
                              setState(
                                () {
                                  isshow = !isshow;
                                },
                              );
                            },
                            icon: const Icon(Icons.sort)),
                        IconButton(
                          onPressed: () => _selectDate(context),
                          icon: const Icon(Icons.calendar_month),
                        ),
                      ],
                    ),
                  ],
                ),
                const SizedBox(
                  width: 150,
                ),
                Column(
                  children: [
                    Row(
                      children: [
                        TextButton(
                          onPressed: () {},
                          child: const Text(
                            "Add Task",
                            style: TextStyle(
                                fontSize: 15,
                                color: Color.fromARGB(255, 12, 130, 226)),
                          ),
                        ),
                        TextButton(
                          onPressed: () => Navigator.pop(context),
                          child: const Text(
                            "Cancel",
                            style: TextStyle(
                                fontSize: 15,
                                color: Color.fromARGB(255, 12, 130, 226)),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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