New datepicker (channel stable): Language always English + manually entering date doesn't work in other languages/ regions

[nohli]

Steps to Reproduce

1. Select flutter channel beta
2. Add datepicker (doesn't matter if you add locale: to showDatePicker() or not)
3. Set phone to German (or a region with a different date format than US)
4. Run appliction, click on the pen to manually edit date
5. Edit one number

Expected results:
-> Locale is in my language + I can edit and save a date

Actual results:

1. The language is always English (while the Cancel and OK buttons are localized)
2. The date is auto-formatted to US format
3. When I type a dot, it enters a slash instead (German format: 24.4.2020 - we use dots)
4. It says Invalid format (to it's own correction - so it is actually expecting the German format)
   -> I can't save any date

If I choose English in phone settings, all works - because having '/' in a date is expected.
This happens in Xcode simulator as well as in the builds made by Codemagic.

Logs

[VladyslavBondarenko]

Code sample to reproduce

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'),
        const Locale('ru', 'RU'),
      ],
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  DateTime selectedDate = DateTime.now();

  Future<Null> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        locale: const Locale('ru', 'RU'),
        initialDate: selectedDate,
        firstDate: DateTime(2015, 8),
        lastDate: DateTime(2101));
    if (picked != null && picked != selectedDate)
      setState(() {
        selectedDate = picked;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
          child: RaisedButton(
              child: Text('Press'),
              onPressed: () async {
                _selectDate(context);
              })),
    );
  }
}

[inceptusp]

