DatePicker flutter change display date format

Question

How to change format of display date?

I can't find date format field here. Here is my sample code:

_onDateChanging(BuildContext context, DateKind dateKind,
      FlightSearchQueryProvider searchProvider) {
    ...
    showDatePicker(
      context: context,
      initialDate: DateTime.tryParse(date),
      firstDate: DateTime.now(),
      lastDate: DateTime(2050),
      helpText: helperText,
      cancelText: cancelText,
      confirmText: confirmText,
      fieldHintText: hintText,
      errorFormatText: getTranslation(context, 'invalid_date_value'),
      errorInvalidText: getTranslation(context, 'invalid_date_value'),
    ).then((value) {
      if (value != null) {
        if (dateKind == DateKind.Departure) {
          searchProvider.updateDepartureDate(value.toString());
        } else {
          searchProvider.updateArrivalDate(value.toString());
        }
      }
    });
  }

Thanks!

Solution

.
The easiest way that I found is to rewrite LocalizationsDelegate

The showDatePicker method uses MaterialLocalizations.of(context); to format DatePickerHeader dateText that you need.

To change the format you need to rewrite the showDatePicker method or add you own LocalizationsDelegate. The second way is much faster.

To add custom LocalizationsDelegate:

MaterialApp(
 localizationsDelegates: [
   CustomMaterialLocalizationsDelegate(),
  ],
..
)

To create CustomMaterialLocalizationsDelegate you can copy _MaterialLocalizationsDelegate (link to the delegate you can find in GlobalMaterialLocalizations.delegate)

Next you need to change mediumDateFormat variable.

Probably this is not a perfect solution because you change that format for whole MaterialApp, but probably this is the only solution, if you don't want to create you own DatePicker.

Working example:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart' as intl;
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/date_symbols.dart' as intl;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        CustomMaterialLocalizationsDelegate(), // GlobalMaterialLocalizations.delegate,
      ],
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Test(),
    );
  }
}

class Test extends StatelessWidget {
  const Test({Key key}) : super(key: key);

  _showDialog(BuildContext context) {
    return () => showDatePicker(
          context: context,
          initialDate: DateTime.now(),
          firstDate: DateTime.now(),
          lastDate: DateTime(2050),
        ).then(print);
  }

  @override
  Widget build(BuildContext context) {
    final localizations = MaterialLocalizations.of(context);
    return Center(
      child: RaisedButton(
        child: Text(
            'showDialog: ${localizations.formatMediumDate(DateTime.now())}'),
        onPressed: _showDialog(context),
      ),
    );
  }
}


