feat(antdv): support custom date library (#908)

ilyaliao · web-flow · commit 6165baa6b06d · 2026-03-23T17:51:10.000+09:00
diff --git a/src/core/resolvers/antdv.ts b/src/core/resolvers/antdv.ts
@@ -212,6 +212,8 @@ const matchComponents: IMatcher[] = [
   },
 ]
 
+export type AntDesignVueResolveDateLibrary = 'dayjs' | 'date-fns' | 'moment'
+
 export interface AntDesignVueResolverOptions {
   /**
    * exclude components that do not require automatic import
@@ -259,6 +261,13 @@ export interface AntDesignVueResolverOptions {
    * @default 'A'
    */
   prefix?: string
+
+  /**
+   * Custom date library.
+   *
+   * @default 'dayjs'
+   */
+  resolveDateLibrary?: AntDesignVueResolveDateLibrary
 }
 
 function getStyleDir(compName: string): string {
@@ -320,6 +329,15 @@ function getImportName(compName: string): string {
   return compName
 }
 
+function getDateLibraryComponent(compName: string) {
+  if (compName.match(/^Calendar$/))
+    return 'calendar'
+  if (compName.match(/^DatePicker$/) || compName.match(/^(?:Month|Week|Range|Quarter)Picker$/))
+    return 'date-picker'
+  if (compName.match(/^Time(?:Range)?Picker$/))
+    return 'time-picker'
+}
+
 /**
  * Resolver for Ant Design Vue
  *
@@ -348,6 +366,20 @@ export function AntDesignVueResolver(options: AntDesignVueResolverOptions = {
       if (prefix === originPrefix && isAntdv(compName) && !options?.exclude?.includes(compName)) {
         const { cjs = false, packageName = 'ant-design-vue' } = options
         const path = `${packageName}/${cjs ? 'lib' : 'es'}`
+        const dateComponent = getDateLibraryComponent(compName)
+        if (dateComponent) {
+          const dateLib = options.resolveDateLibrary ?? 'dayjs'
+          const dateLibPath = `${path}/${dateComponent}/${dateLib}`
+          const sideEffects = getSideEffects(compName, options)
+          if (compName === 'Calendar' || compName === 'DatePicker') {
+            return { from: dateLibPath, sideEffects }
+          }
+          return {
+            name: getImportName(compName),
+            from: dateLibPath,
+            sideEffects,
+          }
+        }
         return {
           name: getImportName(compName),
           from: path,
diff --git a/test/resolvers/antdv.test.ts b/test/resolvers/antdv.test.ts
@@ -0,0 +1,55 @@
+import type { ComponentResolveResult, ComponentResolverObject } from '../../src'
+import { describe, expect, it } from 'vitest'
+
+import { AntDesignVueResolver } from '../../src/resolvers'
+
+describe('antdvResolver', () => {
+  it('defaults resolveDateLibrary to dayjs for date components', () => {
+    const resolver = AntDesignVueResolver() as ComponentResolverObject
+
+    expect(resolver.resolve('AButton')).toEqual<ComponentResolveResult>({
+      name: 'Button',
+      from: 'ant-design-vue/es',
+      sideEffects: 'ant-design-vue/es/button/style/css',
+    })
+
+    expect(resolver.resolve('ADatePicker')).toEqual<ComponentResolveResult>({
+      from: 'ant-design-vue/es/date-picker/dayjs',
+      sideEffects: 'ant-design-vue/es/date-picker/style/css',
+    })
+
+    expect(resolver.resolve('ARangePicker')).toEqual<ComponentResolveResult>({
+      name: 'RangePicker',
+      from: 'ant-design-vue/es/date-picker/dayjs',
+      sideEffects: 'ant-design-vue/es/date-picker/style/css',
+    })
+
+    expect(resolver.resolve('ATimePicker')).toEqual<ComponentResolveResult>({
+      name: 'TimePicker',
+      from: 'ant-design-vue/es/time-picker/dayjs',
+      sideEffects: 'ant-design-vue/es/time-picker/style/css',
+    })
+  })
+
+  it('resolveDateLibrary: date-fns uses calendar and date-picker subpaths', () => {
+    const resolver = AntDesignVueResolver({ resolveDateLibrary: 'date-fns' }) as ComponentResolverObject
+
+    expect(resolver.resolve('ADatePicker')).toEqual<ComponentResolveResult>({
+      from: 'ant-design-vue/es/date-picker/date-fns',
+      sideEffects: 'ant-design-vue/es/date-picker/style/css',
+    })
+
+    expect(resolver.resolve('ACalendar')).toEqual<ComponentResolveResult>({
+      from: 'ant-design-vue/es/calendar/date-fns',
+      sideEffects: 'ant-design-vue/es/calendar/style/css',
+    })
+  })
+
+  it('resolveDateLibrary with cjs uses lib/ and moment subpath', () => {
+    const resolver = AntDesignVueResolver({ resolveDateLibrary: 'moment', cjs: true }) as ComponentResolverObject
+    expect(resolver.resolve('ADatePicker')).toEqual<ComponentResolveResult>({
+      from: 'ant-design-vue/lib/date-picker/moment',
+      sideEffects: 'ant-design-vue/lib/date-picker/style/css',
+    })
+  })
+})
