Flutter如何同时选择时间和日历

在Flutter中，如何实现一个同时支持选择日期和时间的功能？我希望用户能在同一个界面中通过日历选择日期，并通过时间选择器选择具体时间，类似一些预约系统的功能。目前看到的大多数插件都是分开实现的，有没有推荐的组件或方法可以整合这两者？最好能支持自定义UI样式。

2 回复

Flutter中可使用showDateRangePicker选择日期范围，showTimePicker选择时间。结合两者实现同时选择日期和时间。

更多关于Flutter如何同时选择时间和日历的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中同时选择时间和日期，可以使用showDatePicker结合自定义时间选择器，或者使用第三方库来实现更完整的功能。以下是两种实现方法：

方法一：使用官方showDatePicker + 自定义时间选择

Future<DateTime?> selectDateTime(BuildContext context) async {
  // 1. 先选择日期
  DateTime? selectedDate = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2100),
  );

  if (selectedDate == null) return null;

  // 2. 再选择时间
  TimeOfDay? selectedTime = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  );

  if (selectedTime == null) return null;

  // 3. 合并日期和时间
  return DateTime(
    selectedDate.year,
    selectedDate.month,
    selectedDate.day,
    selectedTime.hour,
    selectedTime.minute,
  );
}

// 调用示例
ElevatedButton(
  onPressed: () async {
    DateTime? picked = await selectDateTime(context);
    if (picked != null) {
      print("选择的时间: $picked");
    }
  },
  child: Text('选择日期和时间'),
)

方法二：使用第三方库（推荐）

在pubspec.yaml中添加依赖：

dependencies:
  flutter_datetime_picker: ^1.5.1

使用示例：

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

ElevatedButton(
  onPressed: () {
    DatePicker.showDateTimePicker(
      context,
      showTitleActions: true,
      onConfirm: (date) {
        print('选择的时间: $date');
      },
      currentTime: DateTime.now(),
    );
  },
  child: Text('选择日期和时间'),
)

主要特点：

  • 方法一：分两步选择，但完全使用官方组件
  • 方法二：一键集成，界面统一，支持更多自定义选项

推荐使用第二种方法，因为它提供了更好的用户体验和更完整的日期时间选择功能。

回到顶部