date_field/README.md

66 lines
1.9 KiB
Markdown
Raw Normal View History

2020-03-01 22:16:29 +00:00
# date_field
2021-01-22 18:38:04 +00:00
[![pub package](https://img.shields.io/pub/v/date_field.svg)](https://pub.dartlang.org/packages/date_field)
2020-07-19 14:53:45 +00:00
Contains DateTimeField and DateTimeFormField which allows the user to pick a DateTime from an input field! Depending on
2021-01-22 18:38:04 +00:00
the mode, it can ask the user the time, the date or both at the same time ;) !
2020-03-01 22:16:29 +00:00
<img src='https://raw.githubusercontent.com/GaspardMerten/date_field/master/example/demo.gif' height='250px'></img>
2021-01-22 18:38:04 +00:00
## Usage
In the `pubspec.yaml` of your flutter project, add the following dependency:
```yaml
dependencies:
...
date_field: ^2.1.2
2021-01-22 18:38:04 +00:00
```
2020-03-01 22:16:29 +00:00
2021-01-22 18:38:04 +00:00
In your library add the following import:
2020-03-01 22:29:41 +00:00
2021-01-22 18:38:04 +00:00
```dart
import 'package:date_field/date_field.dart';
```
## Getting Started
2020-03-01 22:29:41 +00:00
There are two widgets in this package:
2020-07-19 14:53:45 +00:00
- DateTimeField
- DateTimeFormField
2020-03-01 22:29:41 +00:00
2021-01-22 18:38:04 +00:00
It follows the usual Flutter patterns convention, meaning the DateTimeFormField extends the FormField widget and wraps a DateTimeField widget.
You can customize both of these widgets with the decoration argument which is fully supported.
You can also specify whether you would like to ask the user for a date, a time or both using the mode parameter.
## Example
2020-03-01 22:29:41 +00:00
The following picture illustrates some things you can do with this package.
2020-03-01 22:29:41 +00:00
2021-01-22 18:38:04 +00:00
<img src='https://raw.githubusercontent.com/GaspardMerten/date_field/master/example/demo.gif' height='250px'></img>
2020-03-01 22:29:41 +00:00
2020-07-19 14:53:45 +00:00
2021-01-22 18:38:04 +00:00
``` dart
DateTimeFormField(
decoration: const InputDecoration(
hintStyle: TextStyle(color: Colors.black45),
errorStyle: TextStyle(color: Colors.redAccent),
border: OutlineInputBorder(),
suffixIcon: Icon(Icons.event_note),
labelText: 'Only time',
),
mode: DateTimeFieldPickerMode.time,
autovalidateMode: AutovalidateMode.always,
validator: (e) => (e?.day ?? 0) == 1 ? 'Please not the first day' : null,
onDateSelected: (DateTime value) {
print(value);
},
),
```
2020-07-19 14:53:45 +00:00
You can check the GitHub repo for a complete example.