class CustomMaterialLocalizationsDelegate
    extends LocalizationsDelegate<MaterialLocalizations> {
  const CustomMaterialLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) =>
      kMaterialSupportedLanguages.contains(locale.languageCode);

  static final Map<Locale, Future<MaterialLocalizations>> _loadedTranslations =
      <Locale, Future<MaterialLocalizations>>{};

  @override
  Future<MaterialLocalizations> load(Locale locale) {
    assert(isSupported(locale));
    return _loadedTranslations.putIfAbsent(locale, () {
      // util.loadDateIntlDataIfNotLoaded();

      final String localeName =
          intl.Intl.canonicalizedLocale(locale.toString());
      assert(
        locale.toString() == localeName,
        'Flutter does not support the non-standard locale form $locale (which '
        'might be $localeName',
      );

      intl.DateFormat fullYearFormat;
      intl.DateFormat compactDateFormat;
      intl.DateFormat shortDateFormat;
      intl.DateFormat mediumDateFormat;
      intl.DateFormat longDateFormat;
      intl.DateFormat yearMonthFormat;
      intl.DateFormat shortMonthDayFormat;
      if (intl.DateFormat.localeExists(localeName)) {
        fullYearFormat = intl.DateFormat.y(localeName);
        compactDateFormat = intl.DateFormat.yMd(localeName);
        shortDateFormat = intl.DateFormat.yMMMd(localeName);
        // mediumDateFormat = intl.DateFormat.MMMEd(localeName);
        longDateFormat = intl.DateFormat.yMMMMEEEEd(localeName);
        yearMonthFormat = intl.DateFormat.yMMMM(localeName);
        shortMonthDayFormat = intl.DateFormat.MMMd(localeName);
      } else if (intl.DateFormat.localeExists(locale.languageCode)) {
        fullYearFormat = intl.DateFormat.y(locale.languageCode);
        compactDateFormat = intl.DateFormat.yMd(locale.languageCode);
        shortDateFormat = intl.DateFormat.yMMMd(locale.languageCode);
        // mediumDateFormat = intl.DateFormat.MMMEd(locale.languageCode);
        longDateFormat = intl.DateFormat.yMMMMEEEEd(locale.languageCode);
        yearMonthFormat = intl.DateFormat.yMMMM(locale.languageCode);
        shortMonthDayFormat = intl.DateFormat.MMMd(locale.languageCode);
      } else {
        fullYearFormat = intl.DateFormat.y();
        compactDateFormat = intl.DateFormat.yMd();
        shortDateFormat = intl.DateFormat.yMMMd();
        // mediumDateFormat = intl.DateFormat.MMMEd();
        longDateFormat = intl.DateFormat.yMMMMEEEEd();
        yearMonthFormat = intl.DateFormat.yMMMM();
        shortMonthDayFormat = intl.DateFormat.MMMd();
      }

      mediumDateFormat = intl.DateFormat.y(); // <- added

      intl.NumberFormat decimalFormat;
      intl.NumberFormat twoDigitZeroPaddedFormat;
      if (intl.NumberFormat.localeExists(localeName)) {
        decimalFormat = intl.NumberFormat.decimalPattern(localeName);
        twoDigitZeroPaddedFormat = intl.NumberFormat('00', localeName);
      } else if (intl.NumberFormat.localeExists(locale.languageCode)) {
        decimalFormat = intl.NumberFormat.decimalPattern(locale.languageCode);
        twoDigitZeroPaddedFormat = intl.NumberFormat('00', locale.languageCode);
      } else {
        decimalFormat = intl.NumberFormat.decimalPattern();
        twoDigitZeroPaddedFormat = intl.NumberFormat('00');
      }

      return SynchronousFuture<MaterialLocalizations>(getMaterialTranslation(
        locale,
        fullYearFormat,
        compactDateFormat,
        shortDateFormat,
        mediumDateFormat,
        longDateFormat,
        yearMonthFormat,
        shortMonthDayFormat,
        decimalFormat,
        twoDigitZeroPaddedFormat,
      ));
    });
  }

  @override
  bool shouldReload(CustomMaterialLocalizationsDelegate old) => false;

  @override
  String toString() =>
      'GlobalMaterialLocalizations.delegate(${kMaterialSupportedLanguages.length} locales)';
}

Updated.
I've noticed that you are from Türkmenistan. Maybe you what to change the Local, the dialog has this option from the box.

But unfortunately I didn't fund Turkmen, this is Russian.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Test(),
    );
  }
}

class Test extends StatelessWidget {
  const Test({Key key}) : super(key: key);

  _showDialog(BuildContext context) {
    return () => showDatePicker(
          locale: Locale('ru', 'ru_Ru'),
          context: context,
          initialDate: DateTime.now(),
          firstDate: DateTime.now(),
          lastDate: DateTime(2050),
        ).then(print);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('showDialog'),
        onPressed: _showDialog(context),
      ),
    );
  }
}

Comments

[MSpeed]

You might have to post some code first

[Atamyrat Babayev]

Thanks for your response!)) Solution is good, but very difficult to use it in practice, I already have a custom Turkmen language(MaterialLocalizationTkDelegate) and this is not the best way to change the date of DatePicker, because I used DefaultMaterialLocalizations(reason is that I don't want rewrite all of MaterialLocalizations fields, they are too many!). Unfortunately, flutter doesn't provide date customization from the box, I'll search for another solution.

[RuslanBek]

The problem of this answer is that it changes locale if that language exists in localization list here: api.flutter.dev/flutter/flutter_localizations/… And unfortunately turkmen language is not added here. So how can i programmatically customize it for that language?

[Atamyrat Babayev]

Hi @Ruslanbek0809, I've already created support for Turkmen language. Place, where I found solution is: docs.flutter.dev/development/accessibility-and-localization/‌​…, you'll find link to github in that topic "add_language".

[RuslanBek]

@AtamyratBabayev Thanx man.

[Atamyrat Babayev]

@Ruslanbek0809 Hi, I created file for support turkmen language, you could find it here: github.com/Mickey-A-Mouse/turkmen_localization_flutter