限制日期选择器颤动中选定日期的范围

Question

我正在构建预订应用程序，目前我面临这个问题，用户可以使用

ShowDateRangePicker

、

showDateRangePicker

选择日期范围，但是用户可以选择开始日期和结束日期内的任何范围，但我要求不要让用户选择超过 14 天。例如：

开始日期 = 12/2/2023 结束日期 = 1/1/2024

用户选择的范围：12/2/2023 - 28/2/2023 在这种情况下，它应该抛出错误，因为范围超出了 14 天的限制。

the difference in range exceeded 14.

或者更好的一个，当用户达到起始日期 + 14 时，它将停止允许他们选择更多天。

Answer 1

您可以使用 syncfusion_flutter_datepicker 库。它有一个

selectionChanged

回调，您可以操纵它来限制移动中的可选日期。下面的代码片段显示了如何将范围限制为从选定的

_start

天算起的 14 天。

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final DateTime _minDate = DateTime.now();
  DateTime _maxDate = DateTime.now().add(const Duration(days: 365));

  final Duration _duration = const Duration(days: 14);

  DateTime _start = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: SfDateRangePicker(
        minDate: _minDate,
        maxDate: _maxDate,
        selectionMode: DateRangePickerSelectionMode.range,
        onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
          if (args.value is PickerDateRange) {
            _start = (args.value as PickerDateRange).startDate!;
            setState(() {
              // limit the maxDate to 14 days from selected date
              _maxDate = _start.add(_duration);
            });
          }
        },
      )),
    );
  }
}

有关更多定制，请参阅文档。

Answer 2

在SfDateRangePicker中设置一个DateRangePickerController，然后在onSelectionChanged上将该控制器的selectedDates设置为14天的列表，然后控制器将不允许您选择第15个条目。下面是

DateRangePickerSelectionMode.multiple

的代码，您可以应用DateRangePickerSelectionMode.range 的逻辑相同

List<DateTime> listOfDates = [];
late DateRangePickerController dController;

@override
void initState() {
  super.initState();
  dController = DateRangePickerController();
}

..........

SfDateRangePicker(
  controller: dController,
  onSelectionChanged: _onSelectionChanged,
  selectionMode: DateRangePickerSelectionMode.multiple,
  showNavigationArrow: true,
  toggleDaySelection: true,
  showActionButtons: true,
  enablePastDates: false,
  maxDate: DateTime(now.year + 3, 12),
  initialSelectedDates: selectedDates,
),

..........

_onSelectionChanged(DateRangePickerSelectionChangedArgs args){
  if(args.value.length <= 14){
    listOfDates = args.value;
  } else {
    setState(() {
      dController.selectedDates = listOfDates;
    });
  }
 }