Allows to use date pickers without dialog. Provides some customizable styles for date pickers.

Overview

flutter_date_pickers

Actions Status Pub Likes Health Code size License: MIT GitHub stars

Allows to use date pickers without dialog. Provides some customizable styles for date pickers.

A set of date pickers:

  • DayPicker for one day
  • WeekPicker for whole week
  • RangePicker for random range
  • MonthPicker for month

How to style date picker

Every date picker constructor take a style object as a parameter (if no styles passed - defaults will be used).

For single value pickers (DayPicker, MonthPicker) it is DatePickerStyles object;

For range pickers (WeekPicker, RangePickers) it is DatePickerRangeStyles object;

Customizable styles: for all date pickers

Property Description
TextStyle displayedPeriodTitle title of the date picker
TextStyle currentDateStyle style for current date
TextStyle disabledDateStyle style for disabled dates (before first and after last date user can pick)
TextStyle selectedDateStyle style for selected date
BoxDecoration selectedSingleDateDecoration decoration for selected date in case single value is selected
TextStyle defaultDateTextStyle style for date which is neither current nor disabled nor selected
DayHeaderStyle dayHeaderStyle style for all weekday headers. For more control under weekday headers styles use dayHeaderStyleBuilder
DayHeaderStyleBuilder dayHeaderStyleBuilder builder to customize weekday header's style
DayHeaderTitleBuilder dayHeaderTitleBuilder builder to customize weekday header's title

only for range date pickers (WeekPicker, RangePicker)

Property Description
BoxDecoration selectedPeriodStartDecoration decoration for the first date of the selected range
BoxDecoration selectedPeriodLastDecoration decoration for the first date of the selected range
BoxDecoration selectedPeriodMiddleDecoration Decoration for the date of the selected range which is not first date and not end date of this range

How to make some dates not selectable date picker

By default only dates before firstDate and after lastDate are not selectable. But you can set custom disabled days. DayPicker, WeekPicker and RangePicker take a SelectableDayPredicate selectableDayPredicate where you can specify function which returns if some date is disabled or not.

If some date is disabled for selection it gets disabledDateStyle.

If selected range or week pretends to include such disabled date UnselectablePeriodException occurs. To handle it - pass onSelectionError callback to date picker.

How to make special decorations for some dates

By default cells are decorated with datePickerStyles slyles (or default if no styles was passed to date picker). If you need special decoration for some days use eventDecorationBuilder. Currently only for DayPicker, WeekPicker and RangePicker.

  • If date is not selected basic styles will be merged with styles from eventDecorationBuilder.
  • If date is current date styles from eventDecorationBuilder win (if there are).
  • Otherwise basic styles (datePickerStyles) win.

What time I will get after selection?

If one day selected: you will get start of the day (00:00:00) by default. If selected firstDate - you will get time of it.

If range/week selected: for start you will get start of the day (00:00:00) by default. If selected firstDate - you will get time of it. for end you will get end of the day (23:59:59.999) by default. If selected lastDate - you will get time of it.

If month selected: you will get start (00:00:00) of the 1 day of month by default. If selected month same as month of the firstDate - you will get firstDate.

Usage

// Create week date picker with passed parameters
Widget buildWeekDatePicker (DateTime selectedDate, DateTime firstAllowedDate, DateTime lastAllowedDate, ValueChanged<DatePeriod> onNewSelected) {

 // add some colors to default settings
    DatePickerRangeStyles styles = DatePickerRangeStyles(
      selectedPeriodLastDecoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(10.0),
              bottomRight: Radius.circular(10.0))),
      selectedPeriodStartDecoration: BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)),
      ),
      selectedPeriodMiddleDecoration: BoxDecoration(
          color: Colors.yellow, shape: BoxShape.rectangle),
    );
    
  return WeekPicker(
      selectedDate: selectedDate,
      onChanged: onNewSelected,
      firstDate: firstAllowedDate,
      lastDate: lastAllowedDate,
      datePickerStyles: styles
  );
}

Example app

