日期时间字段中的静态正斜杠

Question

我有一个带有日期和日期选择器实现的表单。 我希望使用 dd/MM/yyyy 格式，但静态存在正斜杠。 目前我有这个：

final dateOfBirth = TextEditingController();

...

TextFormField(
controller: dateOfBirth,
keyboardType: TextInputType.datetime,
decoration: const InputDecoration(labelText: 'Date of birth', hintText: 'dd/MM/yyyy', hintStyle: TextStyle(color: Colors.grey)),
onTap: () async {
  await showDatePicker(
      context: context, initialDate: DateTime.now(), firstDate: DateTime(1910), lastDate: DateTime.now()
  ).then((selectedDate) {
    if (selectedDate != null) {
      dateOfBirth.text = DateFormat('dd/MM/yyyy').format(selectedDate);
    }
  });
},
validator: (String? value) {
  if (value!.isEmpty) {
    return 'Please enter your birthdate !';
  }
  if(DateFormat('dd/MM/yyyy').tryParse(value) == null){
    return 'Please enter a valid date of birth !';
  }
  return null;
})

作为占位符的提示是一个有用的指示，日期选择器将正确填写它，但用户之后可能会弄乱该字段。我希望用户只需输入数字而不必处理斜杠。如何直观地添加正斜杠而不将其作为表单字段值的一部分？ 然后存储的值将在内部变成 ddMMyyyy 格式，但视觉上斜杠仍然存在。

我希望我不必为日期、月份和年份创建三个单独的表单字段来实现此目的。

Answer 1

我遇到了同样的问题，我可以通过以下方法解决它：

这是主要的日期格式化程序代码，

class CFormatter {
  // Format the date
  static String formatDate(DateTime? date) {
    // Null-aware operator (??=) to handle null values
    date ??= DateTime.now();
    return DateFormat('dd/MM/yyyy').format(date);
  }
}

class DateController extends GetxController {
  static DateController get instance => Get.find();

  TextEditingController submissionDateController = TextEditingController();

  Future<void> pickDate(BuildContext context) async {
    DateTime? selectedDate = await showDatePicker(
      context: context,
      firstDate: DateTime(2020),
      lastDate: DateTime(2100),
      initialDate: DateTime.now(),
    );

    if (selectedDate != null) {
      String formattedDate = CFormatter.formatDate(selectedDate);
      submissionDateController.text = formattedDate;
    }
  }

  @override
  void dispose() {
    submissionDateController.dispose();
    super.dispose();
  }
}

以下是我将其集成到表单字段中的方法：

Expanded(
  child: CTextFormField(
    label: 'Date',
    prefixIcon: Iconsax.calendar_search,
    onTap: () => date.pickDate(context),
    controller: date.submissionDateController,
    readOnly: true, 
  ),
),

通过设置 readOnly: true，用户无法手动输入或编辑日期字段，迫使他们使用日期选择器。这有助于防止日期输入中出现意外的格式问题或用户错误。