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,
),
)
| API | description |
|---|---|
| controller | Controller |
| initialDateRange controller.setInitialDateRange() |
Initialize the selected range |
| currentDate controller.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 |
| selectedColor controller.setSelectedColor() |
Selected date color |
| selectedTextColor controller.setSelectedTextColor() |
The text color of the selected date |
| enableTextColor controller.setEnableTextColor() |
The text color of selectable dates |
| disableTextColor controller.setDisableTextColor() |
The text color of dates that cannot be selected |
| selectedShape controller.setSelectedShape() |
Select the shape of the date |
| onDateChanged | Select date callback |
| monthTextStyle controller.setMonthTextStyle() |
Set month text style |
| selectableDayPredicate | Set optional date rules |
| monthHeaderItemHeight controller.setMonthHeaderItemHeight() |
Set the head height of the month |
| backgroundColor controller.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) {},
)
| API | description |
|---|---|
| controller | Controller |
| initialDateRange controller.setInitialDateRange() |
Initialize the selected range |
| currentDate controller.setCurrentDate() |
Set current date |
| firstDate | The first date that can be selected |
| lastDate | The last date that can be selected |
| intervalColor controller.setIntervalColor() |
The color of the selected range's interval |
| selectedColor controller.setSelectedColor() |
Selected date color |
| selectedTextColor controller.setSelectedTextColor() |
The text color of the selected date |
| enableTextColor controller.setEnableTextColor() |
The text color of selectable dates |
| disableTextColor controller.setDisableTextColor() |
The text color of dates that cannot be selected |
| selectedShape controller.setSelectedShape() |
Select the shape of the date |
| onDateTimeRangeChanged | Date range selection callback |
| monthTextStyle controller.setMonthTextStyle() |
Set month text style |
| monthHeaderColor controller.setMonthHeaderColor() |
Set the background color for the head of the month |
| monthHeaderItemHeight controller.setMonthHeaderItemHeight() |
Set the head height of the month |
| backgroundColor controller.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