[TimePicker] Enter a valid time error in some locales

Steps to Reproduce

TextButton(
      onPressed: () {
        showTimePicker(
          initialTime: TimeOfDay.now(),
          context: context,
          builder: (BuildContext context, Widget? child) {
            return MediaQuery(
              data:
                  MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
              child: child!,
            );
          },
        );
      },
      child: const Text('Show picker'),
    );

Expected results:

I am using showTimePicker to open time picker , it works well, but I have a problem that I am unable to reproduce it in a minimal project
In my project, When time picker opened it use 24 hour format, both dial and input mode works well, just when you pick a time in dial mode and switch to input mode and press ok button, we have Enter a valid time error

I just figured out by changing locale and supportedLocales of MaterialApp to Locale("en", "US") everything is OK

I am using the following config in MaterialApp

  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
    DefaultCupertinoLocalizations.delegate
  ],
  supportedLocales: [
    Locale("fa", "IR"),
  ],
  locale: Locale("fa", "IR")),

and have زمان معتبری وارد کنید error, it's my guess that may be we have problem with persian/arabic numbers

Actual results:

Logs

[√] Flutter (Channel stable, 2.2.2, on Microsoft Windows [Version 10.0.18363.1621], locale en-US)
    • Flutter version 2.2.2 at C:\flutter
    • Framework revision d79295af24 (3 weeks ago), 2021-06-11 08:56:01 -0700
    • Engine revision 91c9fc8fe0
    • Dart version 2.13.3

@sm2017

Hi @sm2017
Thanks for filing the issue, Indeed the error is only with Persian locale, I've tried Hebrew, Arabic, Chinese, no issues with the time picker. I can reproduce the issue without specifying 24 hour too

Used the following minimal code sample

minimal code sample

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:i18n_example/generated/i18n.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final i18n = I18n.delegate;

    return MaterialApp(
      onGenerateTitle: (context) => I18n.of(context).title,
      theme: ThemeData.dark(),
      home: Home(),
      locale: Locale('fa', 'IR'),
      // locale: Locale('he', 'IL'),
      localizationsDelegates: [
        i18n,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: i18n.supportedLocales,
      localeResolutionCallback: i18n.resolution(
        fallback: Locale('en', 'US'),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(I18n.of(context).title),
      ),
      body: Center(
        child: Container(
          child: Text(I18n.of(context).greetTo('John!')),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          showTimePicker(
            initialTime: TimeOfDay.now(),
            context: context,
            builder: (BuildContext context, Widget child) {
              return MediaQuery(
                data: MediaQuery.of(context)
                    .copyWith(alwaysUse24HourFormat: true),
                child: child,
              );
            },
          );
        },
      ),
    );
  }
}

`stable`	`master`
❌	❌

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.2, on Microsoft Windows [Version 10.0.19043.1081], locale en-US)
    • Flutter version 2.2.2 at C:\Users\Taha\Code\flutter_stable
    • Framework revision d79295af24 (3 weeks ago), 2021-06-11 08:56:01 -0700
    • Engine revision 91c9fc8fe0
    • Dart version 2.13.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_SDK_ROOT = C:\Users\Taha\Code\SDK
    • Java binary at: C:\Users\Taha\Code\android-studio\jre\bin\java.exe
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.10.2)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.10.31410.357
    • Windows 10 SDK version 10.0.19041.0

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[✓] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.1.1
    • Flutter plugin version 57.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.57.1)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.23.0

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • def0ad20 • android-arm64  • Android 10 (API 29)
    • Windows (desktop)      • windows  • windows-x64    • Microsoft Windows [Version 10.0.19043.1081]
    • Chrome (web)           • chrome   • web-javascript • Google Chrome 91.0.4472.114
    • Edge (web)             • edge     • web-javascript • Microsoft Edge 91.0.864.59

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.3.0-17.0.pre.578, on Microsoft Windows [Version 10.0.19043.1081], locale en-US)
    • Flutter version 2.3.0-17.0.pre.578 at C:\Users\Taha\Code\flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 01e10e793e (14 hours ago), 2021-06-29 20:41:02 -0400
    • Engine revision 9d2377f0d8
    • Dart version 2.14.0 (build 2.14.0-256.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_SDK_ROOT = C:\Users\Taha\Code\SDK
    • Java binary at: C:\Users\Taha\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.10.2)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.10.31410.357
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 4.2.0)
    • Android Studio at C:\Users\Taha\Code\android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[✓] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.1.1
    • Flutter plugin version 57.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.57.1)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.23.0

