Multi Date Picker

pub Multi Date Picker

This package simplifies the process of picking dates from a calendar effortlessly. It offers the flexibility to choose single or multiple dates simply by toggling a boolean.

The package includes convenient features such as datesToExclude and selectedDate, which make implementing a check-in and check-out flow incredibly straightforward.

With this package, navigating the calendar and selecting dates becomes a piece of cake, providing you with the power to enhance your user experience.

Usage

The only two required arguments are the calendarStartDate and calendarEndDate. The difference between calendarStartDate and calendarEndDate in days should be greater than 0.

    import 'package:multi_date_picker/multi_date_picker.dart';

     MultiDatePicker(
        calendarStartDate: DateTime(2024),
        calendarEndDate: DateTime(2024, 4, 30),
    )

User more parameters to change -- usability, look, and feel of it.

The rest of the parameters are optional

startDate endDate datesToExclude selectedDates enableMultiSelect

With this in place, you can almost implement every requirement.

   import 'package:multi_date_picker/multi_date_picker.dart';

    MultiDatePicker(
        calendarStartDate: DateTime(2024),
        calendarEndDate: DateTime(2024, 4, 30),
        startDate: DateTime.now().subtract(const Duration(days: 30)),
        endDate: DateTime.now().add(const Duration(days: 30)),
        calendarStyleConfiguration: CalendarStyleConfiguration(
          backgroundColor: Colors.grey.shade800,
        ),
        datesToExclude: <DateTime>[
          DateTime.now().add(const Duration(days: 1)),
          DateTime.now().add(const Duration(days: 2)),
          DateTime.now().add(const Duration(days: 3)),
        ],
        enableMultiSelect: true,
        enableListener: false,
        onDateSelected: (List<DateTime> dates) {},
    ),

Available properties

Property Type Description
calendarStartDate DateTime This is the date from which the calendar is starting.
calendarEndDate DateTime This is the date at which the calendar is ending.
startDate DateTime? This is the date from which the user will be able to select the date.
endDate DateTime? This is the date after which the user will not be able to select any date.
onDateSelected Function(List This is the callback that will we trigger for the selected dates.
selectedDates List There are the already selected dates.
datesToExclude List There are the dates that you want to exclude from the available dates to select.
calendarStyleConfiguration CalendarStyleConfiguration? Use this object to style your calendar.
enableListener bool?
By default this will be true and this will call onDateSelected for every date selected
enableMultiSelect bool? Set this to true to enable multi-select

Upcoming changes

  • Enable drag to select
  • Range selection. For: Like when the user has to select a download bank statement they have to select a from and to.
  • Using app theme as default style configuration.
  • More customization options.
  • Tap on year to change the current year.
  • Allowing more control over the scroll behavior.
  • Introducing different layouts to view the calendar.

Author

This plugin is developed by Vikas Kumar, Senior Software Engineer at GeekyAnts.

Libraries

multi_date_picker