flutter - 我想在文本字段中显示日期选择器,并在文本字段中删除选定的日期
问题描述
我想在文本字段中显示日期选择器,并在文本字段中删除选定的日期。
要选择日期,我使用可点击的图像和在文本字段中设置的选定日期,但我无法从文本字段中删除该日期。
Widget build(BuildContext context) {
return Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
LightText(
text: ' ${widget.labelTxt}',
),
Padding(
padding: EdgeInsets.only(top: 3),
),
Container(
height: 24,
padding: EdgeInsets.only(left: 5),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(3)),
child: Theme(
data: ThemeData(hintColor: lightGrey),
child: TextField(
enabled: isEditForInputField
? !widget.enableVal ? false : true
: false,
controller: widget.controllerText,
keyboardType: TextInputType.number,
decoration: InputDecoration(
suffix: GestureDetector(
onTap: (){
isEditForInputField
? _selectDate(context, widget.value,
widget.firebaseKey, widget.index)
: null;
},
child: Padding(
padding: const EdgeInsets.only(top: 7.0, right: 3.0,),
child: Image.asset('assets/images/calendar.png',
height: 25.0,
width: 25.0,
),
),
),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
border: OutlineInputBorder(),
contentPadding: const EdgeInsets.symmetric(
vertical: 3.0, horizontal: 5.0)),
),
),
),
],
),
解决方案
我想你应该试试这个。
如下创建一个小部件,
Column(
children: <Widget>[
Container(
color: Colors.grey[300],
margin: EdgeInsets.all(10.0),
padding: EdgeInsets.all(10.0),
width: double.infinity,
child: GestureDetector(
onTap: () {
openDatePicker(dateValue);
},
child: Row(
children: <Widget>[
Expanded(
flex: 9,
child: Text(dateValue),
),
Expanded(
flex: 1,
child: Icon(Icons.calendar_today),
),
],
),
),
),
],
),
将此代码添加到您的有状态小部件,
String dateValue = "Select Date";
DateTime selectedDate = DateTime.now();
openDatePicker(initialDateString) async {
var initialDate = convertToDate(initialDateString) ?? selectedDate;
initialDate =
(initialDate.year >= 1900 && initialDate.isBefore(selectedDate)
? initialDate
: selectedDate);
final DateTime pickedDate = await showDatePicker(
context: context,
initialDate: initialDate,
firstDate: DateTime(2018, 1),
lastDate: DateTime(3000),
);
if (pickedDate != null && pickedDate != selectedDate) {
setState(() {
selectedDate = pickedDate;
dateValue = new DateFormat.yMd().format(pickedDate);
});
}
}
DateTime convertToDate(String input) {
try {
var d = new DateFormat.yMd().parseStrict(input);
return d;
} catch (e) {
return null;
}
}
@override
void initState() {
super.initState();
dateValue = new DateFormat.yMd().format(selectedDate);
}
您现在可以轻松管理您的约会。如果您想从文本中删除您选择的日期,请创建另一个小部件,例如 IconButton 或其他任何适合您的小部件。然后该小部件的 onPress 将 dateValue 设置为空并 setState 您的小部件。
这将对您有所帮助。
推荐阅读
- php - 如何清理 WordPress 和 WooCommerce 中的全局 PHP 变量
- java - TreeSet 是否使用 equals 或 compareTo 来消除重复项?
- javascript - 使用 for 循环将每个单词的第一个字母大写(不能处理间距)
- excel - 如何使用 Power Query 从 MS Excel 中的同一工作表中仅提取多个表?
- javascript - 如何在 mapbox gl js 中的 wms 图层示例上添加鼠标移动事件?
- java - JavaFx 自定义 ListCell 为空
- java - Spring Java 8 项目,REST DOCS,无法创建目录
- c# - 如何使用c#一一读取db表列数据
- java - 在 JAXB 中,如何将节点值设置为字符串字段的属性值?
- python - 如何在pandas / python中将多个数据框obj合并为一个具有给定条件的数据框obj