naive-ui 2.21.2 → 2.22.0

package/es/date-picker/src/DatePicker.d.ts

@@ -1,7 +1,8 @@
 import { PropType, ExtractPropTypes, Ref } from 'vue';
 import { FollowerPlacement } from 'vueuc';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
-import type { OnUpdateValue, Value, IsDateDisabled, IsTimeDisabled, Shortcuts, FirstDayOfWeek } from './interface';
+import { DatePickerType } from './config';
+import type { OnUpdateValue, Value, IsDateDisabled, IsTimeDisabled, Shortcuts, FirstDayOfWeek, DefaultTime } from './interface';
 declare const datePickerProps: {
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -17,6 +18,7 @@ declare const datePickerProps: {
         readonly type: PropType<Value | null>;
         readonly default: null;
     };
+    readonly defaultTime: PropType<DefaultTime>;
     readonly disabled: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -28,7 +30,7 @@ declare const datePickerProps: {
     readonly value: PropType<Value | null>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly type: {
-        readonly type: PropType<"date" | "datetime" | "month" | "year" | "daterange" | "datetimerange">;
+        readonly type: PropType<DatePickerType>;
         readonly default: "date";
     };
     readonly separator: StringConstructor;
@@ -108,12 +110,14 @@ declare const datePickerProps: {
         calendarLeftPaddingDatetimerange: string;
         calendarLeftPaddingMonth: string;
         calendarLeftPaddingYear: string;
+        calendarLeftPaddingQuarter: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
         calendarRightPaddingDatetimerange: string;
         calendarRightPaddingMonth: string;
         calendarRightPaddingYear: string;
+        calendarRightPaddingQuarter: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -189,9 +193,9 @@ declare const datePickerProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -414,9 +418,9 @@ declare const datePickerProps: {
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -717,12 +721,14 @@ declare const datePickerProps: {
         calendarLeftPaddingDatetimerange: string;
         calendarLeftPaddingMonth: string;
         calendarLeftPaddingYear: string;
+        calendarLeftPaddingQuarter: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
         calendarRightPaddingDatetimerange: string;
         calendarRightPaddingMonth: string;
         calendarRightPaddingYear: string;
+        calendarRightPaddingQuarter: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -798,9 +804,9 @@ declare const datePickerProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1023,9 +1029,9 @@ declare const datePickerProps: {
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -1326,12 +1332,14 @@ declare const datePickerProps: {
         calendarLeftPaddingDatetimerange: string;
         calendarLeftPaddingMonth: string;
         calendarLeftPaddingYear: string;
+        calendarLeftPaddingQuarter: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
         calendarRightPaddingDatetimerange: string;
         calendarRightPaddingMonth: string;
         calendarRightPaddingYear: string;
+        calendarRightPaddingQuarter: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -1407,9 +1415,9 @@ declare const datePickerProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1632,9 +1640,9 @@ declare const datePickerProps: {
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -1906,6 +1914,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<Value | null>;
         readonly default: null;
     };
+    readonly defaultTime: PropType<DefaultTime>;
     readonly disabled: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -1917,7 +1926,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly value: PropType<Value | null>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly type: {
-        readonly type: PropType<"date" | "datetime" | "month" | "year" | "daterange" | "datetimerange">;
+        readonly type: PropType<DatePickerType>;
         readonly default: "date";
     };
     readonly separator: StringConstructor;
@@ -1997,12 +2006,14 @@ declare const _default: import("vue").DefineComponent<{
         calendarLeftPaddingDatetimerange: string;
         calendarLeftPaddingMonth: string;
         calendarLeftPaddingYear: string;
+        calendarLeftPaddingQuarter: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
         calendarRightPaddingDatetimerange: string;
         calendarRightPaddingMonth: string;
         calendarRightPaddingYear: string;
+        calendarRightPaddingQuarter: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -2078,9 +2089,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2303,9 +2314,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -2606,12 +2617,14 @@ declare const _default: import("vue").DefineComponent<{
         calendarLeftPaddingDatetimerange: string;
         calendarLeftPaddingMonth: string;
         calendarLeftPaddingYear: string;
+        calendarLeftPaddingQuarter: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
         calendarRightPaddingDatetimerange: string;
         calendarRightPaddingMonth: string;
         calendarRightPaddingYear: string;
+        calendarRightPaddingQuarter: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -2687,9 +2700,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2912,9 +2925,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -3215,12 +3228,14 @@ declare const _default: import("vue").DefineComponent<{
         calendarLeftPaddingDatetimerange: string;
         calendarLeftPaddingMonth: string;
         calendarLeftPaddingYear: string;
+        calendarLeftPaddingQuarter: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
         calendarRightPaddingDatetimerange: string;
         calendarRightPaddingMonth: string;
         calendarRightPaddingYear: string;
+        calendarRightPaddingQuarter: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -3296,9 +3311,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -3521,9 +3536,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -3821,7 +3836,7 @@ declare const _default: import("vue").DefineComponent<{
     localizedEndPlaceholder: import("vue").ComputedRef<string>;
     mergedSize: import("vue").ComputedRef<"small" | "medium" | "large">;
     mergedDisabled: import("vue").ComputedRef<boolean>;
-    localizedPlacehoder: import("vue").ComputedRef<string | undefined>;
+    localizedPlacehoder: import("vue").ComputedRef<string>;
     isValueInvalid: import("vue").ComputedRef<boolean>;
     isStartValueInvalid: import("vue").ComputedRef<boolean>;
     isEndValueInvalid: import("vue").ComputedRef<boolean>;
@@ -3990,12 +4005,14 @@ declare const _default: import("vue").DefineComponent<{
             calendarLeftPaddingDatetimerange: string;
             calendarLeftPaddingMonth: string;
             calendarLeftPaddingYear: string;
+            calendarLeftPaddingQuarter: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
             calendarRightPaddingDatetimerange: string;
             calendarRightPaddingMonth: string;
             calendarRightPaddingYear: string;
+            calendarRightPaddingQuarter: string;
         };
         peers: {
             Input: import("../../_mixins").Theme<"Input", {
@@ -4072,9 +4089,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -4297,9 +4314,9 @@ declare const _default: import("vue").DefineComponent<{
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
-                    colorOpacitySecondary: number;
-                    colorOpacitySecondaryHover: number;
-                    colorOpacitySecondaryPressed: number;
+                    colorOpacitySecondary: string;
+                    colorOpacitySecondaryHover: string;
+                    colorOpacitySecondaryPressed: string;
                     colorSecondary: string;
                     colorSecondaryHover: string;
                     colorSecondaryPressed: string;
@@ -4584,9 +4601,9 @@ declare const _default: import("vue").DefineComponent<{
                         fontSizeMedium: string;
                         fontSizeLarge: string;
                         opacityDisabled: string;
-                        colorOpacitySecondary: number;
-                        colorOpacitySecondaryHover: number;
-                        colorOpacitySecondaryPressed: number;
+                        colorOpacitySecondary: string;
+                        colorOpacitySecondaryHover: string;
+                        colorOpacitySecondaryPressed: string;
                         colorSecondary: string;
                         colorSecondaryHover: string;
                         colorSecondaryPressed: string;
@@ -4899,6 +4916,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly clearable?: unknown;
     readonly updateValueOnClose?: unknown;
     readonly defaultValue?: unknown;
+    readonly defaultTime?: unknown;
     readonly disabled?: unknown;
     readonly placement?: unknown;
     readonly value?: unknown;
@@ -4931,7 +4949,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
 } & {
-    type: "date" | "datetime" | "month" | "year" | "daterange" | "datetimerange";
+    type: DatePickerType;
     placement: FollowerPlacement;
     clearable: boolean;
     defaultValue: Value | null;
@@ -4997,12 +5015,14 @@ declare const _default: import("vue").DefineComponent<{
         calendarLeftPaddingDatetimerange: string;
         calendarLeftPaddingMonth: string;
         calendarLeftPaddingYear: string;
+        calendarLeftPaddingQuarter: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
         calendarRightPaddingDatetimerange: string;
         calendarRightPaddingMonth: string;
         calendarRightPaddingYear: string;
+        calendarRightPaddingQuarter: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -5078,9 +5098,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -5303,9 +5323,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -5606,12 +5626,14 @@ declare const _default: import("vue").DefineComponent<{
         calendarLeftPaddingDatetimerange: string;
         calendarLeftPaddingMonth: string;
         calendarLeftPaddingYear: string;
+        calendarLeftPaddingQuarter: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
         calendarRightPaddingDatetimerange: string;
         calendarRightPaddingMonth: string;
         calendarRightPaddingYear: string;
+        calendarRightPaddingQuarter: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -5687,9 +5709,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -5912,9 +5934,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -6215,12 +6237,14 @@ declare const _default: import("vue").DefineComponent<{
         calendarLeftPaddingDatetimerange: string;
         calendarLeftPaddingMonth: string;
         calendarLeftPaddingYear: string;
+        calendarLeftPaddingQuarter: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
         calendarRightPaddingDatetimerange: string;
         calendarRightPaddingMonth: string;
         calendarRightPaddingYear: string;
+        calendarRightPaddingQuarter: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -6296,9 +6320,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -6521,9 +6545,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -6786,6 +6810,7 @@ declare const _default: import("vue").DefineComponent<{
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
     isDateDisabled?: IsDateDisabled | undefined;
     actions?: ("clear" | "confirm" | "now")[] | undefined;
+    defaultTime?: DefaultTime | undefined;
     startPlaceholder?: string | undefined;
     endPlaceholder?: string | undefined;
     timeFormat?: string | undefined;
@@ -6793,7 +6818,7 @@ declare const _default: import("vue").DefineComponent<{
     isTimeDisabled?: IsTimeDisabled | undefined;
     ranges?: Record<string, [number, number]> | undefined;
 }>, {
-    type: "date" | "datetime" | "month" | "year" | "daterange" | "datetimerange";
+    type: DatePickerType;
     show: boolean | undefined;
     disabled: boolean | undefined;
     onChange: MaybeArray<OnUpdateValue>;

package/es/date-picker/src/DatePicker.js

@@ -12,7 +12,7 @@ import { warn, call, useAdjustedTo, createKey } from '../../_utils';
 import { datePickerLight } from '../styles';
 import { strictParse } from './utils';
 import { uniCalendarValidation, dualCalendarValidation } from './validation-utils';
-import { MONTH_ITEM_HEIGHT, START_YEAR, DATE_FORMAT } from './config';
+import { MONTH_ITEM_HEIGHT, START_YEAR } from './config';
 import { datePickerInjectionKey } from './interface';
 import DatetimePanel from './panel/datetime';
 import DatetimerangePanel from './panel/datetimerange';
@@ -26,7 +26,7 @@ const datePickerProps = Object.assign(Object.assign({}, useTheme.props), { to: u
     }, clearable: Boolean, updateValueOnClose: Boolean, defaultValue: {
         type: [Number, Array],
         default: null
-    }, disabled: {
+    }, defaultTime: [Number, String, Array], disabled: {
         type: Boolean,
         default: undefined
     }, placement: {
@@ -89,20 +89,26 @@ export default defineComponent({
             return ['daterange', 'datetimerange'].includes(props.type);
         });
         const localizedPlacehoderRef = computed(() => {
-            if (props.placeholder === undefined) {
-                if (props.type === 'date') {
-                    return localeRef.value.datePlaceholder;
-                }
-                else if (props.type === 'datetime') {
-                    return localeRef.value.datetimePlaceholder;
-                }
-                else if (props.type === 'month') {
-                    return localeRef.value.monthPlaceholder;
+            const { placeholder } = props;
+            if (placeholder === undefined) {
+                const { type } = props;
+                switch (type) {
+                    case 'date':
+                        return localeRef.value.datePlaceholder;
+                    case 'datetime':
+                        return localeRef.value.datetimePlaceholder;
+                    case 'month':
+                        return localeRef.value.monthPlaceholder;
+                    case 'year':
+                        return localeRef.value.yearPlaceholder;
+                    case 'quarter':
+                        return localeRef.value.quarterPlaceholder;
+                    default:
+                        return '';
                 }
-                return props.placeholder;
             }
             else {
-                return props.placeholder;
+                return placeholder;
             }
         });
         const localizedStartPlaceholderRef = computed(() => {
@@ -134,7 +140,23 @@ export default defineComponent({
             }
         });
         const mergedFormatRef = computed(() => {
-            return props.format || DATE_FORMAT[props.type];
+            const { format } = props;
+            if (format)
+                return format;
+            switch (props.type) {
+                case 'date':
+                case 'daterange':
+                    return localeRef.value.dateFormat;
+                case 'datetime':
+                case 'datetimerange':
+                    return localeRef.value.dateTimeFormat;
+                case 'year':
+                    return localeRef.value.yearTypeFormat;
+                case 'month':
+                    return localeRef.value.monthTypeFormat;
+                case 'quarter':
+                    return localeRef.value.quarterFormat;
+            }
         });
         const mergedActionsRef = computed(() => {
             const { actions, type } = props;
@@ -159,6 +181,9 @@ export default defineComponent({
                 case 'year': {
                     return ['clear', 'now'];
                 }
+                case 'quarter': {
+                    return ['clear', 'now', 'confirm'];
+                }
                 default: {
                     warn('data-picker', "The type is wrong, n-date-picker's type only supports `date`, `datetime`, `daterange` and `datetimerange`.");
                     break;
@@ -241,7 +266,7 @@ export default defineComponent({
                 disableUpdateOnClose
             });
         }
-        function scrollYearMonth(value) {
+        function scrollPickerColumns(value) {
             if (!panelInstRef.value)
                 return;
             const { monthScrollRef, yearScrollRef } = panelInstRef.value;
@@ -387,8 +412,9 @@ export default defineComponent({
             if (mergedDisabledRef.value || mergedShowRef.value)
                 return;
             doUpdateShow(true);
-            if (props.type === 'month' || props.type === 'year') {
-                void nextTick(scrollYearMonth);
+            const { type } = props;
+            if (type === 'month' || type === 'year' || type === 'quarter') {
+                void nextTick(scrollPickerColumns);
             }
         }
         function closeCalendar({ returnFocus, disableUpdateOnClose }) {
@@ -424,7 +450,7 @@ export default defineComponent({
         // use pending value to do validation
         const uniVaidation = uniCalendarValidation(props, pendingValueRef);
         const dualValidation = dualCalendarValidation(props, pendingValueRef);
-        provide(datePickerInjectionKey, Object.assign(Object.assign(Object.assign({ scrollYearMonth,
+        provide(datePickerInjectionKey, Object.assign(Object.assign(Object.assign({ scrollPickerColumns,
             mergedClsPrefixRef, mergedThemeRef: themeRef, timePickerSizeRef,
             localeRef,
             dateLocaleRef, firstDayOfWeekRef: toRef(props, 'firstDayOfWeek'), isDateDisabledRef: toRef(props, 'isDateDisabled'), rangesRef: toRef(props, 'ranges'), closeOnSelectRef: toRef(props, 'closeOnSelect'), updateValueOnCloseRef: toRef(props, 'updateValueOnClose') }, uniVaidation), dualValidation), { datePickerSlots: slots }));
@@ -560,7 +586,8 @@ export default defineComponent({
             active: this.mergedShow,
             actions: this.actions,
             shortcuts: this.shortcuts,
-            style: this.cssVars
+            style: this.cssVars,
+            defaultTime: this.defaultTime
         };
         const { mergedClsPrefix } = this;
         return (h("div", { ref: "triggerElRef", class: [
@@ -589,7 +616,7 @@ export default defineComponent({
                     h(VFollower, { show: this.mergedShow, containerClass: this.namespace, to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, placement: "bottom-start" }, {
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
                             default: () => this.mergedShow
-                                ? withDirectives(this.type === 'datetime' ? (h(DatetimePanel, Object.assign({}, commonPanelProps))) : this.type === 'daterange' ? (h(DaterangePanel, Object.assign({}, commonPanelProps))) : this.type === 'datetimerange' ? (h(DatetimerangePanel, Object.assign({}, commonPanelProps))) : this.type === 'month' ? (h(MonthPanel, Object.assign({}, commonPanelProps, { type: "month", key: "month" }))) : this.type === 'year' ? (h(MonthPanel, Object.assign({}, commonPanelProps, { type: "year", key: "year" }))) : (h(DatePanel, Object.assign({}, commonPanelProps))), [[clickoutside, this.handleClickOutside]])
+                                ? withDirectives(this.type === 'datetime' ? (h(DatetimePanel, Object.assign({}, commonPanelProps))) : this.type === 'daterange' ? (h(DaterangePanel, Object.assign({}, commonPanelProps))) : this.type === 'datetimerange' ? (h(DatetimerangePanel, Object.assign({}, commonPanelProps))) : this.type === 'month' ? (h(MonthPanel, Object.assign({}, commonPanelProps, { type: "month", key: "month" }))) : this.type === 'year' ? (h(MonthPanel, Object.assign({}, commonPanelProps, { type: "year", key: "year" }))) : this.type === 'quarter' ? (h(MonthPanel, Object.assign({}, commonPanelProps, { type: "quarter", key: "quarter" }))) : (h(DatePanel, Object.assign({}, commonPanelProps))), [[clickoutside, this.handleClickOutside]])
                                 : null
                         }))
                     })

package/es/date-picker/src/config.d.ts

@@ -1,11 +1,3 @@
 export declare const START_YEAR = 1901;
 export declare const MONTH_ITEM_HEIGHT = 40;
-export declare const DATE_FORMAT: {
-    date: string;
-    datetime: string;
-    daterange: string;
-    datetimerange: string;
-    month: string;
-    year: string;
-};
-export declare type DatePickerType = keyof typeof DATE_FORMAT;
+export declare type DatePickerType = 'date' | 'datetime' | 'daterange' | 'datetimerange' | 'month' | 'year' | 'quarter';

package/es/date-picker/src/config.js

@@ -1,11 +1,3 @@
 export const START_YEAR = 1901;
 // TODO: we need to remove it to make height customizable
 export const MONTH_ITEM_HEIGHT = 40;
-export const DATE_FORMAT = {
-    date: 'yyyy-MM-dd',
-    datetime: 'yyyy-MM-dd HH:mm:ss',
-    daterange: 'yyyy-MM-dd',
-    datetimerange: 'yyyy-MM-dd HH:mm:ss',
-    month: 'yyyy-MM',
-    year: 'yyyy'
-};