Date Picker in Flutter without plugins
Tags: flutter, codepen, widget, dart
Published: 2021-05-31 08:13:35

Have you ever want to take Date input in flutter. Don't worry, Flutter has widget for it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q06khfw938sgvd9qv2nh.png)

watch it on youtube:
{% youtube 0DOJZ3-OyMY %}
we need to have a stateful class because we tend to change the value of the date every time the user select it. And a **DateTime** variable to store the date value.

```dart
DateTime _dateTime;
```

initialize the _datetime

```dart
  @override
  void initState() {
    super.initState();
    _dateTime = DateTime.now();
  }
```
I used Column and then listtile to show the date in text format(string) and to choose date onTap() on Listtile()

```dart

Column(children: [
        ListTile(
          title: Text("Date: " + _dateTime.toString(),
              style: TextStyle(fontWeight: FontWeight.bold)),
          onTap: _pickTime,
        )
      ])
```

Now, all we need is to define _picktime(){}. As we need to pick date is a future , we will have to use async and await.

**showDatePicker()** is the widget which returns DateTime() selected and has 4 required fields 
```
required BuildContext context,
required DateTime initialDate,
required DateTime firstDate,
required DateTime lastDate,
```
assign the returned value of showDatePicker to a variable.
```dart
_pickTime() async {
    DateTime d = await showDatePicker(
      context: context,
      initialDate: _dateTime,
      firstDate: DateTime(DateTime.now().year - 5),
      lastDate: DateTime(DateTime.now().year + 5),
     
     
    );
    
  }
```

now using **setstate()** update the _datetime variable.
```dart
_pickTime() async {
    DateTime d = await showDatePicker(
      context: context,
      initialDate: _dateTime,
      firstDate: DateTime(DateTime.now().year - 5),
      lastDate: DateTime(DateTime.now().year + 5),
     
     
    );
    if (d != null) {
      setState(() {
        _dateTime = d;
      });
    }
 }
```
several optional values are there like 
**helpText**, label displayed at the top of the dialog.
**cancelText**, label on the cancel button.
**confirmText**, label on the ok button.
which take string values
```dart
      cancelText: "CANCEL TEXT",
      helpText: "HELP TEXT",
      confirmText: "CONFIRM TEXT",

```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ju7in4928ld4ez96e98.png)

An optional **initialEntryMode** argument can be used to display the date picker in the DatePickerEntryMode.calendar (a calendar month grid) or DatePickerEntryMode.input (a text input field) mode. It defaults to **DatePickerEntryMode.calendar** and must be non-null.
```dart
initialEntryMode: DatePickerEntryMode.input,

```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6oz3lqn1uz3f5rfe9sg.png)

An optional **textDirection** argument can be used to set the text direction (TextDirection.ltr or TextDirection.rtl) for the date picker
```dart
textDirection: TextDirection.rtl,
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptbhzzmsjvw979gov5re.png)

An optional **initialDatePickerMode** argument can be used to have the calendar date picker initially appear in the DatePickerMode.year or DatePickerMode.day mode. It defaults to **DatePickerMode.day**, and must be non-null.

```dart
initialDatePickerMode: DatePickerMode.day,
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4t6z3k9tccxsb6f73cil.png)
The **builder** parameter can be used to wrap the dialog widget to add inherited widgets like Theme.
```dart
 builder: (context, child) {
        return Theme(
            data: ThemeData(
                primarySwatch: Colors.purple,
                primaryColor: Colors.purple,
                accentColor: Colors.purpleAccent),
            child: child);
      },
```
An optional **selectableDayPredicate** function can be passed in to only allow certain days for selection. If provided, only the days that selectableDayPredicate returns true for will be selectable. For example, this can be used to only allow weekdays for selection. If provided, it must return true for initialDate.
```dart
selectableDayPredicate: (DateTime q) {
        return q.weekday == 6 || q.weekday == 7 ? false : true;
      },
```
you can play with codepen
{% codepen https://codepen.io/codingqueue/pen/abJVQvo %}