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

Overview

DatePickerTimeline

Pub

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

How To Use

Import the following package in your dart file

import 'package:date_picker_timeline/date_picker_timeline.dart';

Usage

This version is breaking backwards compatibility

Use the DatePicker Widget

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      DatePicker(
        DateTime.now(),
        initialSelectedDate: DateTime.now(),
        selectionColor: Colors.black,
        selectedTextColor: Colors.white,
        onDateChange: (date) {
          // New date selected
          setState(() {
            _selectedValue = date;
          });
        },
      ),
    ],
)
Constructor:
DatePicker(
    this.startDate, {
    Key key,
    this.width,
    this.height,
    this.controller,
    this.monthTextStyle,
    this.dayTextStyle,
    this.dateTextStyle,
    this.selectedTextColor,
    this.selectionColor,
    this.deactivatedColor,
    this.initialSelectedDate,
    this.activeDates,
    this.inactiveDates,
    this.daysCount,
    this.onDateChange,
    this.locale = "en_US",
}) : super(key: key);

Author

Contributors

Comments
  • JumpToSelection

    JumpToSelection

    Is your feature request related to a problem? Please describe. The problem is in the beginning because users must go in the selected date when the DatePicker has appeared and for the moment we only can go in the selected date after we use _controller.jumpToSelection(); in DatePicker View.

    Describe the solution you'd like Maybe we can call _controller.jumpToSelection() in initState

    good first issue 
    opened by kristimeculi 24
  • Width issues between android and ios

    Width issues between android and ios

    I have the calendar selector in a simple Container, on iOS is fits perfect, on Android Pixel 3 Simulator, the width is too small

    @override
      Widget build(BuildContext context) {
    
        return Container(
          height:90,
          decoration: BoxDecoration(
            color: Colors.white,
          ),
          padding: const EdgeInsets.only(top: 4, bottom:5, left: 10, right: 10),
    
          child: DatePickerTimeline(
            _currentSelection,
            dateSize: 20,
            daySize: 10,
            monthSize: 10,
            selectionColor: Colors.grey[200],
            monthColor: Colors.grey[500],
            onDateChange: (date) {
              _selectDate(date);
            },
          )
        );
      }
    

    Expected behavior

    Between both devices I expected the same edge to edge layout,. It doesnt seem to be inheriting font styles on Android either (right screen)

    Screenshots

    https://pasteboard.co/IxHH3qh.jpg

    bug 
    opened by peazz 15
  • Select dates from the past

    Select dates from the past

    Is your feature request related to a problem? Please describe. I am wanting to use this fantastic widget to select dates from the past. At present it seems to only work for future dates.

    Describe the solution you'd like Perhaps you could add a stateDate parameter that is set to today by default.

    Describe alternatives you've considered Fork the code and add the feature.

    Additional context

    opened by mrwwalmsley 13
  • Making the ListView Scrollable to the Right *and* to the Left

    Making the ListView Scrollable to the Right *and* to the Left

    Apparently, you can scrolll to the left by simply replacing ListView by InfiniteListView (Issue #10), which comes from another package called infinite_listview.

    I think you will need to add the infinite_listview to the pubspec.yaml file (PR #13), but I'm not sure β€” I'm not experienced with putting packages inside packages.

    I would suggest testing if this does fill all of the requirements. Perhaps putting it into another branch might be more appropriate.

    opened by psygo 7
  • Jump to specific date?

    Jump to specific date?

    Hey guys,

    first we really enjoy your work and love the datepicker timeline.

    We are searching for a feature to jump to a specific date. Example: timeline is on 01.01.2020, users press a button with "12.12.2020" and the timeline jumps to this date immediately.

    Do you have any idea or implementation for this? Would be very helpful for lots of users we think.

    Thanks for your attention.

    opened by chschroe 5
  • JumpToSelection() offset has issues.

    JumpToSelection() offset has issues.

    Describe the bug

    the JumpToSelection() function takes the time into consideration causing offset values to change during different times.

    To Reproduce

    Create a startDate to be of the format "YYYY-MM-DD 00:00:00" select initialSelectedDate as DateTime.now() over the course of the day, on calling the JumpToSelection() for the first time via a separate button, the timeline will jump from to the date +1 value ( ex: if today is may 11th, JumpToSelection() will jump to May 12th after a period of the day has passed)

    Expected behavior

    A clear and concise description of what you expected to happen. on initial jump, the timeline should jump to the initialSelectedDate Value

    Screenshots

    If applicable, add screenshots to help explain your problem.

    ezgif-3-d1001ca39879

    also, this weird thing happens, I'm not sure why :

    ezgif-3-3c6cb3f8f3af

    Additional context Add any other context about the problem here.

    code used by me :

      DateTime _selectedDate = DateTime.now();
    .
    .
    .
    DatePickerController _dpc = new DatePickerController();
    .
    .
    .
    DatePicker(
                              _startDate,
                              controller: _dpc,
                              initialSelectedDate: _selectedDate,
                              width: Size_Config.blockSizeHorizontal * 15,
                              height: Size_Config.blockSizeVertical * 12,
                              monthTextStyle: TextStyle(
                                  fontFamily: 'Montserrat',
                                  color: Colors.white54,
                                  fontSize: Size_Config.blockSizeHorizontal * 3),
                              dateTextStyle: TextStyle(
                                  fontFamily: 'MontSerrat',
                                  fontSize: Size_Config.blockSizeHorizontal * 5,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white54),
                              dayTextStyle: TextStyle(
                                  fontFamily: 'Montserrat',
                                  color: Colors.white54,
                                  fontSize: Size_Config.blockSizeHorizontal * 3),
                              onDateChange: (date) {
                                _pc.open();
                                setState(() {
                                  _selectedDate = date;
                                });
                              },
                            ),
    .
    .
    .
    IconButton(
                                      onPressed: () {
                                        _dpc.animateToSelection();
                                      },
                                      icon: Icon(CustomIcons.filter),
                                      color: Colors.white54,
                                      //iconSize: 40,
                                    ),
    opened by amith-patil 5
  • please add minDate & maxDate option

    please add minDate & maxDate option

    Is your feature request related to a problem? Please describe. Yes, I need to set min & max dates to show in the list, not confused with currentDate. For example, I want today must be the max date, thus user can only scroll to past dates and prevent user from selecting future dates.

    Describe the solution you'd like Please add minDate and maxdate in the constructor as optional.

    Describe alternatives you've considered Or maybe as an alternative also add type with value "future" (calendar will show current & future dates) or "past" (calendar will show current & past dates).

    Additional context Nothing.

    opened by topex-psy 5
  • Passing date to DatePickerTimeline does not work

    Passing date to DatePickerTimeline does not work

    DateTime _currentSelection = new DateTime.now().add(Duration(days: 2))
    
    DatePickerTimeline(
            _currentSelection,
            dateSize: 20,
            daySize: 10,
            monthSize: 10,
            selectionColor: Colors.grey[200],
            monthColor: Colors.grey[500],
            onDateChange: (date) {
              _selectDate(date);
            },
          )
    

    Selector does not change, it stays on today

    bug 
    opened by peazz 4
  • Hello how to implement  a last date?

    Hello how to implement a last date?

    Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

    Describe the solution you'd like A clear and concise description of what you want to happen.

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

    Additional context Add any other context or screenshots about the feature request here.

    opened by pjjy 3
  • Add button to slide back to Today's date

    Add button to slide back to Today's date

    Is your feature request related to a problem? Please describe.

    I want to ask if the package has the feature where we can have a button to automatically slide back straight to today's date after sliding to some date far away from today's one.

    Describe the solution you'd like

    If the feature does not exist, please I am requesting to add it.

    Describe alternatives you've considered

    If the proposed feature is not worth to be implemented, I would like to get some tips on how I can do it myself with my custom methods without altering the package.

    Additional context

    N/A

    opened by coolbeatz71 3
  • Using `notifyListeners()` inside `onDateChange` not working

    Using `notifyListeners()` inside `onDateChange` not working

    Describe the bug

    Whenever the user changes the calendar date, something should happen in my program. At least a class I created to store my screen's data should change. In order to do so, I'm calling a method that changes the internal data and then calling notifyListeners() to update other fields. However, if I use notifyListeners(), the selected date on the calendar doesn't change; the data does change, but not the selected rectangle on the screen.

    To Reproduce

    The code in my app is quite long, but I believe the following should suffice...

    The DatePickerTimeline call:

    DatePickerTimeline(
      DateTime.now(),
      onDateChange: (newDate){
        data.changeDay(date: newDate);
      }
    

    The method to update the data is something like:

    void changeDay({DateTime date}){
      this.day = date;
      notifyListeners();
    }
    

    Expected behavior

    Why is the selected rectangle not being selected? I've also tried to refactor the code to use the Provider package instead of setState() but it didn't work either.

    Desktop (please complete the following information):

    • OS: Windows 10
    • Browser: Firefox

    Smartphone (please complete the following information):

    • Device: Nexus 6
    • OS: Android 9.0
    opened by psygo 3
  • Show dates in reverse order

    Show dates in reverse order

    Now if someone wants to display dates in reverse order, it could be done just by adding one argument

    DatePicker(
       // rest of code
      reverseDays: true,
    )
    
    opened by ajinzrathod 0
  • when i move to date with animateToDate, selection color still remain. How can I fix it?

    when i move to date with animateToDate, selection color still remain. How can I fix it?

    Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

    Describe the solution you'd like A clear and concise description of what you want to happen.

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

    Additional context Add any other context or screenshots about the feature request here.

    opened by gamcho3 1
  • why don't you do focus center when date clicked?

    why don't you do focus center when date clicked?

    Is your feature request related to a problem? Please describe. I want to focus center when date clicked and focus initialSelectedDate when entered page.

    opened by gamcho3 0
  • Added didUpdateWidget. This function called whenever the widget configuration changes.

    Added didUpdateWidget. This function called whenever the widget configuration changes.

    If the parent widget rebuilds , the framework will update the [widget] property of this [State] object to refer to the new widget and then call this method with the previous widget as an argument.

    Override this method to respond when the [widget] changes.

    The framework always calls [build] after calling [didUpdateWidget], which means setState not required in thi function.

    I used this function update current date if it's change and animate to this date.

    opened by Husnain-Asharf 0
  • Hide deactivated dates widgets

    Hide deactivated dates widgets

    Allow hiding date widgets if that date is deactivated by wrapping your DateWidget in a Visibility widget. Let the user pass a boolean to decide if hiding or not.

    opened by gracecarrillo 0
Owner
Vivek Kaushik
Mobile App Developer.
Vivek Kaushik
Allows to use date pickers without dialog. Provides some customizable styles for date pickers.

flutter_date_pickers Allows to use date pickers without dialog. Provides some customizable styles for date pickers. A set of date pickers: DayPicker f

null 196 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 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
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
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
Flutter calendar app. register schedule and manage in calendar ui.

flutter calendar app. register schedule and manage in calendar ui. save schedule data in firestore. and create widget and read schedule from firestore in widget.

akiho 11 Oct 30, 2022
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
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
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
Beautiful Date Range Picker Dialog For Flutter

Beautiful Date Range Picker Dialog For Flutter

Mazouzi Aymene 36 Dec 22, 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
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
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 persian (farsi,shamsi) datetime picker for flutter, inspired by material datetime picker.

?? A persian (farsi,shamsi) datetime picker for flutter, inspired by material datetime picker. Persian datetime picker inspired by material datetime p

Persian Flutter Community 142 Dec 19, 2022
Timeline editor for flutter

timeline_editor Early version of a timeline editor. Support: Move of element Context menu Zoom of timeline Progress indicator track boxes continuous t

Arnaud Jezequel 14 Apr 19, 2022
Calendar widget library for Flutter apps.

Calendarro Calendar widget library for Flutter apps. Offers multiple ways to customize the widget. Getting Started Installation Add dependency to your

Adam Styrc 97 Nov 30, 2022
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
Calendar widget for flutter

Calendar Shows a scrolling calendar list of events. This is still relatively basic, it always assumes that the getEvents returns the entire list of ca

null 223 Dec 19, 2022