The new date picker now is inconsistent with the rest of the app (I'm using Brazilian Portuguese as locale)...

And, at least in portuguese, there is an error with the "OK" button... To follow Material Design, it should be capitalised just equals to the "CANCEL" button, but it is written as "Ok", with the lowercase "k"... In addition to the above problem with texts in english...

[nohli]

The new date picker now is inconsistent with the rest of the app (I'm using Brazilian Portuguese as locale)...

And, at least in portuguese, there is an error with the "OK" button... To follow Material Design, it should be capitalised just equals to the "CANCEL" button, but it is written as "Ok", with the lowercase "k"... In addition to the above problem with texts in english...

It says "select date" on top...also, could you please click on the pencil and check if it is in English, too? And whether you can edit the date and successfully click Ok?

[inceptusp]

Yes, that's what I meant by "In addition to the above problem with texts in english"... The "enter date" text input is in english too, just like yours... The only difference is that I can click "Ok" successfully but it is because we use the same date separator as english (just with day and month inverted)...

The biggest problem is that now 1.17 is in Stable branch and still have this localization bug...

[nohli]

Okay. So the same localization problem for all in stable channel. Plus portuguese Ok button changed.

I remember that the Ok button has been like yours for me, too (but don‘t remember when and if it was in English or German - just checked: (at least) in September + October 2019, stable channel, timepicker, German, the button was also 'Ok'). Now it‘s all capital letters again.

[erickok]

We experience this too. It occurs even when explicitly settings the locale through showDatePicker's locale parameter.

As another side effect of this, the form validation is not using our set locale and always fails (as it expects -'s but receives /'s.

[nohli]

Also, the padding seems arbitrary:

iPhone X, smallest text size

iPhone X, largest text size:

[slavap]

Just additional few things:

1. Please add ability to define custom inputFormatters when running showDatePicker()
2. Problem on small phones when keyboard is opened:
   

[slavap]

@TahaTesser Could you please mark priority on this issue somehow? It is quite simple to fix, but has huge impact on standard date picker usage. This functionality is needed almost everywhere, and should work flawlessly out of the box.

[Albert221]

It's already fixed in beta 7706a97

[slavap]

It is fixed. But problem with visibility when on screen keyboard opened reported above - is not fixed.

[Albert221]

I think it will be the best if you create an issue for each of the problems you described here.

[nohli]

@Albert221 do you know the correct policy - should this be closed, since it is fixed in dev and beta channel, but not stable channel yet?
@TahaTesser

[VladyslavBondarenko]

Yesterday I checked with this code sample with Russian locale, it wasn't working correctly when issue was filed, but it's working correctly now.
But if I use German locale - the issue with date input persists. Tried with current beta 1.20.0-7.2.pre and master 1.21.0-6.0.pre.41. Reopening

flutter doctor -v

[✓] Flutter (Channel master, 1.21.0-6.0.pre.41, on Mac OS X 10.15.6 19G73, locale en-GB)
    • Flutter version 1.21.0-6.0.pre.41 at /Users/nevercode/dev/flutter
    • Framework revision 39fa00201d (3 hours ago), 2020-07-27 21:11:43 -0700
    • Engine revision f27729e97b
    • Dart version 2.10.0 (build 2.10.0-0.0.dev 24c7666def)
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/nevercode/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.47.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.2

 
[✓] Connected device (5 available)            
    • Redmi Note 7 (mobile)       • 6345c469                                 • android-arm64  • Android 9 (API 28)
    • Nevercode’s iPhone (mobile) • b668e524315069f3db3661ac11ff1f66afafebdb • ios            • iOS 13.6
    • macOS (desktop)             • macos                                    • darwin-x64     • Mac OS X 10.15.6 19G73
    • Web Server (web)            • web-server                               • web-javascript • Flutter Tools
    • Chrome (web)                • chrome                                   • web-javascript • Google Chrome 84.0.4147.105

• No issues found!

[HansMuller]

@darrenaustin - can you take a look at the issue that @VladyslavBondarenko reported in #55535 (comment)

[darrenaustin]

Thanks for the report. There are a couple of problems causing this. The first is that the translations for German haven't made it to stable yet, so that is the bulk of the problem.

However, even on master we still have the issue that the date picker thinks the date separator is '/' instead of '.'. This appears to be a problem with the German translation, as it is reporting '/'.

@shihaohong can you sort this out with the translators so we can get this fixed? It is the German value for dateSeparator.:

flutter/packages/flutter_localizations/lib/src/l10n/material_de.arb

Line 57 in 7884420

"dateSeparator": "/",

Thx.

[shihaohong]

I just submitted a request to make the change on the internal translation console. I'll assign this bug to myself to track the progress since there's no way to get a notification internally (so this Github issue will remind me to check in periodically)

[shihaohong]

The request has gone through and #62896 should pull in the latest translations, which fixes the date separator issue on top of the issues of English messages seen in date picker instead of the local language's.

[nohli]

@shihaohong any chance this could be hotfixed into stable (once users confirm that it's working)?

[shihaohong]

I don't think it can be hotfixed. See https://github.com/flutter/flutter/wiki/Hotfixes-to-the-Stable-Channel on the hotfix policy

[whoch]

Today's morning, I upgrade my flutter sdk, but date separator issue is not fixed.

[shihaohong]

The separator and translations issues should now be fixed in master

[jans-y]

The separator and translations issues should now be fixed in master

Thank you for your work on this issue.

Many other languages have the same problem with manual date entering .
e.g.: cs, sk, hu -> they all use . (dots) not / (slash)

Switching to 'de' (German) solves the issue.

I have noticed that those mentioned languages miss dateSeparator value entirely:
https://github.com/flutter/flutter/blob/master/packages/flutter_localizations/lib/src/l10n/cupertino_cs.arb

Sorry, I made a mistake, dateSeparator is there in the material_cs.arb but its incorrectly "/".

Edit:
After some local testing, it's not enough to correct dateSeparator:

As you can see, as soon I started to edit date textfield, dots would double "." => ".." and no date format would be accepted.

master, 1.21.0-6.0.pre.245

[whoch]

This issue occurs because the dateHelpText, dateSeparator in MaterialLocalization are different from the compactDateFormat used by the validator in TextFormField.

In Korea, helpText and separator of MaterialLocalizationKo are as follows:

String get dateHelpText => 'yyyy/mm/dd';
String get dateSeparator => '/';

And compactDateFormat is y. M. d.

InputText is initially shown in y. M. d. format, but when the value is modified, it is changed to y//M//d// by inputFormatters. And Only '/' is entered, therefore cannot be entered y. M. d. format.

HintText also outputs 'yyyy/mm/dd' which is different from the compactDateFormat.

Even if input the hintText format, the errorText is displayed because the _validateDate method, validator of InputDatePickerFormField, internally parse the compateDate.

String _validateDate(String text) {
  final DateTime date = _parseDate(text);
  if (date == null) {
    return widget.errorFormatText ?? MaterialLocalizations.of(context).invalidDateFormatLabel;
  } else if (!_isValidAcceptableDate(date)) {
    return widget.errorInvalidText ?? MaterialLocalizations.of(context).dateOutOfRangeLabel;
  }
  return null;
}

DateTime _parseDate(String text) {
 final MaterialLocalizations localizations = MaterialLocalizations.of(context);
 return localizations.parseCompactDate(text);
}

Can I modify compactDateFormat or can someone solve this issue?

[shihaohong]

Since the original issues has been fixed for the most part (missing translations and the incorrect German date separator), I filed two separate issues to track the new issues that were mentioned even after the original fix:

1. the input validation problem: Double date separators appearing in DatePicker, preventing date selection #63373
2. Remaining incorrect date separators for particular locales: Date picker with incorrect date separator format #63372

Please comment on these issues instead with any information that would be helpful in generating a fix. Thank you for all the detailed reports so far! :)

[nohli]

As of today, this is fixed in stable channel (at least for German - but I hope, for everyone).

Thanks Googlers, and everyone who commented ☺️

[ajayvenkat10]

May I know how to set date format as "dd/mm/yyyy" in Input mode with a snippet without changing the locale ?
Thanks in advance!

[darrenaustin]

@ajayvenkat10, unfortunately the date format is tied to the locale the date picker was brought up in. If you need this functionality, please open an issue requesting this feature: https://github.com/flutter/flutter/issues/new?template=3_feature_request.md

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.