Flutter中如何为DateTimeRange设置最大15天的日期范围限制

要限制日期范围不超过15天，我们可以在用户选择完日期范围后进行校验，若超出限制则提示用户并拒绝更新；同时也可以在日期选择器中限制可选日期，避免用户选择不符合要求的范围。

修改步骤： #

1. 添加范围校验逻辑：计算所选日期的天数差，若超过14天（对应15天的时间跨度），则提示用户并放弃更新状态。
2. 修复日期重置bug：移除原代码中会将选择的日期立即重置为当天的延迟逻辑。
3. 可选限制：通过选择器参数动态限制可选日期（这里优先实现直观的校验提示方式）。

修改后的完整代码： #

class DateRangeView extends StatefulWidget {
  late bool isClearClicked;

  DateRangeView({Key? key, required this.isClearClicked}) : super(key: key);

  @override
  DateRangeView createState() => DateRangeViewState();
}

class DateRangeViewState extends State<DateRangeView> {
  DateTimeRange? dateRange;
  DateTimeRange? initialDateRange;
  DateTimeRange? newDateRange;

  // 定义最大允许的天数差（14天对应15天的时间跨度）
  static const int maxRangeDays = 14;

  String getFrom() {
    if (dateRange == null) {
      return DateTime.now().toRangeDate();
    } else {
      return dateRange!.start.toRangeDate();
    }
  }

  String getUntil() {
    if (dateRange == null) {
      return DateTime.now().toRangeDate();
    } else {
      return dateRange!.end.toRangeDate();
    }
  }

  @override
  Widget build(BuildContext context) {
    return HeaderWidget(
      title: Translation.current.period.toUpperCase(),
      child: Row(
        children: [
          Expanded(
            child: ButtonWidget(
              text: widget.isClearClicked
                  ? DateTime.now().toRangeDate()
                  : getFrom(),
              onClicked: () => pickDateRange(context),
            ),
          ),
          Text(Translation.current.untilDateKeyword.toUpperCase(),
            style:
            TextStyle(fontSize: ThemeSize.text(xl), color: ThemeColor.gray500),
          ),
          Expanded(
            child: ButtonWidget(
              text: widget.isClearClicked
                  ? DateTime.now().toRangeDate()
                  : getUntil(),
              onClicked: () => pickDateRange(context),
            ),
          ),
          Icon( Icons.calendar_month_rounded, color: ThemeColor.gray600,),
        ],
      ),
    );
  }

  Future pickDateRange(BuildContext context) async {
    initialDateRange = DateTimeRange(
      start: DateTime.now(),
      end: DateTime.now(),
    );
    newDateRange = await showDateRangePicker(
      initialEntryMode: DatePickerEntryMode.calendarOnly,
      context: context,
      firstDate: DateTime(2022),
      lastDate: DateTime(2030),
      initialDateRange: dateRange ?? initialDateRange,
      builder: (context, Widget? child) => Theme(
        data:ThemeData.light().copyWith(
          //Header background color
          primaryColor: ThemeColor.primaryVariant,
          scaffoldBackgroundColor: Colors.grey[50],
          dividerColor: Colors.grey,
          textTheme: TextTheme(
            bodyText2:
            TextStyle(color: ThemeColor.gray700, fontSize: ThemeSize.text(xxl)),
          ),
          colorScheme: ColorScheme.fromSwatch().copyWith(
            primary: ThemeColor.primaryVariant,
            onSurface: Colors.black,
          ),
        ),
        child: child!,
      ),
    );

    if (newDateRange == null) return;

    // 校验日期范围是否超过15天
    final rangeDays = newDateRange!.end.difference(newDateRange!.start).inDays;
    if (rangeDays > maxRangeDays) {
      // 提示用户范围超出限制
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('选择的日期范围不能超过15天')),
      );
      return;
    }

    setDateRange();
  }

  setDateRange() {
    setState(() {
      dateRange = newDateRange;
      widget.isClearClicked = false;
    });
    // 移除原有的延迟重置逻辑，否则选择的日期会被立即重置
    // Future.delayed(
    //   const Duration(milliseconds: 100), () {
    //     dateRange = initialDateRange;
    //   },
    // );
  }
}

额外说明： #

• 用maxRangeDays = 14控制最大跨度，比如2月2日到2月16日的天数差为14，刚好覆盖15天。
• 超出限制时通过SnackBar提示用户，且不会更新当前选中的日期范围。
• 移除了原代码中导致日期被立即重置的逻辑，这是需要修复的bug。

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