CupertinoDatePicker - Day of the week always in EN (locale issue) #141875

edumolins · 2024-01-19T16:48:29Z

Steps to reproduce

I have implemented a picker with CupertinoDatePicker to select a day within a reservation process. I need the day of the week to be displayed to help the users in the booking so I have enabled the following parameter:

showDayOfWeek: true,

The issue occurs when combining this showDayOfWeek: true and this mode:

mode: CupertinoDatePickerMode.date

In this case the day of the week always displays in EN. The application supports EN, ES, and CA. One might think it's because the localizations are not properly configured, but the months appear in the correct language according to the device's locale. However, the day of the week does not. Additionally, if the mode is changed to

mode: CupertinoDatePickerMode.dateAndTime

the day of the week appears in the proper language. I am attaching screenshots.

Expected results

The day of the week should vary according to the locale, just like the language of the months changes

Actual results

The day of the week always appears in English

Code sample

I have this locale configuration in Material App of main.dart

Code sample

 supportedLocales: const [
        Locale('es'), // Spanish
        Locale('ca'), // Catalan
        Locale('en'), // English
      ],
      locale: locale,
      onGenerateRoute: (_) => SplashScreen.route(),
      localizationsDelegates: [
        widget.flutterI18nDelegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
      ],

That's the implementation of CupertinoDatePickerWidget. The error occurs specifically in date mode.

CupertinoDatePicker(
          mode: CupertinoDatePickerMode.date,
          showDayOfWeek: true,
          minimumDate: DateTime(now.year, now.month, now.day, 0, 0, 0, 0),
          maximumYear: DateTime.now().year   1,
          minimumYear: DateTime.now().year,
          initialDateTime: widget.dayPicked,
          maximumDate: DateTime.now().add(const Duration(days: 365)),
          onDateTimeChanged: (datePicked) {
            widget.onDateChanged!(datePicked);
          }),

Screenshots or Video

Screenshots / Video demonstration

![ca1](https://github.com/flutter/flutter/assets/1089537/838a2d73-4f66-4b88-a83d-dabca468cad7) ![es1](https://github.com/flutter/flutter/assets/1089537/0ee7c2d0-b641-429e-9fd8-3b9bddcc25f8) ![ok1](https://github.com/flutter/flutter/assets/1089537/cd1177a2-89ed-427c-a6b9-26a8cf99400a)

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.13.5, on macOS 12.6.9 21G726 darwin-x64, locale es-ES)
    • Flutter version 3.13.5 on channel stable at /Users/edumolins/Desktop/flutter_313
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 12fccda598 (4 months ago), 2023-09-19 13:56:11 -0700
    • Engine revision bd986c5ed2
    • Dart version 3.1.2
    • DevTools version 2.25.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc1)
    • Android SDK at /Users/edumolins/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13 0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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.13 0-b1751.21-8125866)

[✓] Connected device (3 available)
    • 2306EPN60G (mobile) • 4P4PNVOZBUM7QOVO • android-arm64  • Android 14 (API 34)
    • macOS (desktop)     • macos            • darwin-x64     • macOS 12.6.9 21G726 darwin-x64
    • Chrome (web)        • chrome           • web-javascript • Google Chrome 120.0.6099.234

[✓] Network resources
    • All expected network resources are available.

darshankawar · 2024-01-22T07:01:36Z

Thanks for the report. I was able to replicate the reported behavior.

runnable code sample


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

/// Flutter code sample for [CupertinoDatePicker].

void main() => runApp(const DatePickerApp());

class DatePickerApp extends StatelessWidget {
  const DatePickerApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      localizationsDelegates: [
        GlobalCupertinoLocalizations.delegate
      ],
      supportedLocales: const [
        Locale('es'), // Spanish
        Locale('ca'), // Catalan
        Locale('en'), // English
      ],
      locale: Locale('ca','CA'),

      theme: CupertinoThemeData(brightness: Brightness.light),
      home: DatePickerExample(),
    );
  }
}

class DatePickerExample extends StatefulWidget {
  const DatePickerExample({super.key});

  @override
  State<DatePickerExample> createState() => _DatePickerExampleState();
}

class _DatePickerExampleState extends State<DatePickerExample> {
  DateTime date = DateTime(2016, 10, 26);
  DateTime time = DateTime(2016, 5, 10, 22, 35);
  DateTime dateTime = DateTime(2016, 8, 3, 17, 45);

