使用 Material dayjs 日期适配器处理分隔符

如何解决使用 Material dayjs 日期适配器处理分隔符

在我的 Angular 应用程序中，我需要从 momentjs 切换到 dayjs。 因为我使用的是 material，所以我必须用 dayjs-date-adapter 替换 moment-date-adapter，所以我编写了自己的日期适配器，但我无法理解 momentjs 如何解析像 {{1} 这样的日期} 没有任何分隔符（您可以在操作中看到它 here）。

我尝试通过设置此 12122020 和一组日期输入来实现它。 但我不知道这是否是最好的解决方案，因为我在moment-date-adapter中没有看到它

MatDateFormats

}

这是我的MatDateFormats = { parse: { dateInput: ['D/M/YYYY','DMYYYY'],},display: { dateInput: 'DD/MM/YYYY',monthYearLabel: 'MMMM YYYY',dateA11yLabel: 'DD/MM/YYYY',monthYearA11yLabel: 'MMMM YYYY',}

dayjs-date-adapter

解决方法

您在 MatDateFormats 的 parse 属性中使用的 dateInput 用于您的 dayjs-date-adapter 的解析功能。现在您提供一个数组作为 dateInput，但您的函数需要一个字符串。 Dayjs（与 moment 不同）无法处理格式数组。如果你想使用一个数组来支持多种格式，你必须弄清楚在你的解析函数中使用哪种格式的数组。最简单的方法可能就是遍历您可能的格式并返回有效的 dayjs 对象。

类似的东西（注意我没有测试过）：

parse(value: any,parseFormats: string[]): Dayjs | null {
    if (value && typeof value === 'string') {
        parseFormats.forEach(parseFormat => {
            const parsed = this.dayJs(value,parseFormat,this.locale);
            if (parsed.isValid()) {
                return parsed;
            }
        }
        // return an invalid object if it could not be parsed with the supplied formats
        return this.dayJs(null);
}
    return value ? this.dayJs(value).locale(this.locale) : null;
}

注意在我自己的适配器中，我稍微改变了私有 dayJs 函数，因为在格式选项中也提供语言环境给了我一些奇怪的行为。我不需要 utc 选项，所以我最终使用了：

private dayJs(input?: any,format?: string,locale?: string): Dayjs {
    return dayjs(input,format,locale);
}

---

上述方法的替代方法是仅提供 1 个 dateInput（例如：dateInput: 'D/M/YYYY'）。然后让解析函数更灵活一点。我最终得到了这个：

parse(value: any,parseFormat: string): Dayjs | null {
    if (value && typeof value === 'string') {
        const longDateFormat = dayjs().localeData().longDateFormat(parseFormat); // MM/DD/YYY or DD-MM-YYYY,etc.
        // return this.dayJs(value,longDateFormat);
        let parsed = this.dayJs(value,longDateFormat,this.locale);
        if (parsed.isValid()) {
            // string value is exactly like long date format
            return parsed;
        }
        const alphaNumericRegex = /[\W_]+/;
        if (!alphaNumericRegex.test(value)) {
            // if string contains no non-word characters and no _
            // user might have typed 24012020 or 01242020
            // strip long date format of non-word characters and take only the length of the value so we get DDMMYYYY or DDMM etc
            const format = longDateFormat.replace(/[\W_]+/g,'').substr(0,value.length);
            parsed = this.dayJs(value,this.locale);
            if (parsed.isValid()) {
                return parsed;
            }
        }
        const userDelimiter = alphaNumericRegex.exec(value) ? alphaNumericRegex.exec(value)![0] : '';
        const localeDelimiter = alphaNumericRegex.exec(longDateFormat) ? alphaNumericRegex.exec(longDateFormat)![0] : '';
        const parts = value.split(userDelimiter);
        const formatParts = longDateFormat.split(localeDelimiter);
        if (parts.length <= formatParts.length && parts.length < 4) {
            // right now this only works for days,months,and years,if time should be supported this should be altered
            let newFormat = '';
            parts.forEach((part,index) => {
                // get the format in the length of the part,so if a the date is supplied 1-1-19 this should result in D-M-YY
                // note,this will not work if really weird input is supplied,but that's okay
                newFormat += formatParts[index].substr(0,part.length);
                if (index < parts.length - 1) {
                    newFormat += userDelimiter;
                }
            });
            parsed = this.dayJs(value,newFormat);
            if (parsed.isValid()) {
                return parsed;
            }
        }

        // not able to parse anything sensible,return something invalid so input can be corrected
        return this.dayJs(null);
    }

    return value ? this.dayJs(value).locale(this.locale) : null;
}

如果您只想在指定的输入旁边支持仅数字输入（如 28082021），则需要带有 !alphaNumericRegex.test(value) 的 if 语句。这段代码从您的格式化字符串中取出任何分隔符（如 - 或 /），并确保仅支持几天或几天和几个月的字符串（例如 28 或 2808）。它将使用当前月份和年份来填充缺失值。如果您只想支持完整的 day-month-year 字符串，则可以省略 .substr 部分。

此 if 语句下方的代码段导致支持不同类型的用户输入，例如 28-08-2021、28/08/2021、28 08 2021、28-08-21、28/08 等。 我确定它不适用于每种语言，但它适用于我的语言（荷兰语）中最常用的用户输入。

希望这也能帮助那些一直在为此苦苦挣扎的人！