**view: DateRangePickerView**控制初始显示的视图层级
SfDateRangePicker(
view: DateRangePickerView.month, // 默认:月视图
// 可选值:
// - DateRangePickerView.month (显示月份)
// - DateRangePickerView.year (显示年份)
// - DateRangePickerView.decade (显示十年)
// - DateRangePickerView.century (显示世纪)
)
**enableMultiView: bool**是否显示双月视图(并排显示两个月)
SfDateRangePicker(
enableMultiView: true, // 显示两个月份
viewSpacing: 20, // 两个视图之间的间距
)仅当 `view` 为 `month` 时生效
**viewSpacing: double**双月视图之间的间距(像素)
SfDateRangePicker(
initialDisplayDate: DateTime(2024, 6, 15), // 默认显示2024年6月
// 注意:这不会影响选择,只影响显示位置
)
**initialDisplayDate: DateTime**设置组件初始显示的日期。
SfDateRangePicker(
initialDisplayDate: DateTime(2024, 6, 15), // 默认显示2024年6月
// 注意:这不会影响选择,只影响显示位置
)
**showNavigationArrow: bool**是否显示月份导航箭头。
SfDateRangePicker(
showNavigationArrow: true, // 显示 < 和 > 按钮
// 如果设置为false,用户只能通过点击月份标题来切换视图
)
**allowViewNavigation: bool**是否允许视图导航。
SfDateRangePicker(
allowViewNavigation: true, // 允许点击月份标题切换到年视图
// 如果设置为false,用户无法切换视图层级
)
minDate: DateTime 和 **maxDate: DateTime**设置可选日期范围
SfDateRangePicker(
minDate: DateTime(2024, 1, 1), // 最早可选2024-01-01
maxDate: DateTime(2024, 12, 31), // 最晚可选2024-12-31
// 超出范围的日期会被禁用
)
**enablePastDates: bool**是否允许选择过去的日期。
SfDateRangePicker(
enablePastDates: false, // 禁用所有今天之前的日期
// 相当于 minDate: DateTime.now()
)
**selectionMode: DateRangePickerSelectionMode**设置选择模式
SfDateRangePicker(
selectionMode: DateRangePickerSelectionMode.single,
// 可选值:
// - single: 单选一个日期
// - multiple: 多选多个日期
// - range: 选择一个日期范围
// - extended: 扩展范围选择(工作日选择等)
)
// 1. 单选模式
selectionMode: DateRangePickerSelectionMode.single,
initialSelectedDate: DateTime(2024, 5, 15),
// 2. 多选模式
selectionMode: DateRangePickerSelectionMode.multiple,
initialSelectedDates: [
DateTime(2024, 5, 15),
DateTime(2024, 5, 20),
DateTime(2024, 5, 25),
],
// 3. 范围选择模式
selectionMode: DateRangePickerSelectionMode.range,
initialSelectedRange: PickerDateRange(
DateTime(2024, 5, 10),
DateTime(2024, 5, 20),
),
**showActionButtons: bool**是否显示底部的操作按钮(确定/取消)
SfDateRangePicker(
enableSwipingSelection: true,
// 当 selectionMode 为 range 时,可以通过滑动选择范围
)
**toggleDaySelection: bool**点击已选中的日期时是否取消选择(仅对 single 和 multiple 模式有效)
SfDateRangePicker( toggleDaySelection: true, // 如果为true,点击已选中的日期会取消选择 // 如果为false,点击已选中的日期不会有反应 )
**selectionController: DateRangePickerController**通过控制器编程控制选择
class _MyDatePickerState extends State { final DateRangePickerController _controller = DateRangePickerController();
void _selectNextMonth() { _controller.forward!(); // 切换到下个月 }
void _selectDate(DateTime date) { _controller.selectedDate = date; // 编程选择日期 }
@override Widget build(BuildContext context) { return Column( children: [ SfDateRangePicker( controller: _controller, ), ElevatedButton( onPressed: _selectNextMonth, child: Text('下个月'), ), ], ); } }
_controller.forward!()```
下个月
`_controller.backward!(),```
上个``