Flutter开发之——日期选择器

onChanged: (date) {
setState(() {
_selectedDate = date;
});
},
firstDate: DateTime(2021, 4, 3),
lastDate: DateTime(2021, 4, 31),
displayedMonth: DateTime(2021, 4),
),
)
效果图

[外链图片转存中…(img-wE3t92aQ-1737298883586)]
三 CalendarDatePicker(代替DayPicker)

---

3.1 构造方法

CalendarDatePicker({
Key? key,
required DateTime initialDate,
required DateTime firstDate,
required DateTime lastDate,
DateTime? currentDate,
required this.onDateChanged,
this.onDisplayedMonthChanged,
this.initialCalendarMode = DatePickerMode.day,
this.selectableDayPredicate,
})
3.2 阐明

• CalendarDatePicker是用来替代DayPicker的
  
• 必要使用父容器如Flexible或者规定宽和高
  

3.3 示例

代码

DateTime _selectedDate = DateTime.now();
Text(“CalenderDayPicker-示例”),
Flexible(
child: CalendarDatePicker(
initialDate: DateTime.now(),
firstDate: DateTime(2021, 4, 3),
lastDate: DateTime(2021, 04, 30),
onDateChanged: (date) {
_selectedDate = date;
},
selectableDayPredicate: (date) {
return date.difference(DateTime.now()).inMicroseconds < 0;
},
))
效果图

四 MonthPicker

---

4.1 阐明

• MonthPicker跟DayPicker界面展示和属性功能根本同等
  
• MonthPicker也是过期类，被CalendarDatePicker替代
  

4.2 示例

代码

Text(“MonthPicker-示例”),
MonthPicker(
selectedDate: _selectedDate,
onChanged: (date) {
setState(() {
_selectedDate = date;
});
},
firstDate: DateTime(2020, 1),
lastDate: DateTime(2020, 12),
),
效果图

[外链图片转存中…(img-IDOmTcio-1737298883589)]
五 YearPicker

---

5.1 阐明

• YearPicker跟DayPicker的属性雷同
  
• YearPicker只有年份展示，并不包罗月份和日期
  

5.2 示例

代码

Text(“YearPicker”),
Flexible(
child: YearPicker(
selectedDate: _selectedDate,
onChanged: (date) {
setState(() {
_selectedDate = date;
});
},
dragStartBehavior: DragStartBehavior.start,
firstDate: DateTime(2000, 1),
lastDate: DateTime(2021, 12),
)),
效果图

[外链图片转存中…(img-arU5QWA5-1737298883590)]
六 showDatePicker

---

6.1 阐明

• showDatePicker并不是一个新的控件
  
• 长跟按钮的点击事件连用，点击后弹出日期选择框
  

6.2 示例

代码

Text(“showDatePicker”),
RaisedButton(child: Text(“选择日期”),
onPressed: () async {
var result = await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2020),
lastDate: DateTime(2030));
print(‘$result’);
},
)
效果图

[外链图片转存中…(img-ZZUHIQwi-1737298883590)]
示例2-设置主题(builder)

代码

RaisedButton(child: Text(“选择日期”),
onPressed: () async {
var result = await showDatePicker(
builder: (context, child) {
return Theme(
data: ThemeData.dark(),
child: child,
);
},
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2020),
lastDate: DateTime(2030));
print(‘$result’);
},
)
效果图

七 CupertinoDatePicker-仿IOS时间控件

---

7.1 示例

Text(“IOS风格-时间控件”),
Flexible(child: CupertinoDatePicker(
use24hFormat: true,
initialDateTime: _selectedDate,
onDateTimeChanged: (date) {
setState(() {
_selectedDate = date;
});
},
))
效果图

[外链图片转存中…(img-qT1oTJxJ-1737298883591)]
八 showTimePicker

---

8.1 阐明

• showDatePicker是点击后进行日期选择联动，showTimePicker是点击后进行时间选择联动
  
• 长跟按钮的点击事件连用，点击后弹出时间选择框
  
• showTimePicker同showDatePicker可以设置深色主题
  

8.2 示例

代码

Text(“showTimePicker”),
RaisedButton(child: Text(“showTimePicker”),
onPressed: () async {
showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
builder: (context, child) {
return MediaQuery(
data: MediaQuery.of(context)
.copyWith(alwaysUse24HourFormat: true),
child: child,
);
});
},
),
效果图

[外链图片转存中…(img-5DagY85r-1737298883591)]
九 CupertinoTimerPicker -IOS时间选择器

---

9.1 示例

代码

Container(
height: 200,
child: CupertinoTimerPicker(
initialTimerDuration: Duration(
hours: _selectedDate.hour,
diaQuery(
data: MediaQuery.of(context)
.copyWith(alwaysUse24HourFormat: true),
child: child,
);
});
},
),
效果图

[外链图片转存中…(img-5DagY85r-1737298883591)]
九 CupertinoTimerPicker -IOS时间选择器

---

9.1 示例

代码

Container(
height: 200,
child: CupertinoTimerPicker(
initialTimerDuration: Duration(
hours: _selectedDate.hour,

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。