Flutter – Is there a way to change the written date using Cupertino date picker?

The CupertinoDatePicker in Flutter’s Cupertino library provides a way to select dates in an iOS-like style. However, unlike the DatePicker widget from the Material library, CupertinoDatePicker does not automatically update the date being displayed in the associated widget.

To achieve the behavior you’re looking for – updating the displayed date instantly as the user interacts with the CupertinoDatePicker, you can use the ValueChanged callback provided by the CupertinoDatePicker to update the displayed date as the user changes the date in the picker.

Here’s how you can achieve this:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: MyDatePicker(),
    );
  }
}

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

class _MyDatePickerState extends State<MyDatePicker> {
  DateTime selectedDate = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Date Picker Example'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              selectedDate.toString(), // Display the selected date here
              style: TextStyle(fontSize: 18),
            ),
            CupertinoButton(
              child: Text('Open Date Picker'),
              onPressed: () {
                showCupertinoModalPopup(
                  context: context,
                  builder: (BuildContext builder) {
                    return Container(
                      height: 300,
                      child: CupertinoDatePicker(
                        initialDateTime: selectedDate,
                        onDateTimeChanged: (DateTime newDate) {
                          setState(() {
                            selectedDate = newDate; // Update the selected date
                          });
                        },
                        mode: CupertinoDatePickerMode.date,
                      ),
                    );
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

In this example, the selectedDate variable is used to hold the currently selected date. When the user changes the date in the CupertinoDatePicker, the onDateTimeChanged callback updates the selectedDate value, and the displayed date in the UI gets updated automatically due to the use of setState.

With this approach, the date displayed on the button will instantly change as the user interacts with the CupertinoDatePicker.