Please checkout example.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Comments
  • _positions.isNotEmpty': ScrollController not attached to any scroll views.

    _positions.isNotEmpty': ScrollController not attached to any scroll views.

    [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 112 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views.

    opened by sumitrvi 14
  • Styles for end of the prev month and start of the next month

    Styles for end of the prev month and start of the next month

    Hey @MariaMelnik thankyou for this great package 👍

    when setting

    showNextMonthStart: true,
    showPrevMonthEnd: true,
    

    is there any way to change style for end of the prev month and start of the next month?

    i'm looking forward workaround for that case, thankyou

    opened by RizaldiWiratama 7
  • monthpicker not working

    monthpicker not working

    i want to select month but it give me error

                   Widget buildWeekDatePicker(DateTime selectedDate, DateTime firstAllowedDate,
      DateTime lastAllowedDate, ValueChanged<DatePeriod> onNewSelected) {
    // add some colors to default settings
    DatePickerRangeStyles styles = DatePickerRangeStyles(
      selectedPeriodLastDecoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(10.0),
              bottomRight: Radius.circular(10.0))),
      selectedPeriodStartDecoration: BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)),
      ),
      selectedPeriodMiddleDecoration:
          BoxDecoration(color: Colors.yellow, shape: BoxShape.rectangle),
    );
    
    return MonthPicker(//here monthpicker is not a function error i dont know what can i do
        selectedDate: selectedDate,
        onChanged: onNewSelected,
        firstDate: firstAllowedDate,
        lastDate: lastAllowedDate,
        datePickerStyles: styles);
     }
    
    opened by itsdani121 5
  • Missing month in RangePicker

    Missing month in RangePicker

    • Flutter 1.22.5

    • flutter_date_pickers: 0.1.10

    • Issue on RangePicker When scroll from 03/2021 to 04/2021, the calendar suddenly scroll to 05/2021, not show 04/2021 Press icon Previous Month in header, from 05/2021, the calendar cannot back to 04/2021 report

    opened by metajet98 5
  • Select time change date

    Select time change date

    Hi,

    In Europe we have time changes (one in october, one in march). If I want to select the 28th of march in the RangePicker, it will automatically generate a Period between the 28th and the 29th of march because the endPeriod is 2021-03-29 00:59.59.999. Can you please fix this? My timezone is (GMT +2).

    opened by xlamn 5
  • [RangePicker] Link between Circular BoxShape Start/End period and MiddlePeriod

    [RangePicker] Link between Circular BoxShape Start/End period and MiddlePeriod

    First of all amazing package !

    I'm encoutering a small problem with the BoxDecoration of the RangePicker. If I use a circular BoxShape for the selectedPeriod(Start/End)Decoration the background of the container keep it's white color leaving me with an ugly space between the selectedPeriod(Start/End) and the middlePeriod decoration.

    I'd like to fill half of the container background with the same color as the middlePeriod to make it better looking.

    Here is what I have because an image is worth a thousand words : image

    And here is what I want : image

    opened by HubnerJonathan 4
  • Can't select end date on other week

    Can't select end date on other week

    Hello,

    on the new version (0.1.0), I can't select an end date on an other week. Exemple: I select 02/15/2020 for first date and when I want to select 06/22/2020 for last date I can't.

    opened by fgrenot 4
  • Add ability to change selected date

    Add ability to change selected date

    Helo! In my case I should show the last date of the period inside range picker. So, this PR allows to set what actual date should be shown as initial page.

    Example usage:

    RangePicker(
              selectedDate: period.end,
              selectedPeriod: period,
    ...
    
    opened by defint 4
  • Wishlist: allow providing custom style/decoration for each day

    Wishlist: allow providing custom style/decoration for each day

    For range-pickers it is possible atm to set selectedPeriodStartDecoration, selectedPeriodMiddleDecoration and selectedPeriodLastDecoration.

    It would be very nice to have more flexibility here and be able to decorate each day independently (for example via builder-pattern, like BoxDecoration Function(DateTime dateTime))

    opened by JustSayBien 4
  • Assertion purpose.

    Assertion purpose.

    What is the purpose of this code? When I set the firstAllowedDate and selectedPeriod is today, it cause an error. assert(selectedPeriod.start.isAfter(firstDate) || selectedPeriod.start.isAtSameMomentAs(firstDate)),

    opened by glennmichaelmejias 4
  • Make this package compatible with Flutter 3.0.0

    Make this package compatible with Flutter 3.0.0

    This line causes a build warning: https://github.com/MariaMelnik/flutter_date_pickers/blob/e973c7d6b88b645413958a7f718e7d51fa26639d/lib/src/day_based_changable_picker.dart#L318

    See the release notes for a suggested fix: https://docs.flutter.dev/development/tools/sdk/release-notes/release-notes-3.0.0#if-you-see-warnings-about-bindings

    opened by th0rgall 3
  • RangePicker should not enforce first range selection

    RangePicker should not enforce first range selection

    Problem When adding a RangePicker, it enforces us to add "selectedPeriod".

    Suggested behavior: It should allow us to add null value for "selectedPeriod" so the user can select a desired period

    opened by iChicago 1
  • Allow empty selection for year_picker_selection, just like there is for month_picker_selection

    Allow empty selection for year_picker_selection, just like there is for month_picker_selection

    I see that for the months selection it is ok to have an empty selection, but I get an error if no year is selected for the 'years' page. Also, it would be nice to have the current year highlighted, like there is for 'months' page.

    opened by jalvespinto 3
  • Please add a TextStyle for dates outside the selected month

    Please add a TextStyle for dates outside the selected month

    When showNextMonthStart and/or showPrevMonthEnd are turned on, it would be fine to be able to display the added days in a different TextStyle. Please add it to DatePickerStyles.

    opened by ma-ruz 1
  • In MonthPicker, change the names of the displayed month

    In MonthPicker, change the names of the displayed month

    Month selector, is it possible to change the names of the displayed month? I have changed the locale to Spanish but I want to put without dot and with capitalice. Captura

    opened by david-jim 1
A pure dart package with collection of Nepali Utilities like Date converter, Date formatter, DateTime, Nepali Numbers, Nepali Unicode, Nepali Moments and many more.

Nepali Utilities for Dart A pure dart package with collection of Nepali Utilities like Date converter, Date formatter, DateTime, Nepali Number, Nepali

Sarbagya Dhaubanjar 23 Nov 22, 2022
Flutter Date Picker Library that provides a calendar as a horizontal timeline.

DatePickerTimeline Flutter Date Picker Library that provides a calendar as a horizontal timeline. How To Use Import the following package in your dart

LiLi 0 Oct 25, 2021
Flutter Date Picker Library that provides a calendar as a horizontal timeline

Flutter Date Picker Library that provides a calendar as a horizontal timeline.

Vivek Kaushik 214 Jan 7, 2023
A Flutter package for adding a DateRange widget into a form. A date picker UX is provided by showDateRangePicker.

A Flutter package for adding a DateRange widget into a form. A date picker UX is provided by showDateRangePicker.

JMA Consulting 9 Mar 12, 2022
Flutter Cupertino Date Picker

Flutter Cupertino Date Picker [pub packages] | 中文说明 Flutter cupertino date picker. Usage 1. Depend Add this to you package's pubspec.yaml file: depend

Ryuuzaki 0 Nov 9, 2021
Flutter package to create a day date scroller

scrolling_day_calendar A flutter calendar package to allow users to scroll through given dates either by swiping left and right or pressing the arrows

null 8 Jul 12, 2020
A DateTime picker that lets user to select a date and the time, with start & end as a range

Omni DateTime Picker A DateTime picker that lets user to select a date and the time, with start & end as a range. Screenshots Getting started Add this

null 17 Dec 29, 2022
Datetime picker formfield - A Flutter widget that wraps a TextFormField and integrates the date and/or time picker dialogs.

DateTimeField A TextFormField that emits DateTimes and helps show Material, Cupertino, and other style picker dialogs. Example See the example tab (ex

Jacob Phillips 182 Dec 1, 2022
A flutter date time picker

Flutter Datetime Picker (Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date / time

Realank 559 Dec 26, 2022
Flutter Date & Time Range Picker

F-DateTimeRangePicker Date and Time Range Picker for Flutter Installing: dependencies: f_datetimerangepicker: ^0.2.0 Using: import 'package:f_datet

Long Phan 20 Jan 18, 2022
Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly customizable.

flutter_calendar_carousel Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly c

dooboolab 750 Jan 7, 2023
Highly customizable, feature-packed calendar widget for Flutter

Table Calendar Highly customizable, feature-packed Flutter Calendar with gestures, animations and multiple formats. Table Calendar with custom styles

Aleksander Woźniak 1.5k Jan 7, 2023
Highly customizable, feature-packed calendar works like google calendar but with more features.

Beca [In Progress] Beca is a Calendar that you could manage your daily tasks and schedule meetings with your friends just like google calendar Concept

Mohammad Javad Hossieni 19 Nov 15, 2022
CalendarDatePicker2 - A lightweight and customizable calendar picker based on Flutter CalendarDatePicker

A lightweight and customizable calendar picker based on Flutter CalendarDatePicker, with support for single date picker, range picker and multi picker.

Neo Liu 27 Dec 22, 2022
A Flutter package allows you to easily implement all calendar UI and calendar event functionality. 👌🔝🎉

calendar_view A Flutter package allows you to easily implement all calendar UI and calendar event functionality. For web demo visit Calendar View Exam

Simform Solutions 219 Dec 22, 2022
Easy to use and beautiful calendar strip component for Flutter.

Flutter Calendar Strip Easy to use and beautiful calendar strip component for Flutter. Awesome celender widget If this project has helped you out, ple

Siddharth V 176 Dec 14, 2022
Flutter date range pickers use a dialog window to select a range of date on mobile.

[Deprecated] Date Range Picker Currently Flutter has supported date range picker, so I think my mission is done. Thanks for using my lib. Link: https:

null 225 Dec 28, 2022
A TabBarController that is easy to use for flutter developers. 🥰 It supports various styles of page navigation, and you can also use it to customize your favorite styles. 🍻🍻

easy_tab_controller A user-friendly TabBarController widget for flutter developer. Getting Started This project is a starting point for a Flutter plug

圆号本昊 3 May 26, 2022
Flutter widget form select a date in horizontal timeline with customizable styles.

Flutter widget form select a date in horizontal timeline with customizable styles. Getting Started You can use this package when you need to add a dat

Jose Manuel Márquez 158 Dec 2, 2022
SKAlertDialog - A highly customizable, powerful and easy-to-use alert dialog for Flutter.

SKAlertDialog A highly customizable, powerful and easy-to-use alert dialog for Flutter. GIF Screenshots SKAlertDialog Basic Alert Alert with buttons A

Senthil_Kumar 7 May 18, 2022