Cool Datepicker Build with Flutter

Features

• It’s the best datepicker ui ever. (at least for me 😅)
• It’s possible to set all colors of datepicker
• Support selected date list at the bottom. User can move selected date to selected year and month.
• “COOL”

Samples

Installing

command:

 $ flutter pub add cool_datepicker

pubspec.yaml:

dependencies:
  cool_datepicker: ^(latest)

Usage

import 'package:cool_datepicker/cool_datepicker.dart';


    CoolDatepicker(onSelected: (_) {})

Important options

option	Type	Default	Description
onSelected	Function	required	when user selects dates and then click the ok button, it’s triggered. You must put one parameter in the Function. (ex. onChange: (a) {}).Then, you will get return List<DateTime> / Map<String, DateTime>
defaultValue	List<DateTime> / Map<String, DateTime>	null	Default selected dates. It will automatically detects single/range depends on which type you use
disabledList	List<DateTime>	null	disabled dates list. You must pass List<DateTime>
disabledRangeList	List<Map<String, DateTime>>	null	disabled dates range map. You must use ‘start’ and ‘end’ key on the Map<String, DateTime>
isRange	bool	false	datepicker for single/range

    CoolDatepicker(
        defaultValue: [DateTime(2020, 8, 24)], // single select
        onSelected: (_) {},
        disabledList: [DateTime(2021, 10, 22), DateTime(2021, 10, 12)],
        disabledRangeList: [
            {
            'start': DateTime(2021, 11, 1),
            'end': DateTime(2021, 11, 13)
            },
        ],
    )
    CoolDatepicker(
        defaultValue: { // range select
        'start': DateTime(2020, 9, 25),
        'end': DateTime(2021, 11, 24)
        },
        onSelected: (_) {},
    )

Result options

option	Type	Default	Description
iconSize	double	20	Datepicker icon size
resultWidth	double	220
resultHeight	double	50
resultBD	BoxDecoration	below code	BoxDecoration of the result
resultTS	TextStyle	below code	TextStyle of the result
resultPadding	EdgeInsets	below code	Padding of the result
isResultIconLabelReverse	bool	false	Reverse order of the result by row
labelIconGap	double	10	Gap between the label and icon
isResultLabel	bool	true	Show/hide the label of the result
placeholder	String	null
placeholderTS	TextStyle	below code
iconSize	double	20	the size of the calendar icon in resultBox

resultBD = BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.1),
              spreadRadius: 1,
              blurRadius: 10,
              offset: Offset(0, 1),
            ),
          ],
        );

resultTS = TextStyle(
            fontSize: 20,
            color: Colors.black,
          );

resultPadding = const EdgeInsets.only(left: 10, right: 10);

placeholderTS = TextStyle(color: Colors.grey.withOpacity(0.7), fontSize: 20);

Datepicker options

option	Type	Default	Description
calendarSize	double	400	Datepicker size
minYear	double	DateTime.now().year – 100	Datepicker minimum year
maxYear	double	DateTime.now().year + 100	Datepicker maximum year
format	string	‘yyyy-mm-dd’	Format to show as result and bottom selected dates
limitCount	int	1	Set how many dates can be picked
weekLabelList	List	below code	Set week words on the datepicker
monthLabelList	List	below code	Set month dropdown label on the datepicker datepicker
firstWeekDay	int	7 (Sunday)	Set de first weekday that will be shown. Possible values are:monday = 1, tuesday = 2 wednesday = 3, thursday = 4, friday = 5, saturday = 6, sunday = 7 (Can also use DateTime.monday, DateTime.sunday…)
isYearMonthDropdownReverse	bool	false	Reverse order of dropdowns on the datepicker
headerColor	Color	Color(0XFF6771e4)	Reverse order of dropdowns on the datepicker
arrowIconAreaColor	Color	Color(0XFF4752e0)	Reverse order of dropdowns on the datepicker
selectedCircleColor	Color	Color(0XFF6771e4)	Reverse order of dropdowns on the datepicker
selectedBetweenAreaColor	Color	Color(0XFFe2e4fa)	Reverse order of dropdowns on the datepicker
cancelFontColor	Color	Color(0XFF4a54c5)	Reverse order of dropdowns on the datepicker
okButtonColor	LinearGradient	below code	Reverse order of dropdowns on the datepicker
bottomSelectedBorderColor	Color	Color(0XFF6771e4)	Reverse order of dropdowns on the datepicker
isDark	bool	false	dark mode
cancelBtnLabel	String	‘CANCEL’	Cancel button label
okBtnLabel	String	‘OK’	Ok button label

weekLabelList = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];

monthLabelList = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

okButtonColor = const LinearGradient(colors: [
    Color(0XFF4a54c5),
    Color(0XFF6771e4),
]);

Learn more about date picker click here

Credit

This project is developed by joo6077
Download this project from the below link.
https://github.com/joo6077/cool_datepicker/archive/refs/heads/master.zip
You can visit the source page from the below link:
https://github.com/joo6077/cool_datepicker