sard-uniapp 1.9.2 → 1.10.1

package/README.md

@@ -21,7 +21,7 @@
 
 ## 特性
 
-- 🧩 70+个高质量组件，覆盖移动端主流场景
+- 🧩 74+个高质量组件，覆盖移动端主流场景
 - 💪 支持一套代码同时开发 H5 / 小程序 / App
 - 🌿 支持按需引入和 `Tree Shaking`
 - 📖 详尽的文档和案例展示
@@ -100,3 +100,41 @@ npm run deploy
 ```bash
 npm run release
 ```
+
+## 修复问题流程
+
+- 修复问题
+- 测试
+- 修改版本号
+- 暂存
+- 提交
+- 给提交打标签
+- 运行 `npm run buildAndRelease` 打包组件库并发布到 npm
+- 发布到 uniapp 插件市场
+- 运行 `npm run push` 推送代码和标签
+- 运行 `npm run build:site` 打包文档（如果文档有修改）
+- 运行 `npm run deploy` 部署文档（如果文档有修改）
+- 更新 gitee 上的文档（如果文档有修改）
+
+## 新增组件流程
+
+- 运行 `npm run newComponent` 命令自动创建组件
+- 编写组件代码
+- 编写案例代码
+- 编写组件文档
+- 编写测试用例
+- 使用实际项目本地安装测试 `pnpm link ../sard-uniapp`
+- 从上面的“修复问题流程”第三部“修改版本号”开始走一遍
+
+## 打包安卓包流程
+
+- 在 `HBuilder` 中打开 `sard-uniapp` 项目
+- 点击 发行->App-Android/iOS-云打包
+- 勾选“android(apk 包)” 、“使用云端证书”、“打正式包”、“快速安心打包”
+- 点击“打包“按钮开始打包
+- 注意：如果控制台出现错误：`[ERROR] Cannot start service: Host version "_._._" does not match - binary version "_._._"`，需安装和 Host version 一样版本的 `@esbuild/darwin-x64`
+- 等待云端打包完成
+- 到 `gitee` 仓库创建发行版：[resource 发行版 - Gitee.com](https://gitee.com/sutras/resource/releases/new)
+- 将 gitee 发行版 apk 资源链接转换为二维码图片
+- 将图片更新到 `sard-assets` 项目，并发布到 npm
+- 最后等待 http://fastly.jsdelivr.net 链接生效

package/changelog.md

@@ -1,3 +1,21 @@
+## [1.10.1](https://github.com/sutras/sard-uniapp/compare/v1.10.0...v1.10.1) (2025-01-08)
+
+
+### Bug Fixes
+
+* 修复全局配置问题 ([dcd319c](https://github.com/sutras/sard-uniapp/commit/dcd319c51453c6aa7c13dfedfbc2bf47eb3bb409))
+
+
+
+# [1.10.0](https://github.com/sutras/sard-uniapp/compare/v1.9.2...v1.10.0) (2025-01-01)
+
+
+### Features
+
+* 新增 Space 组件, 新增 Dialog 组件的按钮配置, 新增 valueFormat 属性, 修复已知问题 ([7648ea6](https://github.com/sutras/sard-uniapp/commit/7648ea65937c5af9a2b6a8cfa9c5b70ade14ef65))
+
+
+
 ## [1.9.2](https://github.com/sutras/sard-uniapp/compare/v1.9.1...v1.9.2) (2024-12-22)
 
 

package/components/back-top/back-top.vue

@@ -32,7 +32,7 @@ export default  _defineComponent({
     visibleHeight: { type: Number, required: false },
     right: { type: String, required: false },
     bottom: { type: String, required: false }
-  }, defaultBackTopProps),
+  }, defaultBackTopProps()),
   emits: ["click"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();

package/components/back-top/common.d.ts

@@ -7,7 +7,7 @@ export interface BackTopProps {
     right?: string;
     bottom?: string;
 }
-export declare const defaultBackTopProps: {
+export declare const defaultBackTopProps: () => {
     scrollTop: number;
     visibleHeight: number;
 };

package/components/back-top/common.js

@@ -1,5 +1,5 @@
 import { defaultConfig } from '../config';
-export const defaultBackTopProps = {
+export const defaultBackTopProps = () => ({
     ...defaultConfig.backTop,
     scrollTop: 0,
-};
+});

package/components/calendar/calendar.d.ts

@@ -1,10 +1,10 @@
 import { type CalendarProps } from './common';
 declare const _default: import("vue").DefineComponent<CalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: Date | Date[]) => any;
-    change: (value: Date | Date[]) => any;
+    "update:model-value": (value: string | string[] | Date | Date[]) => any;
+    change: (value: string | string[] | Date | Date[]) => any;
 }, string, import("vue").PublicProps, Readonly<CalendarProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: Date | Date[]) => any) | undefined;
-    onChange?: ((value: Date | Date[]) => any) | undefined;
+    "onUpdate:model-value"?: ((value: string | string[] | Date | Date[]) => any) | undefined;
+    onChange?: ((value: string | string[] | Date | Date[]) => any) | undefined;
 }>, {
     type: import("./common").CalendarType;
     maxDays: number;

package/components/calendar/calendar.vue

@@ -88,7 +88,9 @@ import {
   toMonthNumber,
   getPrevMonthDate,
   getNextMonthDate,
-  toArray
+  toArray,
+  parseDate,
+  formatDate
 } from "../../utils";
 import {
   defaultCalendarProps,
@@ -123,7 +125,7 @@ export default  _defineComponent({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     type: { type: String, required: false },
-    modelValue: { type: [Date, Array], required: false },
+    modelValue: { type: [Date, Array, String], required: false },
     min: { type: Date, required: false },
     max: { type: Date, required: false },
     currentDate: { type: Date, required: false },
@@ -133,7 +135,8 @@ export default  _defineComponent({
     weekStartsOn: { type: Number, required: false },
     formatter: { type: Function, required: false },
     allowSameDay: { type: Boolean, required: false },
-    severalMonths: { type: Boolean, required: false }
+    severalMonths: { type: Boolean, required: false },
+    valueFormat: { type: String, required: false }
   }, defaultCalendarProps),
   emits: ["update:model-value", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -149,20 +152,34 @@ export default  _defineComponent({
       const maxDate2 = props.max || getMaxDate(props.severalMonths);
       return maxDate2.getTime() < minDate.value.getTime() ? new Date(minDate.value) : maxDate2;
     });
+    const toDate = (date) => {
+      if (date instanceof Date) {
+        return date;
+      }
+      return parseDate(date, props.valueFormat);
+    };
+    const makeDate = (date) => {
+      return Array.isArray(date) ? date.map((item) => toDate(item)) : toDate(date);
+    };
+    const normalizeValue = (value) => {
+      return value ? makeDate(value) : props.type === "single" ? void 0 : [];
+    };
     const innerValue = ref(
-      props.modelValue ?? (props.type === "single" ? void 0 : [])
+      normalizeValue(props.modelValue)
     );
+    let currentEmitValue = innerValue.value;
     watch(
       () => props.modelValue,
       () => {
-        if (innerValue.value !== props.modelValue) {
-          innerValue.value = props.modelValue ?? (props.type === "single" ? void 0 : []);
+        if (currentEmitValue !== props.modelValue) {
+          innerValue.value = normalizeValue(props.modelValue);
+          currentEmitValue = props.modelValue;
         }
       }
     );
     const getInitialCurrentDate = () => {
       let date =  new Date();
-      const value = toArray(props.modelValue)[0];
+      const value = toArray(innerValue.value)[0];
       if (value) {
         date = value;
       }
@@ -286,8 +303,10 @@ export default  _defineComponent({
       }
       if (nextValue !== void 0) {
         innerValue.value = nextValue;
-        emit("update:model-value", nextValue);
-        emit("change", nextValue);
+        const emitValue = props.valueFormat ? Array.isArray(nextValue) ? nextValue.map((item) => formatDate(item, props.valueFormat)) : formatDate(nextValue, props.valueFormat) : nextValue;
+        currentEmitValue = emitValue;
+        emit("update:model-value", emitValue);
+        emit("change", emitValue);
       }
     };
     const inPopup = useInPopup();
@@ -305,7 +324,11 @@ export default  _defineComponent({
     const calendarStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, t, minDate, maxDate, innerValue, getInitialCurrentDate, innerCurrentDate, startDate, onPrevMonthClick, onNextMonthClick, pickerVisible, pickerValue, onMonthClick, onPickerConfirm, weeks, months, todayNumber, currentDates, onDayClick, inPopup, preventPageScroll, calendarClass, calendarStyle, get toMonthNumber() {
+    const __returned__ = { props, emit, bem, t, minDate, maxDate, toDate, makeDate, normalizeValue, innerValue, get currentEmitValue() {
+      return currentEmitValue;
+    }, set currentEmitValue(v) {
+      currentEmitValue = v;
+    }, getInitialCurrentDate, innerCurrentDate, startDate, onPrevMonthClick, onNextMonthClick, pickerVisible, pickerValue, onMonthClick, onPickerConfirm, weeks, months, todayNumber, currentDates, onDayClick, inPopup, preventPageScroll, calendarClass, calendarStyle, get toMonthNumber() {
       return toMonthNumber;
     }, SarButton, SarIcon, SarCalendarMonth, SarPopout, SarDatetimePicker };
     return __returned__;

package/components/calendar/common.d.ts

@@ -16,7 +16,7 @@ export interface CalendarProps {
     rootStyle?: StyleValue;
     rootClass?: string;
     type?: CalendarType;
-    modelValue?: Date | Date[];
+    modelValue?: Date | Date[] | string | string[];
     min?: Date;
     max?: Date;
     currentDate?: Date;
@@ -27,6 +27,7 @@ export interface CalendarProps {
     formatter?: (day: CalendarDay) => void;
     allowSameDay?: boolean;
     severalMonths?: boolean;
+    valueFormat?: string;
 }
 export declare const defaultCalendarProps: {
     type: CalendarProps["type"];
@@ -34,8 +35,8 @@ export declare const defaultCalendarProps: {
     weekStartsOn: number;
 };
 export interface CalendarEmits {
-    (e: 'update:model-value', value: Date | Date[]): void;
-    (e: 'change', value: Date | Date[]): void;
+    (e: 'update:model-value', value: Date | Date[] | string | string[]): void;
+    (e: 'change', value: Date | Date[] | string | string[]): void;
 }
 export interface CalendarMonthProps {
     year: number;

package/components/calendar-input/calendar-input.d.ts

@@ -1,12 +1,12 @@
 import { type CalendarType } from '../calendar/common';
 import { type CalendarInputProps } from './common';
 declare const _default: import("vue").DefineComponent<CalendarInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: Date | Date[] | undefined) => any;
-    change: (value: Date | Date[] | undefined) => any;
+    "update:model-value": (value: string | string[] | Date | Date[] | undefined) => any;
+    change: (value: string | string[] | Date | Date[] | undefined) => any;
     "update:visible": (visible: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<CalendarInputProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: Date | Date[] | undefined) => any) | undefined;
-    onChange?: ((value: Date | Date[] | undefined) => any) | undefined;
+    "onUpdate:model-value"?: ((value: string | string[] | Date | Date[] | undefined) => any) | undefined;
+    onChange?: ((value: string | string[] | Date | Date[] | undefined) => any) | undefined;
     "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
 }>, {
     type: CalendarType;
@@ -14,5 +14,6 @@ declare const _default: import("vue").DefineComponent<CalendarInputProps, {}, {}
     maxDays: number;
     weekStartsOn: number;
     showConfirm: boolean;
+    outletFormat: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/components/calendar-input/calendar-input.vue

@@ -23,7 +23,7 @@
       <sar-calendar
         v-if="already"
         :model-value="popoutValue"
-        @update:model-value="onChange"
+        @change="onChange"
         :type="type"
         :min="min"
         :max="max"
@@ -35,6 +35,7 @@
         :formatter="formatter"
         :allow-same-day="allowSameDay"
         :several-months="severalMonths"
+        :value-format="valueFormat"
       />
     </template>
   </sar-popout>
@@ -46,13 +47,12 @@ import { ref, watch, computed } from "vue";
 import SarPopoutInput from "../popout-input/popout-input.vue";
 import SarCalendar from "../calendar/calendar.vue";
 import SarPopout from "../popout/popout.vue";
-import { formatDate } from "../../utils";
+import { formatDate, isString, parseDate } from "../../utils";
 import { useTranslate } from "../locale";
 import {
   defaultCalendarInputProps
 } from "./common";
 import { useFormItemContext } from "../form/common";
-const format = "YYYY-MM-DD";
 export default  _defineComponent({
   components: {
     SarPopoutInput,
@@ -70,11 +70,12 @@ export default  _defineComponent({
     visible: { type: Boolean, required: false },
     title: { type: String, required: false },
     showConfirm: { type: Boolean, required: false },
+    outletFormat: { type: String, required: false },
     validateEvent: { type: Boolean, required: false },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     type: { type: String, required: false },
-    modelValue: { type: [Date, Array], required: false },
+    modelValue: { type: [Date, Array, String], required: false },
     min: { type: Date, required: false },
     max: { type: Date, required: false },
     currentDate: { type: Date, required: false },
@@ -85,12 +86,13 @@ export default  _defineComponent({
     formatter: { type: Function, required: false },
     allowSameDay: { type: Boolean, required: false },
     severalMonths: { type: Boolean, required: false },
+    valueFormat: { type: String, required: false },
     placeholder: { type: String, required: false },
     readonly: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
     clearable: { type: Boolean, required: false },
     multiline: { type: Boolean, required: false }
-  }, defaultCalendarInputProps),
+  }, defaultCalendarInputProps()),
   emits: ["update:visible", "update:model-value", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
@@ -130,15 +132,23 @@ export default  _defineComponent({
     };
     const inputValue = ref("");
     const { t } = useTranslate("calendar");
+    function getOutletTextMayByStr(date) {
+      if (isString(date) && props.valueFormat) {
+        date = parseDate(date, props.valueFormat);
+      }
+      if (date instanceof Date) {
+        return formatDate(date, props.outletFormat);
+      }
+      return date;
+    }
     function getOutletText(date, type) {
       if (type === "single") {
-        return formatDate(date, format);
+        return getOutletTextMayByStr(date);
       }
       if (type === "range") {
-        return `${formatDate(date[0], format)} ${t("to")} ${formatDate(
-          date[1],
-          format
-        )}`;
+        return `${getOutletTextMayByStr(date[0])} ${t(
+          "to"
+        )} ${getOutletTextMayByStr(date[1])}`;
       }
       if (type === "multiple") {
         return t("multipleOutlet", {
@@ -166,6 +176,7 @@ export default  _defineComponent({
       inputValue.value = "";
       innerValue.value = void 0;
       emit("update:model-value", void 0);
+      emit("change", void 0);
     };
     const innerVisible = ref(props.visible);
     watch(
@@ -182,7 +193,7 @@ export default  _defineComponent({
       innerVisible.value = true;
       emit("update:visible", true);
     };
-    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, confirmDisabled, onChange, onConfirm, inputValue, format, t, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarCalendar, SarPopout };
+    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, confirmDisabled, onChange, onConfirm, inputValue, t, getOutletTextMayByStr, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarCalendar, SarPopout };
     return __returned__;
   }
 });

package/components/calendar-input/common.d.ts

@@ -4,17 +4,19 @@ export interface CalendarInputProps extends CalendarProps, Omit<PopoutInputProps
     visible?: boolean;
     title?: string;
     showConfirm?: boolean;
+    outletFormat?: string;
     validateEvent?: boolean;
 }
-export declare const defaultCalendarInputProps: {
+export declare const defaultCalendarInputProps: () => {
     type: CalendarProps["type"];
     maxDays: number;
     weekStartsOn: number;
     showConfirm: boolean;
     validateEvent: boolean;
+    outletFormat: string;
 };
 export interface CalendarInputEmits {
     (e: 'update:visible', visible: boolean): void;
-    (e: 'update:model-value', value: Date | Date[] | undefined): void;
-    (e: 'change', value: Date | Date[] | undefined): void;
+    (e: 'update:model-value', value: Date | Date[] | string | string[] | undefined): void;
+    (e: 'change', value: Date | Date[] | string | string[] | undefined): void;
 }

package/components/calendar-input/common.js

@@ -1,5 +1,5 @@
 import { defaultConfig } from '../config';
-export const defaultCalendarInputProps = {
+export const defaultCalendarInputProps = () => ({
     ...defaultConfig.calendarInput,
     ...defaultConfig.calendar,
-};
+});

package/components/cascader-input/cascader-input.vue

@@ -23,7 +23,7 @@
       <sar-cascader
         v-if="already"
         :model-value="popoutValue"
-        @update:model-value="onChange"
+        @change="onChange"
         :options="options"
         :field-keys="fieldKeys"
         :placeholder="hintText"

package/components/checkbox-input/checkbox-input.vue

@@ -27,7 +27,7 @@
           :direction="direction"
           :validate-event="false"
           :model-value="popoutValue"
-          @update:model-value="onChange"
+          @change="onChange"
         >
           <template #custom="{ toggle }">
             <sar-list inlaid>
@@ -106,7 +106,7 @@ export default  _defineComponent({
     clearable: { type: Boolean, required: false },
     loading: { type: Boolean, required: false },
     multiline: { type: Boolean, required: false }
-  }, defaultCheckboxInputProps),
+  }, defaultCheckboxInputProps()),
   emits: ["update:visible", "update:model-value", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();

package/components/checkbox-input/common.d.ts

@@ -5,7 +5,7 @@ export interface CheckboxInputProps extends CheckboxGroupProps, Omit<PopoutInput
     visible?: boolean;
     title?: string;
 }
-export declare const defaultCheckboxInputProps: {
+export declare const defaultCheckboxInputProps: () => {
     options: () => never[];
     validateEvent: boolean;
 };

package/components/checkbox-input/common.js

@@ -1,5 +1,5 @@
 import { defaultConfig } from '../config';
-export const defaultCheckboxInputProps = {
+export const defaultCheckboxInputProps = () => ({
     ...defaultConfig.checkboxInput,
     options: () => [],
-};
+});

package/components/config/index.d.ts

@@ -25,6 +25,7 @@ import { type RadioGroupProps } from '../radio';
 import { type RadioInputProps } from '../radio-input';
 import { type ResultProps } from '../result';
 import { type SearchProps } from '../search';
+import { type SpaceProps } from '../space';
 import { type StepperProps } from '../stepper';
 import { type StepsProps } from '../steps';
 import { type SwiperDotProps } from '../swiper-dot';
@@ -70,6 +71,7 @@ export declare const defaultConfig: {
     calendarInput: {
         showConfirm: boolean;
         validateEvent: boolean;
+        outletFormat: string;
     };
     cascaderInput: {
         showConfirm: boolean;
@@ -304,6 +306,10 @@ export declare const defaultConfig: {
         step: number;
         validateEvent: boolean;
     };
+    space: {
+        direction: SpaceProps["direction"];
+        size: SpaceProps["size"];
+    };
     stepper: {
         min: number;
         max: number;

package/components/config/index.js

@@ -32,6 +32,7 @@ export const defaultConfig = {
     calendarInput: {
         showConfirm: true,
         validateEvent: true,
+        outletFormat: 'YYYY-MM-DD',
     },
     cascaderInput: {
         showConfirm: true,
@@ -266,6 +267,10 @@ export const defaultConfig = {
         step: 1,
         validateEvent: true,
     },
+    space: {
+        direction: 'horizontal',
+        size: 'middle',
+    },
     stepper: {
         min: Number.MIN_SAFE_INTEGER,
         max: Number.MAX_SAFE_INTEGER,

package/components/datetime-picker/common.d.ts

@@ -5,16 +5,17 @@ export interface DatetimePickerProps {
     type?: string;
     min?: Date;
     max?: Date;
-    modelValue?: Date;
+    modelValue?: Date | string;
     filter?: (letter: DatetimeLetter, value: number, date: Date, index: number) => boolean;
     formatter?: (letter: DatetimeLetter, option: DatetimeColumnOption, date: Date, index: number) => string | void | undefined;
+    valueFormat?: string;
 }
 export declare const defaultDatetimePickerProps: {
     type: string;
 };
 export interface DatetimePickerEmits {
-    (e: 'update:model-value', date: Date): void;
-    (e: 'change', date: Date): void;
+    (e: 'update:model-value', date: Date | string): void;
+    (e: 'change', date: Date | string): void;
 }
 export interface DatetimeColumnOption {
     value: number;

package/components/datetime-picker/datetime-picker.d.ts

@@ -1,10 +1,10 @@
 import { type DatetimePickerProps } from './common';
 declare const _default: import("vue").DefineComponent<DatetimePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (date: Date) => any;
-    change: (date: Date) => any;
+    "update:model-value": (date: string | Date) => any;
+    change: (date: string | Date) => any;
 }, string, import("vue").PublicProps, Readonly<DatetimePickerProps> & Readonly<{
-    "onUpdate:model-value"?: ((date: Date) => any) | undefined;
-    onChange?: ((date: Date) => any) | undefined;
+    "onUpdate:model-value"?: ((date: string | Date) => any) | undefined;
+    onChange?: ((date: string | Date) => any) | undefined;
 }>, {
     type: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/components/datetime-picker/datetime-picker.vue

@@ -4,14 +4,14 @@
     :root-style="stringifyStyle(rootStyle)"
     :columns="columns"
     :model-value="pickerValue"
-    @update:model-value="onChange"
+    @change="onChange"
   />
 </template>
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
 import { computed, ref, watch } from "vue";
-import { classNames, stringifyStyle } from "../../utils";
+import { classNames, formatDate, parseDate, stringifyStyle } from "../../utils";
 import SarPicker from "../picker/picker.vue";
 import {
   correctDate,
@@ -41,9 +41,10 @@ export default  _defineComponent({
     type: { type: String, required: false },
     min: { type: Date, required: false },
     max: { type: Date, required: false },
-    modelValue: { type: Date, required: false },
+    modelValue: { type: [Date, String], required: false },
     filter: { type: Function, required: false },
-    formatter: { type: Function, required: false }
+    formatter: { type: Function, required: false },
+    valueFormat: { type: String, required: false }
   }, defaultDatetimePickerProps),
   emits: ["update:model-value", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -109,9 +110,15 @@ export default  _defineComponent({
       const date = new Date(...currEvery);
       return date;
     };
+    const toDate = (date) => {
+      if (date instanceof Date) {
+        return date;
+      }
+      return parseDate(date, props.valueFormat);
+    };
     const normalizeValue = (value) => {
-      value = value ??  new Date();
-      return value.getTime() < minDate.value.getTime() ? minDate.value : value.getTime() > maxDate.value.getTime() ? maxDate.value : value;
+      const date = value ? toDate(value) :  new Date();
+      return date.getTime() < minDate.value.getTime() ? minDate.value : date.getTime() > maxDate.value.getTime() ? maxDate.value : date;
     };
     const innerType = computed(() => {
       return props.type.split("");
@@ -122,12 +129,15 @@ export default  _defineComponent({
       return maxDate2 < minDate.value ? new Date(minDate.value) : maxDate2;
     });
     const innerValue = ref(normalizeValue(props.modelValue));
+    let currentEmitValue = innerValue.value;
     watch(
       () => props.modelValue,
       () => {
-        innerValue.value = normalizeValue(props.modelValue);
-        if (props.modelValue) {
-          updateColumns(props.modelValue);
+        if (currentEmitValue !== props.modelValue) {
+          innerValue.value = normalizeValue(props.modelValue);
+          if (props.modelValue) {
+            updateColumns(innerValue.value);
+          }
         }
       }
     );
@@ -143,11 +153,17 @@ export default  _defineComponent({
     const onChange = (value) => {
       const nextValue = getDateByPickerValue(value);
       innerValue.value = nextValue;
+      const emitValue = props.valueFormat ? formatDate(nextValue, props.valueFormat) : nextValue;
+      currentEmitValue = emitValue;
       updateColumns(nextValue);
-      emit("update:model-value", nextValue);
-      emit("change", nextValue);
+      emit("update:model-value", emitValue);
+      emit("change", emitValue);
     };
-    const __returned__ = { props, emit, t, createColumnData, getChangedLetter, updateColumns, getDateByPickerValue, normalizeValue, innerType, minDate, maxDate, innerValue, pickerValue, columnsMap, get minValues() {
+    const __returned__ = { props, emit, t, createColumnData, getChangedLetter, updateColumns, getDateByPickerValue, toDate, normalizeValue, innerType, minDate, maxDate, innerValue, get currentEmitValue() {
+      return currentEmitValue;
+    }, set currentEmitValue(v) {
+      currentEmitValue = v;
+    }, pickerValue, columnsMap, get minValues() {
       return minValues;
     }, set minValues(v) {
       minValues = v;

package/components/datetime-picker-input/common.d.ts

@@ -4,21 +4,23 @@ export interface DatetimePickerInputProps extends DatetimePickerProps, Omit<Popo
     visible?: boolean;
     title?: string;
     outletFormat?: string;
+    valueFormat?: string;
     validateEvent?: boolean;
 }
-export declare const defaultDatetimePickerInputProps: {
+export declare const defaultDatetimePickerInputProps: () => {
     validateEvent: boolean;
     type: string;
 };
 export interface DatetimePickerInputEmits {
     (e: 'update:visible', visible: boolean): void;
-    (e: 'update:model-value', date: Date | undefined): void;
-    (e: 'change', date: Date | undefined): void;
+    (e: 'update:model-value', date: Date | string | undefined): void;
+    (e: 'change', date: Date | string | undefined): void;
 }
 export declare const mapTypeFormat: {
     y: string;
     yM: string;
     yMd: string;
+    yMdh: string;
     yMdhm: string;
     yMdhms: string;
     hm: string;