AppFlowy项目中日期选择器时间输入框的文本格式化优化

在AppFlowy项目的用户界面开发中，日期选择器是一个关键组件，它允许用户选择日期和时间。当前实现中存在一个用户体验问题：时间输入框允许用户输入任意字符，包括无效的时间格式，这可能导致用户困惑和错误输入。

问题背景

日期选择器的时间输入框目前没有对用户输入进行有效限制，用户可以输入像"ABCDEF"这样的无效内容。虽然系统会在提交时忽略这些无效输入，但这种设计不够友好，可能导致用户困惑和重复尝试。

技术解决方案

TextFormatter的应用

JavaFX中的TextFormatter是一个强大的工具，它可以对文本字段的输入进行实时控制和格式化。我们可以利用它为时间输入框实现以下功能：

1. 输入验证：只允许输入数字和特定分隔符
2. 格式控制：根据12小时制或24小时制自动格式化输入
3. 自动补全：自动添加必要的分隔符如冒号
4. 范围限制：确保小时和分钟在有效范围内

实现思路

对于24小时制时间格式(如"16:14")：

1. 限制输入只能包含数字和冒号
2. 自动在第二位数字后插入冒号
3. 验证小时部分在0-23之间，分钟在0-59之间

对于12小时制时间格式(如"12:30 PM")：

1. 允许数字、冒号和AM/PM标识
2. 自动在适当位置插入空格和AM/PM
3. 验证小时部分在1-12之间

技术实现细节

24小时制格式化器示例

UnaryOperator<TextFormatter.Change> filter = change -> {
    String newText = change.getControlNewText();
    if (newText.matches("([01]?[0-9]|2[0-3]):[0-5][0-9]")) {
        return change;
    }
    return null;
};

TextFormatter<String> formatter = new TextFormatter<>(filter);
timeTextField.setTextFormatter(formatter);

12小时制格式化器示例

UnaryOperator<TextFormatter.Change> filter = change -> {
    String newText = change.getControlNewText();
    if (newText.matches("(1[0-2]|0?[1-9]):[0-5][0-9]\\s*(AM|PM|am|pm)?")) {
        return change;
    }
    return null;
};

用户体验提升

这种改进带来了多方面的用户体验提升：

1. 即时反馈：用户在输入错误时会立即得到视觉反馈
2. 引导式输入：系统会自动补全格式，减少用户认知负担
3. 错误预防：从根本上防止了无效输入的提交
4. 一致性：确保所有时间输入遵循统一格式

扩展思考

这种文本格式化技术不仅适用于时间输入，还可以应用于其他需要特定格式的输入场景，如：

1. 电话号码输入
2. 信用卡号输入
3. 邮政编码输入
4. 自定义ID或代码输入

通过合理设计TextFormatter，我们可以为各种特殊格式的输入字段提供一致且友好的用户体验。

总结

在AppFlowy项目中为日期选择器的时间输入框添加TextFormatter是一个简单但效果显著的改进。它不仅解决了当前允许无效输入的问题，还通过积极的输入引导提升了整体用户体验。这种技术实现展示了如何通过细小的交互设计改进来显著提升软件质量。