79742147

Date: 2025-08-21 10:23:51
Score: 0.5
Natty:
Report link

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:

  1. The picker respects dd/MM/yyyy based on locale.

  2. 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:

  1. Use Flutter localization for a quick standard solution.

  2. Use CustomCalendarGregorianCalendarDelegate for strict manual input handling or if flutter_localizations cannot be added.

Reasons:
  • RegEx Blacklisted phrase (1): I want
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Mohamed Ashiq