Usage of dayjs custom time parsing plugin

Oct 6, 2024#JavaScript #coding69

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

The document discusses an issue with using a time picker in a project that requires time in HH:mm format. While formatting works correctly with moment.js, it results in NaN errors with dayjs. The solution is to use the official dayjs plugin called CustomParseFormat, which allows for custom time formatting. After extending dayjs with this plugin, the time can be correctly parsed.

Scenario: The form in the project uses a time picker in hours and minutes format, converting data from the interface format to form data.#

Using moment's format works normally.
Using dayjs's format results in NaN after conversion, causing an error when setFieldsValue is called.

After reading the official documentation, I found that there is an official plugin for extending dayjs's format with custom time formats.#

Plugin name: CustomParseFormat

import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'

// Usage
dayjs('12:21', 'HH:mm') // Without the plugin M2{$H:NaN,$m:NaN,...}

dayjs.extend(customParseFormat)
dayjs('12:21', 'HH:mm') // With the plugin M2{$H:12,$m:21,...}