flutter - 使用同步融合颤振日期选择器的垂直选择器

Question

我一直无法理解 Flutter 中的syncfusion_flutter_datepicker插件。

SfDateRangePicker(
  enableMultiView: true,
  navigationDirection: DateRangePickerNavigationDirection.vertical,
  selectionMode: DateRangePickerSelectionMode.multiRange,
  showNavigationArrow: true,
  initialSelectedDate: widget.start,
  initialSelectedDates: [widget.start,widget.end],
  
);

那么如何使用此插件返回开始日期和结束日期？我很混乱

标签： flutter

Answer 1

在 Flutter 日期范围选择器中，您可以使用 onSelectionChanged 回调参数的 startDate 和 endDate 属性获取所选范围的开始和结束日期。

在initState()中，设置默认值。

String _startDate, _endDate;
DateRangePickerController _controller;
DateTime _start, _end,_today;
 
@override
void initState() {
  _controller = DateRangePickerController();
  _startDate = DateFormat('dd, MMMM yyyy').format(DateTime.now()).toString();
  _endDate = DateFormat('dd, MMMM yyyy')
      .format(DateTime.now().add(Duration(days: 3)))
      .toString();
  _today=DateTime.now();
  _start = _today;
  _end = _today.add(Duration(days: 3));
  _controller.selectedRange = PickerDateRange(_start, _end);
  super.initState();
}

使用onSelectionChanged回调获取所选范围的 startDate 和 endDate。

void selectionChanged(DateRangePickerSelectionChangedArgs args) {
  setState(() {
    _startDate =
        DateFormat('dd, MMMM yyyy').format(args.value.startDate).toString();
    _endDate =
        DateFormat('dd, MMMM yyyy').format(args.value.endDate).toString();
  });
}

将 _startDate 和 _endDate 值分配给 Text 属性以显示这些值。

SfDateRangePicker(
  controller: _controller,
  selectionMode: DateRangePickerSelectionMode.range,
  onSelectionChanged: selectionChanged,
  allowViewNavigation: false,
);

如果您还有任何疑问，请参考我在下面提到的以下链接：

https://www.syncfusion.com/kb/12248/how-to-get-the-start-and-end-date-of-the-selected-range-in-the-flutter-date-range-picker