|
| 1 | +# flutter_date_pickers |
| 2 | + |
| 3 | +[](https://github.com/MariaMelnik/flutter_date_pickers/actions) |
| 4 | +[](https://pub.dev/packages/flutter_date_pickers) |
| 5 | +[](https://pub.dev/packages/flutter_date_pickers) |
| 6 | +[](https://pub.dev/packages/flutter_date_pickers/score) |
| 7 | +[](https://github.com/MariaMelnik/flutter_date_pickers) |
| 8 | +[](https://opensource.org/licenses/MIT) |
| 9 | +[](https://github.com/MariaMelnik/flutter_date_pickers/) |
| 10 | +<!--[](https://codecov.io/gh/MariaMelnik/flutter_date_pickers) |
| 11 | +[](https://github.com/tenhobi/effective_dart)--> |
| 12 | + |
| 13 | + |
| 14 | +Allows to use date pickers without dialog. |
| 15 | +Provides some customizable styles for date pickers. |
| 16 | + |
| 17 | +A set of date pickers: |
| 18 | +* `DayPicker` for one day |
| 19 | +* `WeekPicker` for whole week |
| 20 | +* `RangePicker` for random range |
| 21 | +* `MonthPicker` for month |
| 22 | + |
| 23 | + |
| 24 | + |
| 25 | +## How to style date picker |
| 26 | +Every date picker constructor take a style object as a parameter (if no styles passed - defaults will be used). |
| 27 | + |
| 28 | +For single value pickers (DayPicker, MonthPicker) it is DatePickerStyles object; |
| 29 | + |
| 30 | +For range pickers (WeekPicker, RangePickers) it is DatePickerRangeStyles object; |
| 31 | + |
| 32 | +Customizable styles: |
| 33 | +for all date pickers |
| 34 | + |
| 35 | +| Property | Description | |
| 36 | +|---|---| |
| 37 | +| TextStyle displayedPeriodTitle | title of the date picker | |
| 38 | +| TextStyle currentDateStyle | style for current date | |
| 39 | +| TextStyle disabledDateStyle | style for disabled dates (before first and after last date user can pick) | |
| 40 | +| TextStyle selectedDateStyle | style for selected date | |
| 41 | +| BoxDecoration selectedSingleDateDecoration | decoration for selected date in case single value is selected | |
| 42 | +| TextStyle defaultDateTextStyle | style for date which is neither current nor disabled nor selected | |
| 43 | + |
| 44 | +only for range date pickers (WeekPicker, RangePicker) |
| 45 | + |
| 46 | +| Property | Description | |
| 47 | +|---|---| |
| 48 | +| BoxDecoration selectedPeriodStartDecoration | decoration for the first date of the selected range | |
| 49 | +| BoxDecoration selectedPeriodLastDecoration | decoration for the first date of the selected range | |
| 50 | +| BoxDecoration selectedPeriodMiddleDecoration | Decoration for the date of the selected range which is not first date and not end date of this range | |
| 51 | + |
| 52 | +## How to make some dates not selectable date picker |
| 53 | +By default only dates before `firstDate` and after `lastDate` are not selectable. But you can set custom disabled days. |
| 54 | +`DayPicker`, `WeekPicker` and `RangePicker` take a `SelectableDayPredicate selectableDayPredicate` |
| 55 | +where you can specify function which returns if some date is disabled or not. |
| 56 | + |
| 57 | +If some date is disabled for selection it gets `disabledDateStyle`. |
| 58 | + |
| 59 | +If selected range or week pretends to include such disabled date `UnselectablePeriodException` occurs. |
| 60 | +To handle it - pass `onSelectionError` callback to date picker. |
| 61 | + |
| 62 | +## How to make special decorations for some dates |
| 63 | +By default cells are decorated with `datePickerStyles` slyles (or default if no styles was passed to date picker). |
| 64 | +If you need special decoration for some days use `eventDecorationBuilder`. |
| 65 | +Currently only for `DayPicker`, `WeekPicker` and `RangePicker`. |
| 66 | + |
| 67 | +- If date is not selected basic styles will be merged with styles from `eventDecorationBuilder`. |
| 68 | +- If date is current date styles from `eventDecorationBuilder` win (if there are). |
| 69 | +- Otherwise basic styles (`datePickerStyles`) win. |
| 70 | + |
| 71 | +## What time I will get after selection? |
| 72 | +If one day selected: |
| 73 | + you will get start of the day (00:00:00) by default. If selected `firstDate` - you will get time of it. |
| 74 | + |
| 75 | +If range/week selected: |
| 76 | + for start you will get start of the day (00:00:00) by default. If selected `firstDate` - you will get time of it. |
| 77 | + for end you will get end of the day (23:59:59.999) by default. If selected `lastDate` - you will get time of it. |
| 78 | + |
| 79 | +If month selected: |
| 80 | + you will get start (00:00:00) of the 1 day of month by default. |
| 81 | + If selected month same as month of the `firstDate` - you will get `firstDate`. |
| 82 | + |
| 83 | +## Usage |
| 84 | + |
| 85 | +```dart |
| 86 | +// Create week date picker with passed parameters |
| 87 | +Widget buildWeekDatePicker (DateTime selectedDate, DateTime firstAllowedDate, DateTime lastAllowedDate, ValueChanged<DatePeriod> onNewSelected) { |
| 88 | +
|
| 89 | + // add some colors to default settings |
| 90 | + DatePickerRangeStyles styles = DatePickerRangeStyles( |
| 91 | + selectedPeriodLastDecoration: BoxDecoration( |
| 92 | + color: Colors.red, |
| 93 | + borderRadius: BorderRadius.only( |
| 94 | + topRight: Radius.circular(10.0), |
| 95 | + bottomRight: Radius.circular(10.0))), |
| 96 | + selectedPeriodStartDecoration: BoxDecoration( |
| 97 | + color: Colors.green, |
| 98 | + borderRadius: BorderRadius.only( |
| 99 | + topLeft: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)), |
| 100 | + ), |
| 101 | + selectedPeriodMiddleDecoration: BoxDecoration( |
| 102 | + color: Colors.yellow, shape: BoxShape.rectangle), |
| 103 | + ); |
| 104 | + |
| 105 | + return WeekPicker( |
| 106 | + selectedDate: selectedDate, |
| 107 | + onChanged: onNewSelected, |
| 108 | + firstDate: firstAllowedDate, |
| 109 | + lastDate: lastAllowedDate, |
| 110 | + datePickerStyles: styles |
| 111 | + ); |
| 112 | +} |
| 113 | +``` |
| 114 | + |
| 115 | +## Example app |
| 116 | +Please checkout [example](https://github.com/MariaMelnik/flutter_date_pickers/tree/master/example). |
| 117 | + |
| 118 | +For help getting started with Flutter, view our |
| 119 | +[online documentation](https://flutter.io/docs), which offers tutorials, |
| 120 | +samples, guidance on mobile development, and a full API reference. |
0 commit comments