how to change showDatePicker input format flutter

Question

I'm using showDatePicker function to pick a date from the dialog Calendar. It shows an edit icon at the top right (see img 1) to change to input mode where the user can enter the date as a text (see img 2) The problem is with the input format, I want that text editor input follow this format yyyy-mm-dd. The problem is that in the begning it show me the date like yyyy-mm-dd, but when the I try to remove the first number it changes automaticly to this format mm/dd/yyyy.

How to set the input format to yyyy-mm-dd. If showDatePicker dont support that with the swedish language, so how to hide the edit icon for ever from the top right. Help me thanks

img 1

img 2

Here is my code

  DateTime selectedDate = DateTime.now();
  String date = DateFormat("yyyy-MM-dd").format(DateTime.now()); 
...
FlatButton(
         onPressed: ()async {

           final DateTime picked = await showDatePicker(
               locale: const Locale('sv'), // Swedish calander
               context: context,
               initialDate: selectedDate,
               firstDate: DateTime(1970, 8),
               lastDate: DateTime(2101));

           if (picked != null && picked != selectedDate) {
             setState(() {
               selectedDate = picked;
               String Onlydate = new DateFormat("yyyy-MM-dd").format(picked); 

               date = '$Onlydate';


             });
           }
         },
         child: Row(
           children: <Widget>[
             Text(' * $date'),
           ],
         ),
       );`

Answer 1

Default showDatePicker using properties localizationsDelegates & supportedLocales of MaterialApp widget. so to change the input date formate you must to add localizations properties in your app MaterialApp widget otherwise you will get error when you pass local in showDatePicker picker.

(my flutter version 3.3.9)

Here are steps which work from me.

1. Add this in your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # Add this line
    sdk: flutter         # Add this line

Also bellow packages too. localization & intl

2.update MaterialApp Widget code

import 'package:flutter_localizations/flutter_localizations.dart';
MaterialApp(
  title: 'APP NAME',
  localizationsDelegates: const [ 
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: const [
    Locale('en', 'GB'), // English, UK
    Locale('ar', 'AE'), // Arabic, UAE
    Locale('en', 'IN'), // English, India
  ],
  home:MyHomePage(title: 'Flutter Demo Home Page'),
);

Now in showDatePicker widget add local parameters (language, country). so now user can add Date in dd/MM/yyyy formate without error message.

import 'package:intl/intl.dart';

// Declration.
final sDateFormate = "dd/MM/yyyy";
DateTime selectedDate = DateTime.now();
String date = DateFormat("dd/MM/yyyy").format(DateTime.now());

ElevatedButton(
    onPressed: () async {
      final DateTime? picked = await showDatePicker(
        locale: const Locale('en', 'GB'),
        context: context,
        fieldHintText: sDateFormate,
        initialDate: selectedDate,
        firstDate: DateTime(1970, 8),
        lastDate: DateTime(2101),
      );
    
      if (picked != selectedDate) {
        setState(() {
          selectedDate = picked!;
    
          date = DateFormat(sDateFormate).format(picked);
          
        });
      }
    },
    child: Row(
      children: <Widget>[
        Text(' * $date'),
      ],
    ),
)

Here attaching useful url which contains country list with langue code, country code & date formate - Link

official link for localisation more in detail.

IF You want to hide Edit button in calendar add property in showDatePicker.

final DateTime? selectDate = await showDatePicker(
 initialEntryMode: DatePickerEntryMode.calendarOnly, // Hide edit button
....     //other properties
);