如何在按钮内显示选中的日期----日期选择器--Flutter

Question

我构建了一个日期选择器，用户可以在其中 select 日期，我想更新提升按钮内的 selected 日期，但是当日期更新时它还开始显示提升按钮内的时间另外，我想保持相同的日期格式，我在上面的代码中指定了我正在提供我的代码和快照

[class CashInCashOut extends StatefulWidget {
  const CashInCashOut({Key? key}) : super(key: key);

  @override
  _CashInCashOutState createState() => _CashInCashOutState();
}

class _CashInCashOutState extends State<CashInCashOut> {
  DateTime date = DateTime.now();
  late var formattedDate = DateFormat('d-MMM-yy').format(date);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Cash Out"),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: \[
              const TextField(
                keyboardType: TextInputType.phone,
                decoration: InputDecoration(labelText: "Amount"),
              ),
              const TextField(
                decoration: InputDecoration(labelText: "Detail (optional)"),
              ),
              Row(
                children: \[
                  ElevatedButton(
                    child: Text(formattedDate),
                    onPressed: () async {
                      DateTime? _newDate = await showDatePicker(
                        context: context,
                        initialDate: date,
                        firstDate: DateTime(2022),
                        lastDate: DateTime(2030),
                      );
                      setState(() {
                        if (_newDate == null) {
                          return;
                        } else {
                          formattedDate = _newDate.toString();
                        }
                      });
                    },
                  ),
                  const Spacer(),
                  ReusableButton(text: "Add bills"),
                \],
              ),
            \],
          ),
        ));
  }
}

state of my application before selecting date

state of my application after selecting the date from date picker

Answer 1

那是因为你在选择日期的时候忘了格式化日期。在设置状态的 onPressed 函数中，您必须将其写为：

if (_newDate == null) {
     return;
   } else {
     formattedDate = DateFormat('d-MMM-yy').format(_newDate);
}

希望这能解决您的问题。

Answer 2

class MyHomePage extends StatefulWidget {
    const MyHomePage({Key? key, required this.title}) : super(key: key);


    final String title;

    @override
    State<MyHomePage> createState() => _MyHomePageState();
  }

  class _MyHomePageState extends State<MyHomePage> {
    DateTime date = DateTime.now();
    late var formattedDate;
    @override
    void initState() {
      formattedDate = DateFormat('d-MMM-yy').format(date);
    }

    @override
    Widget build(BuildContext context) {

      return Scaffold(
        body: SafeArea(
          child: Center(
            child: ElevatedButton(
              child: Text(formattedDate),
              onPressed: () async {
                await showDatePicker(
                  context: context,
                  initialDate: date,
                  firstDate: DateTime(2022),
                  lastDate: DateTime(2030),
                ).then((selectedDate) {
                  if (selectedDate != null) {
                    setState(() {
                       date = selectedDate;
                       formattedDate = DateFormat('d-MMM-yy').format(selectedDate);
                    });
                  }
                }
                );

              },
            ),
          ),
        ),
      );
    }


  }

这是您启动应用程序时的样子：

如果您按下按钮并选择了这个日期，例如 2025 年 3 月 25 日：

然后单击确定，日期将出现在按钮中：

Answer 3

您应该在按下按钮时格式化日期。只需将此代码部分替换为您的：

if (_newDate == null) {
    return
} else {
    formattedDate = DateFormat.yMd().format(_newDate);
}

注意：您可以根据需要更改日期格式。只需将 yMd 更改为您想要的任何其他格式。将鼠标悬停在 DateFormat 上，您的 IDE 会帮助您。

如何在按钮内显示选中的日期----日期选择器--Flutter

How to show selected date inside the button ---- Date picker -- Flutter

flutter

datepicker