Flutter – Set MIN and MAX Selectable Dates in DatePicker

In Flutter, a DatePicker is a widget that provides a user interface for selecting dates. It allows users to choose a specific date from a calendar-like interface. Flutter doesn’t have a built-in DatePicker widget, but you can create a date picker using the showDatePicker function, which displays a date picker dialog to select a date. In this article, we are going to set a MIN Date and MAX Date to the DatePicker showing that the user cannot select a date below the MIN Date and select beyond the MAX Date. Here the min date is 01/2023 and the max date is 12/2023. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

void main() => runApp(MyApp());

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: MyDatePicker(),
    );
  }
}

Step 5: Create MyDatePicker Class

• This class contains a Future _selectDate function is responsible for showing the date picker dialog when called.This function takes the current BuildContext, the initialDate, firstDate, and lastDate as parameters. It displays a dialog that allows the user to select a date within the specified range and awaits the user’s selection.
• This class also contains a DateTime variable named selectedDate, which holds the currently selected date. It initially gets set to the current date and time using DateTime.now().
• When the user selects a date from the date picker dialog, the picked variable will be set to the chosen date if it’s not null. If a date is selected, the setState method is called to update the selectedDate variable with the chosen date.
• Here the min date is 01/2023 and the max date is 12/2023 .

Comments are added for better understanding.

// Function to show the date picker dialog
Future<void> _selectDate(BuildContext context) async {
    // Display the date picker and await user selection
    final DateTime? picked = await showDatePicker(
      context: context,
      initialDate:
          selectedDate, // Set the initial date to the currently selected date
      firstDate: DateTime(2023, 1), // Set the minimum selectable date
      lastDate: DateTime(2023, 12), // Set the maximum selectable date
    );
    if (picked != null) {
      // If a date is selected, update the selectedDate variable and rebuild the UI
      setState(() {
        selectedDate = picked;
      });
    }
  }

Dart

class MyDatePicker extends StatefulWidget {
  @override
  _MyDatePickerState createState() => _MyDatePickerState();
}

class _MyDatePickerState extends State<MyDatePicker> {

  // Declare a variable to store the selected date
  DateTime selectedDate = DateTime.now();

  // Function to show the date picker dialog
  Future<void> _selectDate(BuildContext context) async {
    // Display the date picker and await user selection
    final DateTime? picked = await showDatePicker(
      context: context,
      initialDate:
          selectedDate, // Set the initial date to the currently selected date
      firstDate: DateTime(2023, 1), // Set the minimum selectable date
      lastDate: DateTime(2023, 12), // Set the maximum selectable date
    );
    if (picked != null) {
      // If a date is selected, update the selectedDate variable and rebuild the UI
      setState(() {
        selectedDate = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Date Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            // Display the selected date in a large text widget
            Text(
              "${selectedDate.toLocal()}".split(' ')[0],
              style: TextStyle(fontSize: 55, fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: 20.0,
            ),
            // Button to open the date picker dialog
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select date'),
            ),
          ],
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: MyDatePicker(),
    );
  }
}

class MyDatePicker extends StatefulWidget {
  @override
  _MyDatePickerState createState() => _MyDatePickerState();
}

class _MyDatePickerState extends State<MyDatePicker> {
  // Declare a variable to store the selected date
  DateTime selectedDate = DateTime.now();

  // Function to show the date picker dialog
  Future<void> _selectDate(BuildContext context) async {
    // Display the date picker and await user selection
    final DateTime? picked = await showDatePicker(
      context: context,
      initialDate:
          selectedDate, // Set the initial date to the currently selected date
      firstDate: DateTime(2023, 1), // Set the minimum selectable date
      lastDate: DateTime(2023, 12), // Set the maximum selectable date
    );
    if (picked != null) {
      // If a date is selected, update the selectedDate variable and rebuild the UI
      setState(() {
        selectedDate = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Date Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            // Display the selected date in a large text widget
            Text(
              "${selectedDate.toLocal()}".split(' ')[0],
              style: TextStyle(fontSize: 55, fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: 20.0,
            ),
            // Button to open the date picker dialog
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select date'),
            ),
          ],
        ),
      ),
    );
  }
}

Output: