Flutter中如何在TextFormField显示当前日期和时间？

你当前使用的showTimePicker仅支持时间选择，要实现日期+时间的选择并显示，可通过结合原生日期选择器与时间选择器来完成，以下是具体实现方案：

实现逻辑 #

1. 先调用showDatePicker让用户选择日期
2. 再调用showTimePicker让用户选择时间
3. 将选中的日期和时间合并为完整的DateTime对象
4. 通过DateFormat将DateTime格式化为包含日期和时间的字符串，赋值给输入框控制器

修改后的完整代码片段 #

Expanded(
  child: Padding(
    padding: const EdgeInsets.all(10),
    child: TextFormField(
      onTap: () async {
        // 第一步：选择日期
        DateTime? pickedDate = await showDatePicker(
          context: context,
          initialDate: DateTime.now(),
          firstDate: DateTime(2000),
          lastDate: DateTime(2100),
        );

        if (pickedDate != null) {
          // 第二步：选择时间
          TimeOfDay? pickedTime = await showTimePicker(
            context: context,
            initialTime: TimeOfDay.now(),
            initialEntryMode: TimePickerEntryMode.dial,
          );

          if (pickedTime != null) {
            // 合并日期与时间
            DateTime selectedDateTime = DateTime(
              pickedDate.year,
              pickedDate.month,
              pickedDate.day,
              pickedTime.hour,
              pickedTime.minute,
            );

            setState(() {
              // 格式化为日期+时间字符串，可自定义格式
              addActivityStartTimeController.text =
                  DateFormat("yyyy-MM-dd hh:mm a").format(selectedDateTime);
            });
          }
        }
      },
      readOnly: true,
      minLines: 1,
      maxLines: 1,
      validator: (value) => addActivityStartTimeValidator(value!),
      controller: addActivityStartTimeController,
      cursorColor: Colors.black,
      style: GoogleFonts.outfit(fontSize: 16, color: Colors.black),
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.date_range_outlined), // 替换为日期图标更贴合功能
        alignLabelWithHint: true,
        filled: true,
        hintText: "2024-05-20 10:20 AM", // 更新提示文本为日期+时间格式
        hintStyle: GoogleFonts.outfit(
          textStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
          color: Colors.black54,
        ),
        fillColor: ColorConstants.backgroundColor,
        focusedErrorBorder: const OutlineInputBorder(
          borderSide: BorderSide.none,
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        errorBorder: const OutlineInputBorder(
          borderSide: BorderSide.none,
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        errorStyle: GoogleFonts.outfit(
          fontSize: 14.0,
          fontWeight: FontWeight.normal,
          color: Colors.red,
        ),
        focusedBorder: const OutlineInputBorder(
          borderSide: BorderSide.none,
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        border: const OutlineInputBorder(
          borderSide: BorderSide.none,
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
      ),
    ),
  ),
)

额外优化建议 #

1. 默认显示当前日期时间：初始化控制器时可直接设置初始值

final addActivityStartTimeController = TextEditingController(
  text: DateFormat("yyyy-MM-dd hh:mm a").format(DateTime.now()),
);

2. 自定义显示格式：可修改DateFormat参数调整输出样式，例如：
   • yyyy/MM/dd HH:mm：2024/05/20 22:30（24小时制）
   • MMM dd, yyyy hh:mm a：May 20, 2024 10:30 AM

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