[✓] Connected device (5 available)
    • Redmi K20 Pro (mobile)  • def0ad20 • android-arm64   • Android 10 (API 29)
    • Windows (desktop)       • windows  • windows-x64     • Microsoft Windows [Version 10.0.19043.1081]
    • Windows (UWP) (desktop) • winuwp   • windows-uwp-x64 •
    • Chrome (web)            • chrome   • web-javascript  • Google Chrome 91.0.4472.114
    • Edge (web)              • edge     • web-javascript  • Microsoft Edge 91.0.864.59

• No issues found!

✅ : No Issue ❌: Issue reproduced

@darrenaustin

CC @darrenaustin

Same issue with French locale (stable to master)

It's unusual that the problem is resolved by re-entering the numbers through the keyboard.
Until this issue is fixed, we can try using TimePickerEntryMode and setting it to dialOnly. This may help create a cleaner picker and prevent users from switching to the input layout.

Here's the definition of TimePickerEntryMode for reference:

enum TimePickerEntryMode {
  // User picks time from a clock dial.
  // Can switch to 'input' by activating a mode button in the dialog.
  dial,

  // User can input the time by typing it into text fields.
  // Can switch to 'dial' by activating a mode button in the dialog.
  input,

  // User can only pick time from a clock dial.
  // There is no user interface to switch to another mode.
  dialOnly,

  // User can only input the time by typing it into text fields.
  // There is no user interface to switch to another mode.
  inputOnly
}

For example, when using the 'fa_IR' locale, the picker looks like this:

And for the 'en_US' locale, it appears as follows:

Are there any fixes to this issue?

my code:
final TimeOfDay? picked = await showTimePicker(
context: context,
initialTime: isStart ? _startTime : _endTime,
initialEntryMode: TimePickerEntryMode.input,
);
issue:

@BretechCode

@BretechCode

You can fix that by building the time picker in a MediaQuery widget:

final TimeOfDay? picked = await showTimePicker(
  context: context,
  initialTime: isStart ? _startTime : _endTime,
  initialEntryMode: TimePickerEntryMode.input,
  builder: (BuildContext context, Widget? child) {
    final mediaQueryData = MediaQuery.of(context);

    return MediaQuery(
      data: mediaQueryData.alwaysUse24HourFormat ? mediaQueryData : mediaQueryData.copyWith(alwaysUse24HourFormat: true),
      child: child?? const SizedBox(),
    );
  }
);

@lyabs243

This is still an issue. 24 hours formats do not work with French locale on web. @lyabs243 workaround is an ok fix in the meantime (thank you!).

Same happens with Brazilian Locale (Web)

It's frustrating that a bug reported so long ago hasn't been taken care of yet. We're talking about a basic component here

same issue with German locale. Quite an annoyance to have this issue persist for such a long time...

[material_ui] Fix for time picker error in locales that do not use La…

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.

Navigation Menu

Repository navigation

[TimePicker] `Enter a valid time` error in some locales #85527

Steps to Reproduce

10 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[TimePicker] Enter a valid time error in some locales #85527

Description

Steps to Reproduce

Activity

sm2017 commented on Jun 29, 2021

TahaTesser commented on Jun 30, 2021

HansMuller commented on Jun 30, 2021

woprandi commented on Jul 13, 2021

10 remaining items

MohammadGhodsian commented on Nov 6, 2023

BretechCode commented on Mar 18, 2024

lyabs243 commented on Mar 27, 2024

ClementCardonnel commented on Oct 25, 2024

tiagosilveiransj commented on Dec 23, 2024

ikso95 commented on Feb 12, 2025

ToH2002 commented on Mar 20, 2026

github-actions commented on Nov 5, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[TimePicker] `Enter a valid time` error in some locales #85527