どうも、ちょげ(@chogetarou)です。
DatePickerで選択した日付をテキストフィールに、入力できるようにするにはどうしたらいいのでしょうか？
方法
DateTime? _selectedDate;
TextEditingController _textEditingController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: [
TextField(
controller: _textEditingController,
),
IconButton(
onPressed: () {
_selectDate(context);
},
icon: Icon(Icons.calendar_today))
],
),
),
));
}
_selectDate(BuildContext context) async {
final newSelectedDate = await showDatePicker(
context: context,
initialDate: _selectedDate ?? DateTime.now(),
firstDate: DateTime(2000),
lastDate: DateTime(2040),
);
if (newSelectedDate != null) {
_selectedDate = newSelectedDate;
_textEditingController.text = _selectedDate.toString();
}
}DatePickerでテキストフィールドに入力するには、TextEditingControllerを用意します。
TextEditingController _textEditingController = TextEditingController();次に、このコントローラをTextFieldに設定します。
TextField(
controller: _textEditingController,
)そして、「DatePicker」を呼び出す関数を用意します。
_selectDate(BuildContext context) async {
final newSelectedDate = await showDatePicker(
context: context,
initialDate: _selectedDate ?? DateTime.now(),
firstDate: DateTime(2000),
lastDate: DateTime(2040),
);
if (newSelectedDate != null) {
_selectedDate = newSelectedDate;
_textEditingController.text = _selectedDate.toString();
}
}ポイントとなるのは、選択し終わった後です。
TextFieldに設定したコントローラの「text」プロパティに、選択した日付を設定します。
_textEditingController.text = _selectedDate.toString();あとは、タップやスワイプなどで、この関数を呼び出せば、DatePickerでテキストフィールドに入力することが出来るようになります。
コメント