如何配置Cleave.js使日期输出为带末尾点的DD.MM.YYYY.格式？

首先纠正一个配置细节：你当前的datePattern: ['Y', 'm', 'd']会输出YYYY.MM.DD格式，和你需要的DD.MM.YYYY顺序不符，得先把模式调整为['d', 'm', 'Y']。

关于末尾缺少点号的问题，Cleave.js默认只会在日期分段之间插入分隔符，不会在最后一段后追加。可以通过以下两种方式解决：

方法一：实时自动追加末尾点号 #

利用Cleave的onValueChanged回调，在输入完成后自动补全末尾的点号：

new Cleave('.my-input', {
    date: true,
    datePattern: ['d', 'm', 'Y'],
    delimiter: '.',
    onValueChanged: function(e) {
        const currentValue = e.target.value;
        // 完整的DD.MM.YYYY长度为10，此时补全末尾的点
        if (currentValue.length === 10 && !currentValue.endsWith('.')) {
            e.target.value = currentValue + '.';
        }
    }
});

方法二：读取值时统一处理 #

如果不想实时修改输入框内容，可以在需要使用值（比如表单提交）的时候手动添加点号：

const inputElement = document.querySelector('.my-input');
let finalDateValue = inputElement.value;
if (finalDateValue.length === 10) {
    finalDateValue += '.';
}
// 后续使用finalDateValue即可

两种方法各有适用场景：方法一适合让用户直观看到符合要求的格式；方法二避免了输入过程中修改内容可能导致的光标偏移问题。

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