flutter_date_time_range_picker 0.0.1

A customizable date & time range picker for Flutter, based on date_range_picker with enhancements.

example/lib/main.dart

import 'package:flutter_date_range_picker/flutter_date_time_range_picker.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Date range picker example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Date range picker example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateRange? selectedDateRange;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              // const SizedBox(height: 100),
              // const Text("The simple field example:"),
              // Container(
              //   padding: const EdgeInsets.all(8),
              //   width: 250,
              //   child: DateRangeField(
              //     decoration: const InputDecoration(
              //       label: Text("Date range picker"),
              //       hintText: 'Please select a date range',
              //     ),
              //     onDateRangeSelected: (DateRange? value) {
              //       setState(() {
              //         selectedDateRange = value;
              //       });
              //     },
              //     selectedDateRange: selectedDateRange,
              //     pickerBuilder: datePickerBuilder,
              //   ),
              // ),
              const SizedBox(height: 100),
              const Text("The simple form field example:"),
              Container(
                padding: const EdgeInsets.all(8),
                width: 250,
                child: DateRangeFormField(
                  labelBuilder: (dateRange) {
                    return "Days between ${dateRange.start.toIso8601String().substring(0, 10)} and ${dateRange.end.toIso8601String().substring(0, 10)}: ${dateRange.duration} day(s)";
                  },
                  decoration: const InputDecoration(
                    label: Text("Date range picker"),
                    hintText: 'Please select a date and time range',
                  ),
                  pickerBuilder: (x, y) => datePickerBuilder(x, y, false),
                ),
              ),
              // const SizedBox(height: 50),
              // const Text("The decomposed widgets example :"),
              // const SizedBox(height: 20),
              // const Text("The date range picker widget:"),
              // const SizedBox(height: 20),
              // SizedBox(
              //   width: 576,
              //   child: DateRangePickerWidget(
              //     maximumDateRangeLength: 10,
              //     minimumDateRangeLength: 3,
              //     disabledDates: [DateTime(2023, 11, 20)],
              //     initialDisplayedDate: DateTime(2023, 11, 20),
              //     onDateRangeChanged: print,
              //   ),
              // ),
              // const SizedBox(height: 20),
              // const Text("The month selector:"),
              // SizedBox(
              //   width: 450,
              //   child: MonthSelectorAndDoubleIndicator(
              //     currentMonth: DateTime(2023, 11, 20),
              //     onNext: () => debugPrint("Next"),
              //     onPrevious: () => debugPrint("Previous"),
              //     nextMonth: DateTime(2023, 12, 20),
              //   ),
              // ),
              // const SizedBox(height: 20),
              // const Text("A button to open the picker:"),
              // TextButton(
              //   onPressed: () => showDateRangePickerModalDialog(
              //     context: context,
              //     builder: datePickerBuilder,
              //   ).then((value) {
              //     debugPrint("Selected date range: $value");
              //   }),
              //   child: const Text("Open the picker"),
              // ),
              // const SizedBox(height: 20),
              // const Text("The quick dateRanges:"),
              // SizedBox(
              //   width: 250,
              //   height: 100,
              //   child: QuickSelectorWidget(
              //     selectedDateRange: selectedDateRange,
              //     quickDateRanges: [
              //       QuickDateRange(
              //         label: 'Last 3 days',
              //         dateRange: DateRange(
              //           DateTime.now().subtract(
              //             const Duration(days: 3),
              //           ),
              //           DateTime.now(),
              //         ),
              //       ),
              //       QuickDateRange(
              //         label: 'Last 7 days',
              //         dateRange: DateRange(
              //           DateTime.now().subtract(
              //             const Duration(days: 7),
              //           ),
              //           DateTime.now(),
              //         ),
              //       ),
              //       QuickDateRange(
              //         label: 'Last 30 days',
              //         dateRange: DateRange(
              //           DateTime.now().subtract(
              //             const Duration(days: 30),
              //           ),
              //           DateTime.now(),
              //         ),
              //       ),
              //       QuickDateRange(
              //         label: 'Last 90 days',
              //         dateRange: DateRange(
              //           DateTime.now().subtract(
              //             const Duration(days: 90),
              //           ),
              //           DateTime.now(),
              //         ),
              //       ),
              //       QuickDateRange(
              //         label: 'Last 180 days',
              //         dateRange: DateRange(
              //           DateTime.now().subtract(
              //             const Duration(days: 180),
              //           ),
              //           DateTime.now(),
              //         ),
              //       ),
              //     ],
              //     onDateRangeChanged: print,
              //     theme: kTheme,
              //   ),
              // ),
            ],
          ),
        ));
  }

  Widget datePickerBuilder(
    BuildContext context,
    dynamic Function(DateRange?) onDateRangeChanged, [
    bool doubleMonth = true,
  ]) =>
      DateRangePickerWidget(
        firstDayOfWeek: 1, // 1 = Monday
        doubleMonth: doubleMonth,
        maximumDateRangeLength: 10,
        quickDateRanges: [
          QuickDateRange(dateRange: null, label: "Remove date range"),
          QuickDateRange(
            label: 'Last 3 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 3)),
              DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 7 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 7)),
              DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 30 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 30)),
              DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 90 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 90)),
              DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 180 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 180)),
              DateTime.now(),
            ),
          ),
        ],
        minimumDateRangeLength: 3,
        initialDateRange: selectedDateRange,
        disabledDates: [DateTime(2023, 11, 20)],
        maxDate: DateTime(2023, 12, 31),
        initialDisplayedDate:
            selectedDateRange?.start ?? DateTime(2023, 11, 20),
        onDateRangeChanged: onDateRangeChanged,
        height: 450,
        theme: const CalendarTheme(
          selectedColor: Colors.blue,
          dayNameTextStyle: TextStyle(color: Colors.black45, fontSize: 10),
          inRangeColor: Color(0xFFD9EDFA),
          inRangeTextStyle: TextStyle(color: Colors.blue),
          selectedTextStyle: TextStyle(color: Colors.white),
          todayTextStyle: TextStyle(fontWeight: FontWeight.bold),
          defaultTextStyle: TextStyle(color: Colors.black, fontSize: 12),
          radius: 10,
          tileSize: 40,
          disabledTextStyle: TextStyle(color: Colors.grey),
          quickDateRangeBackgroundColor: Color(0xFFFFF9F9),
          selectedQuickDateRangeColor: Colors.blue,
        ),
      );
}