date_picker_pro

Description:

date picker pro

date_picker_pro

date_picker_pro,Provide DatePicker and DateRangePicker,More will be provided in the future,Welcome to provide suggestions


The official date selection component cannot be customized in style. This library was created to address this issue, providing style changes and result callbacks. If you need to select a date in a pop-up window, you need to use this library for secondary encapsulation yourself.








Usage •
Issues and Feedback •
License


Feedback welcome and Pull Requests are most welcome!

English | 中文
Usage #
Import the package #
To use this package, follow the pub.dev-date_picker_pro.
DatePicker use #
Add the following import to your Dart code(DatePicker):
import 'package:date_picker_pro/date_picker.dart';

DatePicker(
controller: controller,
initialDate: DateTime(2024, 8, 15),
currentDate: DateTime(2024, 8, 16),
firstDate: DateTime(2021, 8, 1),
lastDate: DateTime(2024, 9, 28),
selectableDayPredicate: (DateTime date) {
// Only weekdays (Monday to Friday) are allowed to be selected
if (date.weekday == DateTime.saturday ||
date.weekday == DateTime.sunday) {
return false;
}
return true;
},
onDateChanged: (DateTime date) {},
onDisplayedMonthChanged: (DateTime date) {},
selectedColor: Colors.blue,
selectedTextColor: Colors.white,
enableTextColor: Colors.black,
disableTextColor: Colors.grey,
selectedShape: BoxShape.circle,
monthHeaderItemHeight: 40,
backgroundColor: Colors.white,
monthTextStyle: const TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.normal,
),
)
copied to clipboard



API
description




controller
Controller


initialDateRangecontroller.setInitialDateRange()
Initialize the selected range


currentDatecontroller.setCurrentDate()
Set current date


firstDate
The first date that can be selected


lastDate
The last date that can be selected


onDisplayedMonthChanged
Selected month change callback


selectedColorcontroller.setSelectedColor()
Selected date color


selectedTextColorcontroller.setSelectedTextColor()
The text color of the selected date


enableTextColorcontroller.setEnableTextColor()
The text color of selectable dates


disableTextColorcontroller.setDisableTextColor()
The text color of dates that cannot be selected


selectedShapecontroller.setSelectedShape()
Select the shape of the date


onDateChanged
Select date callback


monthTextStylecontroller.setMonthTextStyle()
Set month text style


selectableDayPredicate
Set optional date rules


monthHeaderItemHeightcontroller.setMonthHeaderItemHeight()
Set the head height of the month


backgroundColorcontroller.setBackgroundColor()
Set background color



DatePicker Sample(Source Code)

Demo video:
https://github.com/user-attachments/assets/cd3317ac-4cf6-4c99-8b68-a1df5519ac58
DateRangePicker use #
Add the following import to your Dart code(DateRangePicker):
import 'package:date_picker_pro/date_picker.dart';

DateRangePicker(
controller: dateRangePickerController,
initialDateRange: DateTimeRange(
start: DateTime(2024,8,1),
end: DateTime(2024,8,30),
),
currentDate: DateTime.now(),
firstDate: DateTime(2023),
lastDate: DateTime(2025),
intervalColor: Colors.blueGrey.shade50,
selectedColor: Colors.blue,
selectedTextColor: Colors.white,
enableTextColor: Colors.black,
disableTextColor: Colors.grey,
selectedShape: BoxShape.rectangle,
monthHeaderItemHeight: 40,
monthHeaderColor: Colors.grey.shade300,
backgroundColor: Colors.white,
monthTextStyle: const TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.normal,
),
onDateTimeRangeChanged: (DateTimeRange? dateTimeRange) {},
)
copied to clipboard



API
description




controller
Controller


initialDateRangecontroller.setInitialDateRange()
Initialize the selected range


currentDatecontroller.setCurrentDate()
Set current date


firstDate
The first date that can be selected


lastDate
The last date that can be selected


intervalColorcontroller.setIntervalColor()
The color of the selected range's interval


selectedColorcontroller.setSelectedColor()
Selected date color


selectedTextColorcontroller.setSelectedTextColor()
The text color of the selected date


enableTextColorcontroller.setEnableTextColor()
The text color of selectable dates


disableTextColorcontroller.setDisableTextColor()
The text color of dates that cannot be selected


selectedShapecontroller.setSelectedShape()
Select the shape of the date


onDateTimeRangeChanged
Date range selection callback


monthTextStylecontroller.setMonthTextStyle()
Set month text style


monthHeaderColorcontroller.setMonthHeaderColor()
Set the background color for the head of the month


monthHeaderItemHeightcontroller.setMonthHeaderItemHeight()
Set the head height of the month


backgroundColorcontroller.setBackgroundColor()
Set background color


controller.reset()
Reset the selected date range


controller.getDateTimeRange()
get the selected date range, return null if not selected



DateRangePicker Sample(Source Code)

Demo video:
https://github.com/user-attachments/assets/3abd3861-6ea9-4875-aac5-1a44d9b529b2
Issues and Feedback #
Please file issues to send feedback or report a bug. Thank you !
License #
MIT