flutter 如何更改showDatePicker输入格式抖动

cnjp1d6j 于 2023-01-09 发布在 Flutter

关注(0)|答案(3)|浏览(168)

我使用showDatePicker函数从对话框Calendar中选择一个日期，它在右上角显示一个编辑图标（见img 1）更改为输入模式，用户可以输入文本形式的日期（见img 2）问题是输入格式，我希望文本编辑器输入遵循此格式yyyy-mm-dd。问题是，在开始时它显示我的日期像yyyy-mm-dd，但是当i试图删除第一个数字时，它会自动更改为mm/dd/yyyy格式。
如何将输入格式设置为yyyy-mm-dd。如果showDatePicker不支持瑞典语，那么如何从右上角永远隐藏编辑图标。帮助我谢谢

图像1

图像2
下面是我的代码

DateTime selectedDate = DateTime.now();
  String date = DateFormat("yyyy-MM-dd").format(DateTime.now()); 
...
FlatButton(
         onPressed: ()async {

           final DateTime picked = await showDatePicker(
               locale: const Locale('sv'), // Swedish calander
               context: context,
               initialDate: selectedDate,
               firstDate: DateTime(1970, 8),
               lastDate: DateTime(2101));

           if (picked != null && picked != selectedDate) {
             setState(() {
               selectedDate = picked;
               String Onlydate = new DateFormat("yyyy-MM-dd").format(picked); 

               date = '$Onlydate';

             });
           }
         },
         child: Row(
           children: <Widget>[
             Text(' * $date'),
           ],
         ),
       );`

flutter

来源：https://stackoverflow.com/questions/62073968/how-to-change-showdatepicker-input-format-flutter

3条答案

按热度按时间

qxgroojn1#

现在没有删除编辑图标的选项。你可以尝试一些从here构建你自己的自定义日期选择器的软件包。这个软件包也支持瑞典语。

赞(0）回复(0）举报 2023-01-09

jogvjijk2#

默认showDatePicker使用MaterialApp小工具的属性localizationsDelegates和supportedLocales。所以要更改输入日期格式您must添加localizations属性在您的应用程序MaterialApp小工具，否则你会得到错误，当你通过local在showDatePicker选择器。

（我的Flutter版本3.3.9）
以下是我的工作步骤
1.将其添加到pubspec.yaml文件中。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # Add this line
    sdk: flutter         # Add this line

还有波纹管 Package 。localization和intl

2.更新MaterialApp小工具代码

import 'package:flutter_localizations/flutter_localizations.dart';
MaterialApp(
  title: 'APP NAME',
  localizationsDelegates: const [ 
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: const [
    Locale('en', 'GB'), // English, UK
    Locale('ar', 'AE'), // Arabic, UAE
    Locale('en', 'IN'), // English, India
  ],
  home:MyHomePage(title: 'Flutter Demo Home Page'),
);

现在在showDatePicker小部件中添加本地参数(language, country)，因此现在用户可以在dd/MM/yyyy中添加日期，而不会出现错误消息。

import 'package:intl/intl.dart';

// Declration.
final sDateFormate = "dd/MM/yyyy";
DateTime selectedDate = DateTime.now();
String date = DateFormat("dd/MM/yyyy").format(DateTime.now());

ElevatedButton(
    onPressed: () async {
      final DateTime? picked = await showDatePicker(
        locale: const Locale('en', 'GB'),
        context: context,
        fieldHintText: sDateFormate,
        initialDate: selectedDate,
        firstDate: DateTime(1970, 8),
        lastDate: DateTime(2101),
      );
    
      if (picked != selectedDate) {
        setState(() {
          selectedDate = picked!;
    
          date = DateFormat(sDateFormate).format(picked);
          
        });
      }
    },
    child: Row(
      children: <Widget>[
        Text(' * $date'),
      ],
    ),
)

这里附加有用的网址，其中包含国家名单与langue code，country code和date formate-Link
official link用于更详细地定位。
如果您想要隐藏日历中的编辑按钮，请添加showDatePicker中的属性。

final DateTime? selectDate = await showDatePicker(
 initialEntryMode: DatePickerEntryMode.calendarOnly, // Hide edit button
....     //other properties
);

赞(0）回复(0）举报 2023-01-09

htzpubme3#

Flutter团队在最新版本中解决了这个问题。
可以使用构造函数参数
第一个月
隐藏文本输入。我不知道如何改变日期格式。

赞(0）回复(0）举报 2023-01-09