Flutter自定义日期时间选择器插件datetime_picker_custom_qk的使用
Flutter 自定义日期时间选择器插件 datetime_picker_custom_qk 的使用
文档
| 日期时间 | 日期选择器 | 时间选择器 | 日期对话框 |
|---|---|---|---|
 |
 |
 |
 |
示例应用
使用
Padding(
padding: const EdgeInsets.all(16.0),
child: picker.InputDateTimePicker(
isDiaLog: false,
controller: _dateController,
minDate: DateTime(2018, 1, 1),
decoration: const InputDecoration(
labelText: '输入自定义底部日期',
hintText: '输入自定义底部日期',
suffixIcon: Icon(Icons.calendar_today),
),
onConfirm: (date) {
_dateController.text = date.toString();
print('确认 $date');
},
locale: picker.LocaleType.vi,
),
)
完整示例代码
import 'dart:developer';
import 'package:datetime_picker_custom_qk/datetime_picker_custom_qk.dart' as picker;
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class CustomPicker extends picker.CommonPickerModel {
String digits(int value, int length) {
return '$value'.padLeft(length, "0");
}
CustomPicker({DateTime? currentTime, super.locale}) {
this.currentTime = currentTime ?? DateTime.now();
setLeftIndex(this.currentTime.hour);
setMiddleIndex(this.currentTime.minute);
setRightIndex(this.currentTime.second);
}
[@override](/user/override)
String? leftStringAtIndex(int index) {
if (index >= 0 && index < 24) {
return digits(index, 2); // 返回小时，格式化为两位数
} else {
return null;
}
}
[@override](/user/override)
String? middleStringAtIndex(int index) {
if (index >= 0 && index < 60) {
return digits(index, 2); // 返回分钟，格式化为两位数
} else {
return null;
}
}
[@override](/user/override)
String? rightStringAtIndex(int index) {
if (index >= 0 && index < 60) {
return digits(index, 2); // 返回秒，格式化为两位数
} else {
return null;
}
}
[@override](/user/override)
String leftDivider() {
return "|"; // 左侧分隔符
}
[@override](/user/override)
String rightDivider() {
return "|"; // 右侧分隔符
}
[@override](/user/override)
List<int> layoutProportions() {
return [1, 2, 1]; // 设置布局比例
}
[@override](/user/override)
DateTime finalTime() {
return currentTime.isUtc
? DateTime.utc(currentTime.year, currentTime.month, currentTime.day,
currentLeftIndex(), currentMiddleIndex(), currentRightIndex())
: DateTime(currentTime.year, currentTime.month, currentTime.day,
currentLeftIndex(), currentMiddleIndex(), currentRightIndex());
}
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
[@override](/user/override)
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final TextEditingController _dateController = TextEditingController();
final TextEditingController _dateControllerInput = TextEditingController();
final TextEditingController _dateControllerYear = TextEditingController();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('日期时间选择器'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: picker.InputDateTimePicker(
isDiaLog: false,
controller: _dateControllerInput,
minDate: DateTime(2018, 1, 1),
decoration: const InputDecoration(
labelText: '输入自定义底部日期',
hintText: '输入自定义底部日期',
suffixIcon: Icon(Icons.calendar_today),
),
onConfirm: (date) {
_dateControllerInput.text = date.toString();
log('确认测试 $date');
},
locale: picker.LocaleType.vi,
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: picker.InputDateTimePicker(
isDiaLog: false,
isYear: true,
controller: _dateControllerYear,
minDate: DateTime(2018, 1, 1),
decoration: const InputDecoration(
labelText: '输入自定义底部年份',
hintText: '输入自定义底部年份',
suffixIcon: Icon(Icons.calendar_today),
),
onConfirm: (date) {
_dateControllerYear.text = date.year.toString();
log('确认测试 $date');
},
locale: picker.LocaleType.vi,
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
controller: _dateController,
decoration: const InputDecoration(
labelText: '输入自定义对话框日期',
hintText: '输入自定义对话框日期',
suffixIcon: Icon(Icons.calendar_today),
),
readOnly: true,
onTap: () {
picker.DatePicker.showDatePicker(
context,
isDiaLog: true,
showTitleActions: true,
minTime: DateTime(2018, 3, 5),
onChanged: (date) {
log('更改 $date 在时区 ${date.timeZoneOffset.inHours}');
},
onConfirm: (date) {
_dateController.text =
'${date.day}-${date.month}-${date.year}';
log('确认 $date');
},
currentTime: DateTime.now(),
locale: picker.LocaleType.vi,
);
},
),
),
TextButton(
onPressed: () {
picker.DatePicker.showDatePicker(context,
showTitleActions: true,
minTime: DateTime(2018, 3, 5),
onChanged: (date) {
log('更改 $date 在时区 ${date.timeZoneOffset.inHours}');
},
onConfirm: (date) {
log('确认 $date');
},
currentTime: DateTime.now(),
locale: picker.LocaleType.vi);
},
child: const Text(
'显示日期',
style: TextStyle(color: Colors.black),
),
),
TextButton(
onPressed: () {
picker.DatePicker.showTimePicker(context,
showTitleActions: true,
onChanged: (date) {
log('更改 $date 在时区 ${date.timeZoneOffset.inHours}');
},
onConfirm: (date) {
log('确认 $date');
},
currentTime: DateTime.now());
},
child: const Text(
'显示时间',
style: TextStyle(color: Colors.black),
),
),
TextButton(
onPressed: () {
picker.DatePicker.showTime12hPicker(context,
showTitleActions: true,
onChanged: (date) {
log('更改 $date 在时区 ${date.timeZoneOffset.inHours}');
},
onConfirm: (date) {
log('确认 $date');
},
currentTime: DateTime.now());
},
child: const Text(
'显示12小时制时间选择器（AM/PM）',
style: TextStyle(color: Colors.black),
),
),
TextButton(
onPressed: () {
picker.DatePicker.showDateTimePicker(context,
showTitleActions: true,
minTime: DateTime(2020, 5, 5, 20, 50),
maxTime: DateTime(2020, 6, 7, 05, 09),
onChanged: (date) {
log('更改 $date 在时区 ${date.timeZoneOffset.inHours}');
},
onConfirm: (date) {
log('确认 $date');
},
locale: picker.LocaleType.vi);
},
child: const Text(
'显示日期时间选择器',
style: TextStyle(color: Colors.black),
),
),
TextButton(
onPressed: () {
picker.DatePicker.showDateTimePicker(context,
showTitleActions: true,
onChanged: (date) {
log('更改 $date 在时区 ${date.timeZoneOffset.inHours}');
},
onConfirm: (date) {
log('确认 $date');
},
currentTime: DateTime.utc(2019, 12, 31, 23, 12, 34),
locale: picker.LocaleType.vi);
},
child: const Text(
'显示UTC（越南）日期时间选择器',
style: TextStyle(color: Colors.black),
),
),
],
),
);
}
}
更多关于Flutter自定义日期时间选择器插件datetime_picker_custom_qk的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
