我想在文本字段中显示日期选择器，并在文本字段中删除选定的日期

Question

我想在文本字段中显示日期选择器，并在文本字段中删除选定的日期。

要选择日期，我使用可点击的图像和在文本字段中设置的选定日期，但我无法从文本字段中删除该日期。

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)),
              ),
            ),
          ),
        ],
      ),

Answer 1

我觉得你应该试试这个。

如下创建一个小部件，

     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 您的小部件。

这会对你有所帮助。