  // This function displays a CupertinoModalPopup with a reasonable fixed height
  // which hosts CupertinoDatePicker.
  void _showDialog(Widget child) {
    showCupertinoModalPopup<void>(
      context: context,
      builder: (BuildContext context) => Container(
        height: 216,
        padding: const EdgeInsets.only(top: 6.0),
        // The Bottom margin is provided to align the popup above the system
        // navigation bar.
        margin: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
        ),
        // Provide a background color for the popup.
        color: CupertinoColors.systemBackground.resolveFrom(context),
        // Use a SafeArea widget to avoid system overlaps.
        child: SafeArea(
          top: false,
          child: child,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('CupertinoDatePicker Sample'),
      ),
      child: DefaultTextStyle(
        style: TextStyle(
          color: CupertinoColors.label.resolveFrom(context),
          fontSize: 22.0,
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              _DatePickerItem(
                children: <Widget>[
                  const Text('Date'),
                  CupertinoButton(
                    // Display a CupertinoDatePicker in date picker mode.
                    onPressed: () => _showDialog(
                      CupertinoDatePicker(
                          mode: CupertinoDatePickerMode.date,
                          showDayOfWeek: true,
                          minimumDate: DateTime(2018),
                          maximumYear: DateTime.now().year   1,
                          minimumYear: DateTime.now().year,
                          initialDateTime: DateTime.now(),
                          maximumDate: DateTime.now().add(const Duration(days: 365)),
                          onDateTimeChanged: (datePicked) {
                            print(datePicked);
                          }),
                    ),
                    // In this example, the date is formatted manually. You can
                    // use the intl package to format the value based on the
                    // user's locale settings.
                    child: Text(
                      '${date.month}-${date.day}-${date.year}',
                      style: const TextStyle(
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                ],
              ),
              _DatePickerItem(
                children: <Widget>[
                  const Text('Time'),
                  CupertinoButton(
                    // Display a CupertinoDatePicker in time picker mode.
                    onPressed: () => _showDialog(
                      CupertinoDatePicker(
                        initialDateTime: time,
                        mode: CupertinoDatePickerMode.time,
                        use24hFormat: true,
                        // This is called when the user changes the time.
                        onDateTimeChanged: (DateTime newTime) {
                          setState(() => time = newTime);
                        },
                      ),
                    ),
                    // In this example, the time value is formatted manually.
                    // You can use the intl package to format the value based on
                    // the user's locale settings.
                    child: Text(
                      '${time.hour}:${time.minute}',
                      style: const TextStyle(
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                ],
              ),
              _DatePickerItem(
                children: <Widget>[
                  const Text('DateTime'),
                  CupertinoButton(
                    // Display a CupertinoDatePicker in dateTime picker mode.
                    onPressed: () => _showDialog(
                      CupertinoDatePicker(
                        initialDateTime: dateTime,
                        use24hFormat: true,
                        // This is called when the user changes the dateTime.
                        onDateTimeChanged: (DateTime newDateTime) {
                          setState(() => dateTime = newDateTime);
                        },
                      ),
                    ),
                    // In this example, the time value is formatted manually. You
                    // can use the intl package to format the value based on the
                    // user's locale settings.
                    child: Text(
                      '${dateTime.month}-${dateTime.day}-${dateTime.year} ${dateTime.hour}:${dateTime.minute}',
                      style: const TextStyle(
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// This class simply decorates a row of widgets.
class _DatePickerItem extends StatelessWidget {
  const _DatePickerItem({required this.children});

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: const BoxDecoration(
        border: Border(
          top: BorderSide(
            color: CupertinoColors.inactiveGray,
            width: 0.0,
          ),
          bottom: BorderSide(
            color: CupertinoColors.inactiveGray,
            width: 0.0,
          ),
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: children,
        ),
      ),
    );
  }
}

With mode: CupertinoDatePickerMode.dateAndTime and monthYear, it works as expected:

stable, master flutter doctor -v

[!] Flutter (Channel stable, 3.16.8, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.16.8 on channel stable at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 67457e669f (2 days ago), 2024-01-16 16:22:29 -0800
    • Engine revision 6e2ea58a5c
    • Dart version 3.2.5
    • DevTools version 2.28.5
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.19.0-8.0.pre.50, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 3.19.0-8.0.pre.50 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c95bb6fbb3 (2 hours ago), 2024-01-18 19:42:23 -0800
    • Engine revision d1afda52d2
    • Dart version 3.4.0 (build 3.4.0-24.0.dev)
    • DevTools version 2.31.0
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/dhs/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

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

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 65.1.4
    • Dart plugin version 213.7228

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

[✓] Connected device (3 available)
    • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
      • iOS 15.3.1 19D52
    • macOS (desktop)           • macos                                    •
      darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)              • chrome                                   •
      web-javascript • Google Chrome 109.0.5414.119

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
      
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

marcio-ota · 2024-05-24T13:43:01Z

The problem is still in version 3.22.1

flutter-triage-bot · 2024-05-29T22:14:08Z

This issue is assigned to @MitchellGoodwin but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

salvatoremiccio · 2024-07-04T21:16:22Z

Any news about this issue?

victorsanni · 2024-07-09T19:00:45Z

This happens because currently, if weekday is set (via showDayOfWeek), the default localization (en) is always used:

flutter/packages/flutter_localizations/lib/src/cupertino_localizations.dart

Lines 116 to 119 in 5103d75

 String datePickerDayOfMonth(int dayIndex, [int? weekDay]) { 

 if (weekDay != null) { 

 return ' ${DefaultCupertinoLocalizations.shortWeekdays[weekDay - DateTime.monday]} $dayIndex '; 

 }

I'm in the process of figuring out why that is so.

victorsanni · 2024-07-09T23:29:01Z

So the entire datePickerDayOfMonth method (I think) will need some refactoring. Currently, it is trying to get the String day of the week (Monday, Tuesday, etc) only from the numerical day of the week (Day 1, Day 2, etc). It currently works with EN because of a hardcoded list of String days to numerical days (or indices)

flutter/packages/flutter/lib/src/cupertino/localizations.dart

Lines 346 to 354 in a99042e

  static const List<String> shortWeekdays = <String>[ 

 'Mon', 

 'Tue', 

 'Wed', 

 'Thu', 

 'Fri', 

 'Sat', 

 'Sun', 

 ];

but with other locales we will need some sort of mapping of the String day of the week to the numerical day of the week.

Currently I'm thinking of making a new function, say datePickerDayOfWeek that would take the full date and calculate what day of the week it would represent in any locale.

EDIT: Alternatively assuming no locale has skipped a day (or has some other unique behavior) I could just calculate sequentially from the first UTC day. Then the full date would not be needed.

cc @MitchellGoodwin

salvatoremiccio · 2024-07-24T11:35:18Z

When will this fix be released? In the changelogs of the latest stable version of flutter it is not mentioned.

victorsanni · 2024-07-26T21:49:37Z

When will this fix be released? In the changelogs of the latest stable version of flutter it is not mentioned.

Thanks for reaching out @salvatoremiccio! Currently the fix is only on master, and it has not been tagged to any candidate branches. Typically, it will go to beta by the next release, then stable after that one. This doc on Flutter's release process has more information.

github-actions · 2024-08-09T22:00:39Z

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.

darshankawar added the in triage Presently being triaged by the triage team label Jan 22, 2024

HansMuller added P2 Important issues not at the top of the work list triaged-design Triaged by Design Languages team labels Jan 24, 2024

HansMuller assigned HansMuller and MitchellGoodwin and unassigned HansMuller Jan 24, 2024

flutter-triage-bot bot added the ⏳ Bot is counting down the days until it unassigns the issue label May 29, 2024

flutter-triage-bot bot removed the ⏳ Bot is counting down the days until it unassigns the issue label Jul 9, 2024

victorsanni mentioned this issue Jul 9, 2024

Use correct locale for CupertinoDatePicker weekday #151494

Merged

9 tasks

MitchellGoodwin removed their assignment Jul 10, 2024

auto-submit bot closed this as completed in #151494 Jul 11, 2024

auto-submit bot closed this as completed in ceeeb7d Jul 11, 2024

victorsanni self-assigned this Jul 11, 2024

darshankawar added the r: fixed Issue is closed as already fixed in a newer version label Jul 11, 2024

github-actions bot locked as resolved and limited conversation to collaborators Aug 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CupertinoDatePicker - Day of the week always in EN (locale issue) #141875

CupertinoDatePicker - Day of the week always in EN (locale issue) #141875

edumolins commented Jan 19, 2024 •

edited

Loading

darshankawar commented Jan 22, 2024

marcio-ota commented May 24, 2024

flutter-triage-bot bot commented May 29, 2024

salvatoremiccio commented Jul 4, 2024

victorsanni commented Jul 9, 2024 •

edited

Loading

victorsanni commented Jul 9, 2024 •

edited

Loading

salvatoremiccio commented Jul 24, 2024

victorsanni commented Jul 26, 2024 •

edited

Loading

github-actions bot commented Aug 9, 2024

CupertinoDatePicker - Day of the week always in EN (locale issue) #141875

CupertinoDatePicker - Day of the week always in EN (locale issue) #141875

Comments

edumolins commented Jan 19, 2024 • edited Loading

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

darshankawar commented Jan 22, 2024

marcio-ota commented May 24, 2024

flutter-triage-bot bot commented May 29, 2024

salvatoremiccio commented Jul 4, 2024

victorsanni commented Jul 9, 2024 • edited Loading

victorsanni commented Jul 9, 2024 • edited Loading

salvatoremiccio commented Jul 24, 2024

victorsanni commented Jul 26, 2024 • edited Loading

github-actions bot commented Aug 9, 2024

edumolins commented Jan 19, 2024 •

edited

Loading

victorsanni commented Jul 9, 2024 •

edited

Loading

victorsanni commented Jul 9, 2024 •

edited

Loading

victorsanni commented Jul 26, 2024 •

edited

Loading