android 日期国际化,Flutter 日期时间DatePicker控件及国际化

注意：无特殊说明，flutter版本及dart版本如下：

flutter版本： 1.12.13+hotfix.5

dart版本： 2.7.0

datepicker

flutter并没有datepicker这个控件，需要使用showdatepicker方法弹出日期选择控件，基本用法如下：

raisedbutton(

onpressed: () async {

var result = await showdatepicker(

context: context,

initialdate: datetime.now(),

firstdate: datetime(2020),

lastdate: datetime(2021));

print('$result');

},

)

initialdate初始化时间，通常情况下设置为当前时间。

firstdate表示开始时间，设置后，选择器不能选择小于此值的时间。

lastdate表示结束时间，设置后，选择器不能选择大于此值的时间。

showdatepicker方法是future方法，点击日期选择控件的“确定按钮后，返回选择的日期。

效果如下：

selectabledaypredicate参数控制可选日期，返回true表示日期可选，用法如下：

showdatepicker(

selectabledaypredicate: (datetime day) {

return day.difference(datetime.now()).indays < 2;

},

...

)

表示后天之前的时间可选，效果如下：

19日及以后的日期变为灰色，不可选状态。

builder参数用于设置设置子控件，比如设置深色主题用法如下：

showdatepicker(

builder: (context, child) {

return theme(

data: themedata.dark(),

child: child,

);

},

...

)

效果如下：

中文支持

增加国际化处理，在pubspec.yaml添加支持：

dependencies:

flutter:

sdk: flutter

flutter_localizations:

sdk: flutter

在顶级控件materialapp添加国际化支持：

materialapp(

localizationsdelegates: [

globalmateriallocalizations.delegate,

globalwidgetslocalizations.delegate,

],

supportedlocales: [

const locale('zh', 'ch'),

const locale('en', 'us'),

],

locale: locale('zh'),

...

)

设置showdatepicker的local参数如下：

showdatepicker(

locale: locale('zh'),

...

)

效果如下：

timepicker

timepicker和datepicker一样，需要使用showtimepicker方法，用法如下：

raisedbutton(

onpressed: () async {

showtimepicker(

context: context, initialtime: timeofday.now());

},

)

效果如下：

​ builder参数用于控制子控件，可以向datepicker一样设置深色主题，还可以设置其显示24小时，用法如下：

showtimepicker(

context: context,

initialtime: timeofday.now(),

builder: (context, child) {

return mediaquery(

data: mediaquery.of(context)

.copywith(alwaysuse24hourformat: true),

child: child,

);

});

效果如下：

中文支持

添加国际化支持，步骤同datepicker中文支持，但showtimepicker并没有local参数，使用builder参数设置，如下：

showtimepicker(

context: context,

initialtime: timeofday.now(),

builder: (context, child) {

return localizations(

locale: const locale('zh'),

child: child,

delegates: [

globalmateriallocalizations.delegate,

globalwidgetslocalizations.delegate,

]

);

});

效果如下：

cupertinodatepicker

ios风格的日期选择器，用法如下：

var _datetime = datetime.now();

cupertinodatepicker(

initialdatetime: _datetime,

ondatetimechanged: (date) {

setstate(() {

_datetime = date;

});

},

)

效果如下：

mode参数设置日期的格式：

time：只显示时间，效果：4 | 14 | pm

date：只显示日期，效果：july | 13 | 2012

dateandtime：时间和日期都显示，效果： fri jul 13 | 4 | 14 | pm

设置最大日期和最小日期：

cupertinodatepicker(

minimumdate: datetime.now().add(duration(days: -1)),

maximumdate: datetime.now().add(duration(days: 1)),

...

)

效果如下：

使用24小时制：

cupertinodatepicker(

use24hformat: true,

...

)

cupertinotimerpicker

cupertinotimerpicker 是ios风格的时间选择器，基本用法如下：

cupertinotimerpicker(

ontimerdurationchanged: (duration duration){

},

)

效果如下：

设置只显示小时和分钟：

cupertinotimerpicker(

mode: cupertinotimerpickermode.hm,

...

)

默认情况下，cupertinotimerpicker显示0：0：0，设置显示当前时间：

var now = datetime.now();

return container(

height: 200,

child: cupertinotimerpicker(

initialtimerduration: duration(hours: now.hour,minutes: now.minute,seconds: now.second),

ontimerdurationchanged: (duration duration) {},

),

);

欢迎加入flutter的微信交流群(mqd_zzy)，一起学习，一起进步，生活不止眼前的苟且，还有诗和《远方》。

当然我也非常希望您关注我个人的公众号，里面有各种福利等着大家哦。