Title: Standardizing showDatePicker date format to dd/MM/yyyy in Flutter
Question / Issue:
Users can manually type dates in mm/dd/yyyy format while most of the app expects dd/MM/yyyy. This causes parsing errors and inconsistent date formats across the app.
I want to standardize the showDatePicker so that either:
The picker respects dd/MM/yyyy based on locale.
Manual input parsing is handled safely in dd/MM/yyyy.
Reference: https://github.com/flutter/flutter/issues/62401
Solution 1: Using Flutter Localization
You can force the picker to follow a locale that uses dd/MM/yyyy (UK or India):
// In pubspec.yaml
flutter_localizations:
sdk: flutter
// MaterialApp setup
MaterialApp(
title: 'APP NAME',
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const [
Locale('en', 'GB'), // UK English = dd/MM/yyyy
Locale('ar', 'AE'), // Arabic, UAE
Locale('en', 'IN'), // Indian English = dd/MM/yyyy
],
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
// DatePicker usage
await showDatePicker(
locale: const Locale('en', 'GB'), // or Locale('en', 'IN')
context: context,
fieldHintText: 'dd/MM/yyyy',
initialDate: selectedDate,
firstDate: DateTime(1970, 8),
lastDate: DateTime(2101),
);
✅ Pros: Works with stock showDatePicker.
⚠️ Cons: Requires adding flutter_localizations to pubspec.
Solution 2: Using a Custom CalendarDelegate
You can extend GregorianCalendarDelegate and override parseCompactDate to handle manual input safely:
class CustomCalendarGregorianCalendarDelegate extends GregorianCalendarDelegate {
const CustomCalendarGregorianCalendarDelegate();
@override
DateTime? parseCompactDate(String? inputString, MaterialLocalizations localizations) {
if (inputString == null || inputString.isEmpty) return null;
try {
// First, try dd/MM/yyyy
return DateFormat('dd/MM/yyyy').parseStrict(inputString);
} catch (_) {
try {
// Fallback: MM/dd/yyyy
return DateFormat('MM/dd/yyyy').parseStrict(inputString);
} catch (_) {
return null;
}
}
}
}
Usage:
await showDatePicker(
context: context,
fieldHintText: 'dd/MM/yyyy',
initialDate: selectedDate,
firstDate: DateTime(1970, 8),
lastDate: DateTime(2101),
calendarDelegate: CustomCalendarGregorianCalendarDelegate(),
);
✅ Pros: Full control over manual input parsing, no extra pubspec assets required.
⚠️ Cons: Requires using a picker/widget that supports custom CalendarDelegate.
Recommendation:
Use Flutter localization for a quick standard solution.
Use CustomCalendarGregorianCalendarDelegate for strict manual input handling or if flutter_localizations cannot be added.