flutter实现日期选择

发布时间:2022-01-28 22:17:59

github上还是有很多控制 实现日期选择功能。但看起来都太复杂。于是还是用原生的功能 showDatePicker 为了验证的话,我们最好将值赋在TextFormField里面

1.实现点击选择的时候必须设置为只读,这是因为不这样设置的话,获得焦点时会出现输入键盘

  TextFormField(
                  readOnly: true, //设置只读才好使用onTap
                  controller: recordDateController, //设置TextEditingController对象 用于赋值
                  decoration: InputDecoration(
                    hintText: '请选择日期',
                    hintStyle: FontConstant.hintStyle,
                  ),
                  onTap: selDate, //选择日期方法
                  validator: (value) {
                    if (value!.isEmpty) {
                      return '请选择日期';
                    }

                    return null;
                  },
                ),

2.写ontap事件selDate

Future<void> selDate() async {
    var result = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(2020),
        lastDate: DateTime(2023)
    );
    recordDateController.text=result.toString(); //赋值给text
    print(result);
  }

3.这个时候可以使用了,但是日期弹窗显示的格式不是中文的。所以我们需要接着解决国际化的问题 首先引入依赖

flutter_localizations:
    sdk: flutter

4.然后再在main.dart中设置语言信息

引入包:

import 'package:flutter_localizations/flutter_localizations.dart';

return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale.fromSubtags(languageCode: 'zh'),
        const Locale.fromSubtags(languageCode: 'en'),
      ],
      locale: Locale('zh'),


Card image cap
APP STORE
Card image cap
应用宝
Card image cap
小米
Card image cap
华为