颤动：DateTimefield手动编辑问题 [英] Flutter: DateTimeField manual editing problem

问题描述

我有DateTimeField，手动编辑日期时出现奇怪的问题。

以下是显示的默认值：

我通过双击选择了月份，并尝试手动键入08。

当我在月末12带上指针，并按backspace从12中删除2时。月份更改为01。

当我在年终按backspace时，从2018中删除8。已更改为0201。

以下是该字段的代码：

DateTimeField(
format: DateFormat("yyyy-MM-dd hh:mm:ss"),
onSaved: (val) => setState(() => _fromDate = val),
keyboardType: TextInputType.datetime,
onChanged: (DateTime newValue) {
  setState(() {
    _fromDate = newValue;
  });
},
onShowPicker: (context, currentValue) {
  return showDatePicker(
      context: context,
      firstDate: DateTime.now(),
      initialDate: currentValue ?? DateTime.now(),
      lastDate: DateTime.now().add(new Duration(days: 30))
      );
},
);

我不知道这是怎么回事。请告诉我，可能出了什么问题？

注意：

1. 使用选取器选择日期效果良好
2. 我在另一个页面中有date字段，它是yyyy-MM-dd格式的，在那里可以正常工作。

推荐答案

所以我已经尝试了您提供的可用样本。我有一个不同的行为，我不能手动编辑值。每当我尝试编辑表单时，日期选取器总是打开的。

以下是我从您的代码中测试过的完整的最小代码：

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';

void main() => runApp(BasicDateTimeField());

class BasicDateTimeField extends StatefulWidget {
  @override
  _BasicDateTimeFieldState createState() => _BasicDateTimeFieldState();
}

class _BasicDateTimeFieldState extends State<BasicDateTimeField> {
  @override
  Widget build(BuildContext context) {
    DateTime _fromDate;
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: DateTimeField(
            format: DateFormat("yyyy-MM-dd hh:mm:ss"),
            onSaved: (val) => setState(() => _fromDate = val),
            keyboardType: TextInputType.datetime,
            onChanged: (DateTime newValue) {
              setState(() {
                _fromDate = newValue;
              });
            },
            onShowPicker: (context, currentValue) {
              return showDatePicker(
                  context: context,
                  firstDate: DateTime.now(),
                  initialDate: currentValue ?? DateTime.now(),
                  lastDate: DateTime.now().add(new Duration(days: 30)));
            },
          ),
        ),
      ),
    );
  }
}

输出：

在示例中，我使用了datetime_picker_formfield: ^2.0.0插件的当前版本。

或许您可以使用内置的DateTime picker instead。

以下是我创建的示例演示，供您参考：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(primaryColor: Colors.blue),
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatefulWidget {
  createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  DateTime selectedDate = DateTime.now();

  Future<void> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2015, 8),
        lastDate: DateTime(2101));
    if (picked != null && picked != selectedDate)
      setState(() {
        selectedDate = picked;
      });
  }

  @override
  initState() {
    super.initState();
    selectedDate = DateTime.now();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo App"),
      ),
      body: ListView(padding: const EdgeInsets.all(16.0), children: [
        Container(
          height: 100,
          child: FlutterLogo(),
        ),
        SizedBox(height: 10.0),
        InputDatePickerFormField(
          firstDate: DateTime(2015, 8),
          lastDate: DateTime(2101),
          initialDate: selectedDate,
          onDateSubmitted: (date) {
            setState(() {
              selectedDate = date;
            });
          },
        ),
        // Text("Selected Date: $selectedDate"),
        ElevatedButton(
          onPressed: () => _selectDate(context),
          child: Text('Select date'),
        )
      ]),
    );
  }
}

输出：

这篇关于颤动：DateTimefield手动编辑问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！