Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MariaMelnik/flutter_date_pickers
https://github.com/MariaMelnik/flutter_date_pickers
hacktoberfest
Last synced: 15 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/MariaMelnik/flutter_date_pickers
- Owner: MariaMelnik
- License: mit
- Created: 2019-04-01T15:50:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-30T23:24:27.000Z (6 months ago)
- Last Synced: 2024-07-31T19:41:39.238Z (4 months ago)
- Topics: hacktoberfest
- Language: Dart
- Homepage: https://pub.dev/packages/flutter_date_pickers
- Size: 27.4 MB
- Stars: 200
- Watchers: 5
- Forks: 126
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# flutter_date_pickers
[](https://github.com/MariaMelnik/flutter_date_pickers/actions)
[](https://pub.dev/packages/flutter_date_pickers)
[](https://pub.dev/packages/flutter_date_pickers)
[](https://pub.dev/packages/flutter_date_pickers/score)
[](https://github.com/MariaMelnik/flutter_date_pickers)
[](https://opensource.org/licenses/MIT)
[](https://github.com/MariaMelnik/flutter_date_pickers/)
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
* `YearPicker` for year
## 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).
If range/week selected:
for start you will get start of the day (00:00:00) by default.
for end you will get end of the day (23:59:59.999) by default.
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
```dart
// Create week date picker with passed parameters
Widget buildWeekDatePicker (DateTime selectedDate, DateTime firstAllowedDate, DateTime lastAllowedDate, ValueChanged onNewSelected) {
// add some colors to default settings
DatePickerRangeStyles styles = DatePickerRangeStyles(
selectedPeriodLastDecoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadiusDirectional.only(
topEnd: Radius.circular(10.0),
bottomEnd: Radius.circular(10.0))),
selectedPeriodStartDecoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadiusDirectional.only(
topStart: Radius.circular(10.0), bottomStart: 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](https://github.com/MariaMelnik/flutter_date_pickers/tree/master/example).
For help getting started with Flutter, view our
[online documentation](https://flutter.io/docs), which offers tutorials,
samples, guidance on mobile development, and a full API reference.