Jorge SinCodigo
Jorge SinCodigo
Ambassador
·Top 0.1% Flutterflow Developer

Date range picker

Preview





Package: https://pub.dev/packages/syncfusion_flutter_datepicker
Name
: SfCalendar
Dependency: syncfusion_flutter_datepicker: ^20.2.49

Important

  1. You must create two localState startDate and endDate of type Timestamp

  2. It is possible to translate this widget, but I couldn't get it to work, here the documentation https://help.syncfusion.com/flutter/calendar/localization

import 'package:syncfusion_flutter_datepicker/datepicker.dart';

class SfCalendar extends StatefulWidget {
  const SfCalendar({
    Key? key,
    this.width,
    this.height,
  }) : super(key: key);

  final double? width;
  final double? height;

  @override
  _SfCalendarState createState() => _SfCalendarState();
}

class _SfCalendarState extends State<SfCalendar> {
  void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) {
    // TODO: implement your code here
    setState(() {
      if (args.value is PickerDateRange) {
        FFAppState().startDate =args.value.startDate; //Create a localState of type Timestamp called start Date
        FFAppState().endDate = (args.value.endDate ?? args.value.startDate); //Create a localState of type Timestamp called endDate
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: SfDateRangePicker(
        view: DateRangePickerView
            .year, //You can use year or month view
        monthViewSettings: DateRangePickerMonthViewSettings(
            firstDayOfWeek:
                1), //Choose the first day of the week in the MONTH view 1 Monday, 2 Tuesday...
        selectionMode: DateRangePickerSelectionMode.range,
        onSelectionChanged: _onSelectionChanged, //Single, multiple o range mode
      ),
    );
  }
}
4
17 replies