如何将DateTimePicker选中的日期传递给API并映射到对应参数

实现逻辑 #

直接在组件回调中处理选中值的格式转换，存入状态变量后即可在接口请求时直接使用，步骤如下：

• 第一步：在组件对应的State类中定义变量，存储最终传给接口的日期值

String? lastDate; // 对应API的last_date字段

• 第二步：修改DateTimePicker的回调逻辑，替换原有print打印逻辑，完成值的转换和存储

Stack(
  children: <Widget>[
    DateTimePicker(
      initialValue: '',
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
      dateLabelText: 'Date',
      onChanged: (val) {
        if (val == null || val.isEmpty) return;
        // 解析选中的日期值
        DateTime? pickedDate = DateTime.tryParse(val);
        if (pickedDate == null) return;
        // 格式化为yyyy-MM-dd格式，月、日不足两位自动补0
        String formatted = '${pickedDate.year}-${pickedDate.month.toString().padLeft(2, '0')}-${pickedDate.day.toString().padLeft(2, '0')}';
        setState(() {
          lastDate = formatted;
        });
      },
      validator: (val) {
        // 非空校验，可根据业务需求调整
        return val?.isEmpty ?? true ? '请选择日期' : null;
      },
      onSaved: (val) {
        // 表单提交时的赋值逻辑，和onChanged保持一致
        if (val == null || val.isEmpty) return;
        DateTime? pickedDate = DateTime.tryParse(val);
        if (pickedDate == null) return;
        lastDate = '${pickedDate.year}-${pickedDate.month.toString().padLeft(2, '0')}-${pickedDate.day.toString().padLeft(2, '0')}';
      },
    )
  ],
)

• 第三步：发起API请求时，直接把存储的变量放到请求参数中即可

// 请求参数示例
final requestBody = {
  // 其他业务参数...
  "last_date": lastDate,
};
// 调用现有接口请求方法传入requestBody即可

注意事项 #

• 如果你用Form组件包裹了日期选择器，提交请求前先执行formKey.currentState?.validate()做校验，校验通过后调用formKey.currentState?.save()触发onSaved回调，确保拿到最新的选中值。
• 如果你使用的DateTimePicker版本回调直接返回DateTime类型而非字符串，删除DateTime.tryParse(val)逻辑，直接用返回值做格式化即可。
• 上述格式化逻辑用Dart内置能力实现，无需引入第三方日期处理包，输出结果完全匹配接口要求的2022-07-09格式。

内容的提问来源于stack exchange，提问作者Zemichael Muluken