diff --git a/src/pages/calendar/Index.vue b/src/pages/calendar/Index.vue
index 40eef71d..e404fac5 100644
--- a/src/pages/calendar/Index.vue
+++ b/src/pages/calendar/Index.vue
@@ -1,65 +1,82 @@
 <template>
   <page-wraper>
-    <wd-toast />
-    <view style="margin: 20px 0">
-      <wd-cell-group border>
-        <wd-calendar label="单个日期选择" v-model="value1" @confirm="handleConfirm1" />
-        <wd-calendar label="多个日期选择" type="dates" v-model="value2" @confirm="handleConfirm2" />
-        <wd-calendar label="日期范围选择" type="daterange" v-model="value3" />
-        <wd-calendar label="日期时间选择" type="datetime" v-model="value4" />
-        <wd-calendar label="日期时间范围选择" type="datetimerange" v-model="value5" />
-        <wd-calendar label="周选择" type="week" v-model="value6" />
-        <wd-calendar label="月选择" type="month" :min-date="minDate" v-model="value7" />
-        <wd-calendar label="周范围选择" :first-day-of-week="1" type="weekrange" v-model="value8" />
-        <wd-calendar label="月范围选择" type="monthrange" v-model="value9" />
-        <wd-calendar label="日周月切换" :first-day-of-week="1" show-type-switch v-model="value10" />
-        <wd-calendar label="快捷操作" v-model="value16" :show-confirm="false" />
-        <wd-calendar label="日期格式化" type="daterange" v-model="value11" :formatter="formatter" />
-        <wd-calendar
-          label="快捷选项"
-          :shortcuts="shortcuts"
-          :on-shortcuts-click="onShortcutsClick"
-          type="daterange"
-          const
-          v-model="value12"
-          @confirm="handleConfirm3"
-        />
-        <wd-calendar
-          label="自定义展示"
-          type="daterange"
-          const
-          v-model="value13"
-          :display-format="displayFormat"
-          :inner-display-format="innerDisplayFormat"
-        />
-        <wd-calendar label="before-confirm" v-model="value14" :before-confirm="beforeConfirm" />
-      </wd-cell-group>
-    </view>
+    <wd-cell-group border>
+      <wd-cell title="单个日期选择" :value="cellValue.value1" is-link @click="visible.visible1 = true" />
+      <wd-cell title="多个日期选择" :value="cellValue.value2" is-link @click="visible.visible2 = true" />
+      <wd-cell title="日期范围选择" :value="cellValue.value3" is-link @click="visible.visible3 = true" />
+      <wd-cell title="日期时间选择" :value="cellValue.value4" is-link @click="visible.visible4 = true" />
+      <wd-cell title="日期时间范围选择" :value="cellValue.value5" is-link @click="visible.visible5 = true" />
+      <wd-cell title="周选择" :value="cellValue.value6" is-link @click="visible.visible6 = true" />
 
-    <demo-block transparent title="自定义选择器">
-      <view style="margin: 0 15px">
-        <view style="margin-bottom: 10px">当前选中日期：{{ formatValue }}</view>
-        <wd-calendar v-model="value15" use-default-slot @confirm="handleConfirm4">
-          <wd-button>选择日期</wd-button>
-        </wd-calendar>
-      </view>
-    </demo-block>
-    <demo-block transparent title="open事件">
-      <wd-calendar v-model="value17" @open="handleOpen" />
-    </demo-block>
+      <wd-calendar label="周选择" type="week" v-model="value6" />
+      <wd-calendar label="月选择" type="month" :min-date="minDate" v-model="value7" />
+      <wd-calendar label="周范围选择" :first-day-of-week="1" type="weekrange" v-model="value8" />
+      <wd-calendar label="月范围选择" type="monthrange" v-model="value9" />
+      <wd-calendar label="日周月切换" :first-day-of-week="1" show-type-switch v-model="value10" />
+      <wd-calendar label="快捷操作" v-model="value16" :show-confirm="false" />
+      <wd-calendar label="日期格式化" type="daterange" v-model="value11" :formatter="formatter" />
+      <wd-calendar
+        label="快捷选项"
+        :shortcuts="shortcuts"
+        :on-shortcuts-click="onShortcutsClick"
+        type="daterange"
+        const
+        v-model="value12"
+        @confirm="handleConfirm3"
+      />
+      <wd-calendar
+        label="自定义展示"
+        type="daterange"
+        const
+        v-model="value13"
+        :display-format="displayFormat"
+        :inner-display-format="innerDisplayFormat"
+      />
+      <wd-calendar label="before-confirm" v-model="value14" :before-confirm="beforeConfirm" />
+    </wd-cell-group>
+    <wd-calendar v-model:visible="visible.visible1" v-model="value1" @confirm="(result) => handleConfirm({ ...result, index: 1 })" />
+    <wd-calendar v-model:visible="visible.visible2" v-model="value2" type="dates" @confirm="(result) => handleConfirm({ ...result, index: 2 })" />
+    <wd-calendar
+      v-model:visible="visible.visible3"
+      v-model="value3"
+      type="daterange"
+      @confirm="(result) => handleConfirm({ ...result, index: 3, connectors: ' 至 ' })"
+    />
+    <wd-calendar
+      v-model:visible="visible.visible4"
+      v-model="value4"
+      type="datetime"
+      @confirm="(result) => handleConfirm({ ...result, index: 4, type: 'datetime' })"
+    />
+    <wd-calendar
+      v-model:visible="visible.visible5"
+      v-model="value5"
+      type="datetimerange"
+      @confirm="(result) => handleConfirm({ ...result, type: 'datetime', index: 5, connectors: ' 至 ' })"
+    />
+    <wd-calendar v-model:visible="visible.visible6" v-model="value6" type="week" @confirm="(result) => handleConfirm({ ...result, index: 6 })" />
   </page-wraper>
-  <wd-message-box />
 </template>
 <script lang="ts" setup>
 import { useToast } from '@/uni_modules/wot-design-uni'
 import { dayjs } from '@/uni_modules/wot-design-uni'
+import { isArray } from '@/uni_modules/wot-design-uni/components/common/util'
 import type { CalendarDayItem, CalendarFormatter } from '@/uni_modules/wot-design-uni/components/wd-calendar-view/types'
 import type { CalendarOnShortcutsClickOption } from '@/uni_modules/wot-design-uni/components/wd-calendar/types'
-import { ref } from 'vue'
-import { useMessage } from '@/uni_modules/wot-design-uni'
-const message = useMessage()
+import { reactive, ref } from 'vue'
 
-const minDate = ref<number>(new Date(new Date().getFullYear() - 20, new Date().getMonth() - 6, new Date().getDate()).getTime())
+const visible = reactive({
+  visible1: false,
+  visible2: false,
+  visible3: false,
+  visible4: false,
+  visible5: false,
+  visible6: false,
+  visible7: false,
+  visible8: false,
+  visible9: false,
+  visible10: false
+})
 
 const value1 = ref<number>(Date.now())
 const value2 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now()])
@@ -78,7 +95,22 @@ const value14 = ref<number | null>(null)
 const value15 = ref<number | null>(null)
 const value16 = ref<number>(Date.now())
 const value17 = ref<number>(Date.now())
-const formatValue = ref<string>('')
+
+const cellValue = reactive<{ [key: PropertyKey]: string }>({
+  value1: formatDate(value1.value),
+  value2: value2.value.map((item) => formatDate(item)).join(','),
+  value3: '',
+  value4: formatDate(value4.value, 'datetime'),
+  value5: value5.value.map((item) => formatDate(item, 'datetime')).join(' 至 '),
+  value6: '',
+  value7: '',
+  value8: '',
+  value9: '',
+  value10: ''
+})
+
+const minDate = ref<number>(new Date(new Date().getFullYear() - 20, new Date().getMonth() - 6, new Date().getDate()).getTime())
+
 const formatter: CalendarFormatter = (day: CalendarDayItem) => {
   const date = new Date(day.date)
   const now = new Date()
@@ -158,21 +190,33 @@ const beforeConfirm = ({ value, resolve }: any) => {
   }
 }
 
-function handleConfirm1({ value }: any) {
-  console.log(value)
-}
-function handleConfirm2({ value }: any) {
-  console.log(value)
+function handleConfirm({
+  value,
+  type,
+  index,
+  connectors
+}: {
+  value: string | number | (string | number)[]
+  type?: 'date' | 'datetime'
+  index: number
+  connectors?: string
+}) {
+  cellValue[`value${index}`] = (isArray(value) ? value : [value]).map((item) => formatDate(item, type)).join(connectors || ',')
 }
+
 function handleConfirm3({ value }: any) {
   console.log(value)
 }
-function handleConfirm4({ value }: any) {
-  console.log(new Date(value).toString())
-  formatValue.value = new Date(value).toString()
-}
-function handleOpen() {
-  message.alert('打开日历')
+
+function formatDate(date: number | string, type?: 'date' | 'datetime') {
+  switch (type) {
+    case 'date':
+      return dayjs(date).format('YYYY-MM-DD')
+    case 'datetime':
+      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
+    default:
+      return dayjs(date).format('YYYY-MM-DD')
+  }
 }
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/pages/colPicker/Index.vue b/src/pages/colPicker/Index.vue
index 690c5aab..088bbe3a 100644
--- a/src/pages/colPicker/Index.vue
+++ b/src/pages/colPicker/Index.vue
@@ -123,20 +123,10 @@ const cellValue = reactive<{ [key: PropertyKey]: any }>({
 
 const value1 = ref<string[]>([])
 const value2 = ref<string[]>([])
-const value3 = ref<string[]>(['130000', '130200', '130204'])
 const value4 = ref<string[]>([])
-const value5 = ref<string[]>([])
-const value6 = ref<string[]>(['130000', '130200', '130204'])
 const value7 = ref<string[]>([])
 const value8 = ref<string[]>([])
-const value9 = ref<string[]>([])
-const value10 = ref<string[]>([])
 const value11 = ref<string[]>([])
-const value12 = ref<string[]>([])
-const value13 = ref<string[]>([])
-const value14 = ref<string[]>([])
-const value15 = ref<string[]>([])
-const displayValue = ref<string>('')
 const areaData1 = ref<ColPickerOption[][]>([
   colPickerData.map((item) => {
     return {
diff --git a/src/pages/datetimePicker/Index.vue b/src/pages/datetimePicker/Index.vue
index 7c4e5cc6..2f19e3e0 100644
--- a/src/pages/datetimePicker/Index.vue
+++ b/src/pages/datetimePicker/Index.vue
@@ -1,67 +1,130 @@
 <template>
   <page-wraper>
-    <wd-toast />
-    <demo-block transparent>
-      <wd-cell-group border>
-        <wd-datetime-picker label="日期选择" v-model="value1" @confirm="handleConfirm1" />
-        <wd-datetime-picker label="年月日" v-model="value2" type="date" @confirm="handleConfirm2" />
-        <wd-datetime-picker label="年月" v-model="value3" type="year-month" @confirm="handleConfirm3" />
-        <wd-datetime-picker label="年" v-model="value16" type="year" @confirm="handleConfirm16" />
-        <wd-datetime-picker label="时分" v-model="value4" type="time" @confirm="handleConfirm4" />
-        <wd-datetime-picker label="展示格式" v-model="value5" :display-format="displayFormat" @confirm="handleConfirm5" />
-        <wd-datetime-picker label="内部格式" v-model="value6" :formatter="formatter" @confirm="handleConfirm6" />
-        <wd-datetime-picker label="过滤选项" v-model="value7" :filter="filter" @confirm="handleConfirm7" />
-        <wd-datetime-picker label="before-confirm" v-model="value8" :before-confirm="beforeConfirm" @confirm="handleConfirm8" />
-        <wd-datetime-picker label="错误" v-model="value9" error @confirm="handleConfirm9" />
-        <wd-datetime-picker label="必填" v-model="value10" required @confirm="handleConfirm10" />
-        <wd-datetime-picker label="默认日期" v-model="value2" :default-value="value2" />
-        <wd-datetime-picker label="时间范围一年" :minDate="minDate" :maxDate="maxDate" v-model="value17" @confirm="handleConfirm1" />
-      </wd-cell-group>
-    </demo-block>
-    <demo-block title="label 不传" transparent>
-      <wd-datetime-picker v-model="value11" @confirm="handleConfirm11" />
-    </demo-block>
-    <demo-block title="大小" transparent>
-      <wd-datetime-picker label="日期选择" size="large" v-model="value12" @confirm="handleConfirm12" />
-    </demo-block>
-    <demo-block title="值靠右展示" transparent>
-      <wd-datetime-picker label="日期选择" align-right v-model="value13" @confirm="handleConfirm13" />
-    </demo-block>
-    <demo-block title="区域选择" transparent>
-      <wd-datetime-picker label="日期选择" title="请选择区间" v-model="value14" @confirm="handleConfirm14" />
-    </demo-block>
-    <demo-block title="范围tab展示格式" transparent>
-      <wd-datetime-picker label="日期选择" v-model="value15" @confirm="handleConfirm15" :display-format-tab-label="displayFormatTabLabel" />
-    </demo-block>
+    <wd-cell-group border>
+      <wd-cell title="日期选择" :value="cellValue.value1" is-link @click="visible.visible1 = true"></wd-cell>
+      <wd-cell title="年月日" :value="cellValue.value2" is-link @click="visible.visible2 = true"></wd-cell>
+      <wd-cell title="年月" :value="cellValue.value3" is-link @click="visible.visible3 = true"></wd-cell>
+      <wd-cell title="年" :value="cellValue.value4" is-link @click="visible.visible4 = true"></wd-cell>
+      <wd-cell title="时分" :value="cellValue.value5" is-link @click="visible.visible5 = true"></wd-cell>
+      <wd-cell title="过滤选项" :value="cellValue.value6" is-link @click="visible.visible6 = true"></wd-cell>
+      <wd-cell title="before-confirm" :value="cellValue.value7" is-link @click="visible.visible7 = true"></wd-cell>
+      <wd-cell title="时间范围一年" :value="cellValue.value8" is-link @click="visible.visible8 = true"></wd-cell>
+      <wd-cell title="区间选择" :value="cellValue.value9" is-link @click="visible.visible9 = true"></wd-cell>
+      <wd-cell title="范围tab展示格式" :value="cellValue.value10" is-link @click="visible.visible10 = true"></wd-cell>
+    </wd-cell-group>
+    <wd-datetime-picker v-model="value1" v-model:visible="visible.visible1" @confirm="(result) => handleConfirm({ ...result, index: 1 })" />
+    <wd-datetime-picker
+      v-model="value2"
+      v-model:visible="visible.visible2"
+      type="date"
+      @confirm="(result) => handleConfirm({ ...result, index: 2, type: 'date' })"
+    />
+
+    <wd-datetime-picker
+      v-model="value3"
+      v-model:visible="visible.visible3"
+      type="year-month"
+      @confirm="(result) => handleConfirm({ ...result, index: 3, type: 'year-month' })"
+    />
+
+    <wd-datetime-picker
+      v-model="value4"
+      v-model:visible="visible.visible4"
+      type="year"
+      @confirm="(result) => handleConfirm({ ...result, index: 4, type: 'year' })"
+    />
+
+    <wd-datetime-picker
+      v-model="value5"
+      v-model:visible="visible.visible5"
+      type="time"
+      @confirm="(result) => handleConfirm({ ...result, index: 5, type: 'time' })"
+    />
+
+    <wd-datetime-picker
+      v-model="value6"
+      v-model:visible="visible.visible6"
+      :filter="filter"
+      @confirm="(result) => handleConfirm({ ...result, index: 6 })"
+    />
+
+    <wd-datetime-picker
+      v-model="value7"
+      v-model:visible="visible.visible7"
+      :before-confirm="beforeConfirm"
+      @confirm="(result) => handleConfirm({ ...result, index: 7 })"
+    />
+
+    <wd-datetime-picker
+      v-model="value8"
+      v-model:visible="visible.visible8"
+      :minDate="minDate"
+      :maxDate="maxDate"
+      @confirm="(result) => handleConfirm({ ...result, index: 8 })"
+    />
+
+    <wd-datetime-picker
+      v-model:visible="visible.visible9"
+      title="请选择区间"
+      v-model="value9"
+      @confirm="(result) => handleConfirm({ ...result, index: 9 })"
+    />
+
+    <wd-datetime-picker
+      v-model:visible="visible.visible10"
+      v-model="value10"
+      @confirm="(result) => handleConfirm({ ...result, index: 10 })"
+      :display-format-tab-label="displayFormatTabLabel"
+    />
   </page-wraper>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni'
-import type { DatetimePickerViewFilter, DatetimePickerViewFormatter } from '@/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types'
+import { useToast, dayjs } from '@/uni_modules/wot-design-uni'
+import { isArray } from '@/uni_modules/wot-design-uni/components/common/util'
 import type {
-  DatetimePickerDisplayFormat,
-  DatetimePickerDisplayFormatTabLabel,
-  DatetimePickerInstance
-} from '@/uni_modules/wot-design-uni/components/wd-datetime-picker/types'
-import { ref } from 'vue'
+  DatetimePickerViewFilter,
+  DatetimePickerViewFormatter,
+  DateTimeType
+} from '@/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types'
+import type { DatetimePickerDisplayFormatTabLabel, DatetimePickerInstance } from '@/uni_modules/wot-design-uni/components/wd-datetime-picker/types'
+import { reactive, ref } from 'vue'
+
+const visible = reactive({
+  visible1: false,
+  visible2: false,
+  visible3: false,
+  visible4: false,
+  visible5: false,
+  visible6: false,
+  visible7: false,
+  visible8: false,
+  visible9: false,
+  visible10: false
+})
 
 const value1 = ref<string>('')
 const value2 = ref<number>(Date.now())
 const value3 = ref<number>(Date.now())
-const value4 = ref<string>('09:20')
-const value5 = ref<number>(Date.now())
+const value4 = ref<number>(Date.now())
+const value5 = ref<string>('09:20')
 const value6 = ref<number>(Date.now())
 const value7 = ref<number>(Date.now())
 const value8 = ref<number>(Date.now())
-const value9 = ref<number>(Date.now())
-const value10 = ref<number>(Date.now())
-const value11 = ref<string>('')
-const value12 = ref<string>('')
-const value13 = ref<number>(Date.now())
-const value14 = ref<any[]>(['', ''])
-const value15 = ref<any[]>(['', Date.now()])
-const value16 = ref(Date.now())
-const value17 = ref(Date.now())
+const value9 = ref<any[]>(['', ''])
+const value10 = ref<any[]>(['', ''])
+
+const cellValue = reactive<{ [key: PropertyKey]: any }>({
+  value1: '',
+  value2: formatDate(value2.value, 'date'),
+  value3: formatDate(value3.value, 'year-month'),
+  value4: formatDate(value4.value, 'year'),
+  value5: '09:20',
+  value6: formatDate(value6.value),
+  value7: formatDate(value7.value),
+  value8: formatDate(value8.value),
+  value9: '',
+  value10: ''
+})
 
 const minDate = ref<number>(Date.now())
 const maxDate = ref<number>(new Date(new Date().getFullYear() + 1, new Date().getMonth(), new Date().getDate()).getTime())
@@ -88,9 +151,7 @@ const filter: DatetimePickerViewFilter = (type, values) => {
   }
   return values
 }
-const displayFormat: DatetimePickerDisplayFormat = (items) => {
-  return `${items[0].label}年${items[1].label}月${items[2].label}日 ${items[3].label}:${items[4].label}`
-}
+
 const toast = useToast()
 const beforeConfirm = (value: number | string | (number | string)[], resolve: (isPass: boolean) => void, picker: DatetimePickerInstance) => {
   picker.setLoading(true)
@@ -108,57 +169,25 @@ const displayFormatTabLabel: DatetimePickerDisplayFormatTabLabel = (items) => {
   return `${items[0].label}年${items[1].label}月${items[2].label}日 ${items[3].label}:${items[4].label}`
 }
 
-/** picker触发confirm事件，同步触发confirm事件 */
-function handleConfirm1({ value }: any) {
-  console.log(new Date(value))
-}
-function handleConfirm2({ value }: any) {
-  console.log(value)
-}
-function handleConfirm3({ value }: any) {
-  console.log(value)
-}
-function handleConfirm4({ value }: any) {
-  console.log(value)
-}
-function handleConfirm5({ value }: any) {
-  console.log(value)
-}
-function handleConfirm6({ value }: any) {
-  console.log(value)
-}
-function handleConfirm7({ value }: any) {
-  console.log(value)
+function handleConfirm({ value, index, type }: { value: string | number | (string | number)[]; index: number; type?: DateTimeType }) {
+  cellValue[`value${index}`] = (isArray(value) ? value : [value]).map((item) => formatDate(item, type)).join('至')
 }
 
-function handleConfirm8({ value }: any) {
-  console.log(value)
+function formatDate(date: number | string, type?: DateTimeType) {
+  switch (type) {
+    case 'date':
+      return dayjs(date).format('YYYY-MM-DD')
+    case 'year-month':
+      return dayjs(date).format('YYYY-MM')
+    case 'time':
+      return date
+    case 'datetime':
+      return dayjs(date).format('YYYY-MM-DD HH:mm')
+    case 'year':
+      return dayjs(date).format('YYYY')
+    default:
+      return dayjs(date).format('YYYY-MM-DD HH:mm')
+  }
 }
-function handleConfirm9({ value }: any) {
-  console.log(value)
-}
-function handleConfirm10({ value }: any) {
-  console.log(value)
-}
-function handleConfirm11({ value }: any) {
-  console.log(value)
-}
-function handleConfirm12({ value }: any) {
-  console.log(value)
-}
-function handleConfirm13({ value }: any) {
-  console.log(value)
-}
-function handleConfirm14({ value }: any) {
-  console.log(value)
-}
-function handleConfirm15({ value }: any) {
-  console.log(value)
-}
-function handleConfirm16({ value }: any) {
-  console.log(value)
-}
-/** picker触发cancel事件，同步触发cancel事件 */
-function onCancel() {}
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/pages/picker/Index.vue b/src/pages/picker/Index.vue
index 296fcb23..f79e2480 100644
--- a/src/pages/picker/Index.vue
+++ b/src/pages/picker/Index.vue
@@ -1,49 +1,65 @@
 <template>
   <page-wraper>
-    <wd-toast />
     <demo-block transparent>
       <wd-cell-group border>
-        <wd-picker label="单列选项" v-model="value0" :columns="columns0" />
-        <wd-picker label="禁用" disabled v-model="value1" :columns="columns1" />
-        <wd-picker label="只读" readonly v-model="value2" :columns="columns2" />
-        <wd-picker label="loading" v-model="value3" loading :columns="columns3" />
-        <wd-picker label="多列" v-model="value4" :columns="columns4" />
-        <wd-picker label="多级联动" v-model="value5" :columns="columns5" :column-change="onChangeDistrict" />
-        <wd-picker label="分隔符" v-model="value6" :columns="columns6" :display-format="displayFormat" />
-        <wd-picker label="标题" v-model="value9" :columns="columns7" title="文案标题" />
-        <wd-picker label="before-confirm" :columns="columns0" v-model="value7" :before-confirm="beforeConfirm" />
-        <wd-picker label="错误" v-model="value10" error :columns="columns0" />
-        <wd-picker label="必填" v-model="value11" :columns="columns0" required />
-        <wd-picker label="可清空" :clearable="true" v-model="value15" :columns="columns5" :column-change="onChangeDistrict" />
+        <wd-cell title="单列选项" :value="cellValue.value1" is-link @click="visible.visible1 = true"></wd-cell>
+        <wd-cell title="loading" :value="cellValue.value2" is-link @click="visible.visible2 = true"></wd-cell>
+        <wd-cell title="多列" :value="cellValue.value3" is-link @click="visible.visible3 = true"></wd-cell>
+        <wd-cell title="多级联动" :value="cellValue.value4" is-link @click="visible.visible4 = true"></wd-cell>
+        <wd-cell title="自定义标题" :value="cellValue.value5" is-link @click="visible.visible5 = true" />
+        <wd-cell title="before-confirm" :value="cellValue.value6" is-link @click="visible.visible6 = true" />
       </wd-cell-group>
     </demo-block>
-    <demo-block title="label 不传" transparent>
-      <wd-picker :columns="columns0" v-model="value12" />
-    </demo-block>
-    <demo-block title="大小" transparent>
-      <wd-picker label="单列选项" v-model="value13" size="large" :columns="columns0" />
-    </demo-block>
-    <demo-block title="值靠右显示" transparent>
-      <wd-picker label="单列选项" v-model="value14" align-right :columns="columns0" />
-    </demo-block>
-    <demo-block title="默认插槽" transparent>
-      <view class="default-slot">
-        <view class="default-slot-txt">
-          选中值：
-          <text style="color: #34d19d">{{ value8 }}</text>
-        </view>
-        <wd-picker :columns="columns0" v-model="value8" use-default-slot @confirm="handleConfirm">
-          <wd-button>插槽唤起</wd-button>
-        </wd-picker>
-      </view>
-    </demo-block>
+    <wd-picker
+      v-model:visible="visible.visible1"
+      v-model="value1"
+      :columns="columns0"
+      @confirm="(result) => handleConfirm({ ...result, index: 1 })"
+    />
+    <wd-picker
+      v-model:visible="visible.visible2"
+      v-model="value2"
+      loading
+      :columns="columns1"
+      @confirm="(result) => handleConfirm({ ...result, index: 2 })"
+    />
+    <wd-picker
+      v-model="value3"
+      v-model:visible="visible.visible3"
+      :columns="columns2"
+      @confirm="(result) => handleConfirm({ ...result, index: 3 })"
+    />
+    <wd-picker
+      v-model="value4"
+      v-model:visible="visible.visible4"
+      :columns="columns3"
+      :column-change="onChangeDistrict"
+      @confirm="(result) => handleConfirm({ ...result, index: 4 })"
+    />
+
+    <wd-picker
+      v-model="value5"
+      v-model:visible="visible.visible5"
+      :columns="columns4"
+      title="文案标题"
+      @confirm="(result) => handleConfirm({ ...result, index: 5 })"
+    />
+
+    <wd-picker
+      v-model="value6"
+      v-model:visible="visible.visible6"
+      :columns="columns0"
+      :before-confirm="beforeConfirm"
+      @confirm="(result) => handleConfirm({ ...result, index: 6 })"
+    />
   </page-wraper>
 </template>
 <script lang="ts" setup>
 import { useToast } from '@/uni_modules/wot-design-uni'
-import type { ColumnItem, PickerViewColumnChange } from '@/uni_modules/wot-design-uni/components/wd-picker-view/types'
-import type { PickerBeforeConfirm, PickerDisplayFormat } from '@/uni_modules/wot-design-uni/components/wd-picker/types'
-import { ref } from 'vue'
+import { isArray } from '@/uni_modules/wot-design-uni/components/common/util'
+import type { PickerViewColumnChange } from '@/uni_modules/wot-design-uni/components/wd-picker-view/types'
+import type { PickerBeforeConfirm } from '@/uni_modules/wot-design-uni/components/wd-picker/types'
+import { reactive, ref } from 'vue'
 
 const toast = useToast()
 
@@ -89,44 +105,20 @@ const district: Record<string, Array<{ label: string; value: string }>> = {
 }
 
 const columns0 = ref(['选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
-const value0 = ref('')
-
-const value1 = ref('选项3')
 const columns1 = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
+const columns2 = ref([
+  ['中山大学', '中南大学', '华南理工大学'],
+  ['计算机科学与技术', '软件工程', '通信工程', '法学', '经济学']
+])
+const columns3 = ref([district[0], district[district[0][0].value], district[district[district[0][0].value][0].value]])
+const columns4 = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
+
+const value1 = ref('')
 const value2 = ref('选项4')
-const columns2 = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
-
-const columns3 = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
-const value3 = ref('选项4')
-
+const value3 = ref([])
 const value4 = ref([])
-const columns4 = ref([
-  ['中山大学', '中南大学', '华南理工大学'],
-  ['计算机科学与技术', '软件工程', '通信工程', '法学', '经济学']
-])
-
-const value5 = ref(['110000', '110100', '110102'])
-const value15 = ref(['110000', '110100', '110102'])
-const columns5 = ref([district[0], district[district[0][0].value], district[district[district[0][0].value][0].value]])
-
-const value6 = ref(['中南大学', '软件工程'])
-const value8 = ref('选项2')
-const value9 = ref('选项1')
-const value10 = ref('选项2')
-
-const value11 = ref('选项3')
-const value12 = ref('选项3')
-const value13 = ref('选项3')
-const value14 = ref('选项3')
-
-const columns6 = ref([
-  ['中山大学', '中南大学', '华南理工大学'],
-  ['计算机科学与技术', '软件工程', '通信工程', '法学', '经济学']
-])
-
-const columns7 = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
-
-const value7 = ref('')
+const value5 = ref('选项1')
+const value6 = ref('')
 
 const onChangeDistrict: PickerViewColumnChange = (pickerView, value, columnIndex, resolve) => {
   const item = (value as Record<string, any>[])[columnIndex]
@@ -139,14 +131,6 @@ const onChangeDistrict: PickerViewColumnChange = (pickerView, value, columnIndex
   resolve()
 }
 
-const displayFormat: PickerDisplayFormat = (items) => {
-  return (items as ColumnItem[])
-    .map((item) => {
-      return item.label
-    })
-    .join('-')
-}
-
 const beforeConfirm: PickerBeforeConfirm = (value, resolve, picker) => {
   picker.setLoading(true)
   setTimeout(() => {
@@ -160,26 +144,30 @@ const beforeConfirm: PickerBeforeConfirm = (value, resolve, picker) => {
   }, 2000)
 }
 
-function handleConfirm({ value }: any) {
-  value8.value = value
-}
-</script>
-<style lang="scss" scoped>
-.wot-theme-dark {
-  .default-slot {
-    background: $-dark-background2;
-  }
-  .default-slot-txt {
-    color: $-dark-color3;
-  }
-}
-.default-slot {
-  background: #fff;
-  padding: 15px;
+function handleConfirm({ selectedItems, index }: { selectedItems: Record<string, any> | Record<string, any>[]; index: number }) {
+  cellValue[`value${index}`] = (isArray(selectedItems) ? selectedItems : [selectedItems])
+    .map((item) => {
+      return item.label
+    })
+    .join('/')
 }
 
-.default-slot-txt {
-  margin-bottom: 10px;
-  color: rgba(0, 0, 0, 0.45);
-}
-</style>
+const visible = reactive({
+  visible1: false,
+  visible2: false,
+  visible3: false,
+  visible4: false,
+  visible5: false,
+  visible6: false
+})
+
+const cellValue = reactive<{ [key: PropertyKey]: any }>({
+  value1: '',
+  value2: '选项4',
+  value3: '',
+  value4: '',
+  value5: '选项1',
+  value6: ''
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
index 21dc4e1c..fb26f6d3 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
@@ -1,10 +1,10 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-15 20:40:34
- * @LastEditTime: 2024-11-13 13:18:15
+ * @LastEditTime: 2024-12-03 13:29:49
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-calendar\types.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
  * 记得注释
  */
 import type { PropType } from 'vue'
@@ -110,7 +110,11 @@ export const calendarProps = {
   /**
    * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
    */
-  immediateChange: makeBooleanProp(false)
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 是否显示
+   */
+  visible: makeBooleanProp(false)
 }
 
 export type CalendarDisplayFormat = (value: number | number[], type: CalendarType) => string
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
index 90893dc8..ac012dc7 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
@@ -4,14 +4,17 @@
       v-model="pickerShow"
       :duration="250"
       :close-on-click-modal="closeOnClickModal"
-      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :hide-when-close="false"
       :z-index="zIndex"
-      @close="close"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      @close="handlePickerClose"
+      @closed="handlePickerClosed"
+      @opened="handlePickerOpened"
     >
       <view class="wd-calendar__header">
         <view v-if="!showTypeSwitch && shortcuts.length === 0" class="wd-calendar__title">{{ title || translate('title') }}</view>
         <view v-if="showTypeSwitch" class="wd-calendar__tabs">
-          <wd-tabs ref="calendarTabs" v-model="currentTab" @change="handleTypeChange">
+          <wd-tabs ref="tabsRef" v-model="currentTab" @change="handleTypeChange">
             <wd-tab :title="translate('day')" :name="translate('day')" />
             <wd-tab :title="translate('week')" :name="translate('week')" />
             <wd-tab :title="translate('month')" :name="translate('month')" />
@@ -32,10 +35,7 @@
         </view>
         <wd-icon custom-class="wd-calendar__close" name="add" @click="close" />
       </view>
-      <view
-        v-if="inited"
-        :class="`wd-calendar__view  ${currentType.indexOf('range') > -1 ? 'is-range' : ''} ${showConfirm ? 'is-show-confirm' : ''}`"
-      >
+      <view :class="`wd-calendar__view  ${currentType.indexOf('range') > -1 ? 'is-range' : ''} ${showConfirm ? 'is-show-confirm' : ''}`">
         <view v-if="range(type)" :class="`wd-calendar__range-label ${type === 'monthrange' ? 'is-monthrange' : ''}`">
           <view
             :class="`wd-calendar__range-label-item ${!calendarValue || !isArray(calendarValue) || !calendarValue[0] ? 'is-placeholder' : ''}`"
@@ -49,7 +49,7 @@
           </view>
         </view>
         <wd-calendar-view
-          ref="calendarView"
+          ref="calendarViewRef"
           v-model="calendarValue"
           :type="currentType"
           :min-date="minDate"
@@ -93,11 +93,12 @@ import wdActionSheet from '../wd-action-sheet/wd-action-sheet.vue'
 import wdButton from '../wd-button/wd-button.vue'
 import { ref, computed, watch } from 'vue'
 import { dayjs } from '../common/dayjs'
-import { deepClone, isArray, isEqual, padZero, requestAnimationFrame } from '../common/util'
+import { deepClone, isArray, isEqual, padZero } from '../common/util'
 import { getWeekNumber, isRange } from '../wd-calendar-view/utils'
 import { useTranslate } from '../composables/useTranslate'
 import { calendarProps, type CalendarExpose } from './types'
-import type { CalendarType } from '../wd-calendar-view/types'
+import type { CalendarType, CalendarViewInstance } from '../wd-calendar-view/types'
+import type { TabsInstance } from '../wd-tabs/types'
 const { translate } = useTranslate('calendar')
 
 const formatRange = (value: number, rangeType: 'start' | 'end', type: CalendarType) => {
@@ -130,20 +131,21 @@ const formatRange = (value: number, rangeType: 'start' | 'end', type: CalendarTy
 }
 
 const props = defineProps(calendarProps)
-const emit = defineEmits(['cancel', 'change', 'update:modelValue', 'confirm', 'open'])
+const emit = defineEmits(['cancel', 'change', 'update:modelValue', 'confirm', 'open', 'update:visible', 'close'])
 
 const pickerShow = ref<boolean>(false)
 const calendarValue = ref<null | number | number[]>(null)
 const lastCalendarValue = ref<null | number | number[]>(null)
 const panelHeight = ref<number>(338)
-const confirmBtnDisabled = ref<boolean>(true)
+const confirmBtnDisabled = computed(() => {
+  return getConfirmBtnStatus(calendarValue.value)
+})
 const currentTab = ref<number>(0)
 const lastTab = ref<number>(0)
 const currentType = ref<CalendarType>('date')
 const lastCurrentType = ref<CalendarType>()
-const inited = ref<boolean>(false)
-const calendarView = ref()
-const calendarTabs = ref()
+const calendarViewRef = ref<CalendarViewInstance>() // 日历组件实例
+const tabsRef = ref<TabsInstance>() // tabs组件实例
 
 const rangeLabel = computed(() => {
   const [start, end] = deepClone(isArray(calendarValue.value) ? calendarValue.value : [])
@@ -157,13 +159,24 @@ watch(
   (val, oldVal) => {
     if (isEqual(val, oldVal)) return
     calendarValue.value = deepClone(val)
-    confirmBtnDisabled.value = getConfirmBtnStatus(val)
   },
   {
     immediate: true
   }
 )
 
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (newValue) {
+      open()
+    } else {
+      close()
+    }
+  },
+  { deep: true, immediate: true }
+)
+
 watch(
   () => props.type,
   (newValue) => {
@@ -201,11 +214,11 @@ const range = computed(() => {
 })
 
 function scrollIntoView() {
-  calendarView.value && calendarView.value && calendarView.value.$.exposed.scrollIntoView()
+  calendarViewRef.value && calendarViewRef.value && calendarViewRef.value!.scrollIntoView()
 }
+
 // 对外暴露方法
 function open() {
-  inited.value = true
   pickerShow.value = true
   lastCalendarValue.value = deepClone(calendarValue.value)
   lastTab.value = currentTab.value
@@ -213,50 +226,65 @@ function open() {
   requestAnimationFrame(() => {
     scrollIntoView()
   })
-
-  setTimeout(() => {
-    if (props.showTypeSwitch) {
-      calendarTabs.value.scrollIntoView()
-      calendarTabs.value.updateLineStyle(false)
-    }
-  }, 250)
-  emit('open')
 }
+
+/**
+ * 弹出框打开后
+ */
+function handlePickerOpened() {
+  if (props.showTypeSwitch && tabsRef.value) {
+    tabsRef.value.scrollIntoView()
+    tabsRef.value.updateLineStyle(false)
+  }
+}
+
 // 对外暴露方法
 function close() {
   pickerShow.value = false
-  setTimeout(() => {
-    calendarValue.value = deepClone(lastCalendarValue.value)
-    currentTab.value = lastTab.value
-    currentType.value = lastCurrentType.value || 'date'
-    confirmBtnDisabled.value = getConfirmBtnStatus(lastCalendarValue.value)
-  }, 250)
-  emit('cancel')
 }
+
+/**
+ * 弹出框关闭时
+ */
+function handlePickerClose() {
+  emit('update:visible', false)
+  emit('close')
+}
+
+/**
+ * 弹出框关闭后
+ */
+function handlePickerClosed() {
+  calendarValue.value = deepClone(lastCalendarValue.value)
+  currentTab.value = lastTab.value
+  currentType.value = lastCurrentType.value || 'date'
+  scrollIntoView()
+}
+
 function handleTypeChange({ index }: { index: number }) {
-  const tabs = ['date', 'week', 'month']
-  const rangeTabs = ['daterange', 'weekrange', 'monthrange']
+  const tabs: CalendarType[] = ['date', 'week', 'month']
+  const rangeTabs: CalendarType[] = ['daterange', 'weekrange', 'monthrange']
   const type = props.type.indexOf('range') > -1 ? rangeTabs[index] : tabs[index]
   currentTab.value = index
-  currentType.value = type as CalendarType
+  currentType.value = type
 }
+
 function getConfirmBtnStatus(value: number | number[] | null) {
-  let confirmBtnDisabled = false
+  let disabled = false
   // 范围选择未选择满，或者多日期选择未选择日期，按钮置灰不可点击
   if (
     (props.type.indexOf('range') > -1 && (!isArray(value) || !value[0] || !value[1] || !value)) ||
     (props.type === 'dates' && (!isArray(value) || value.length === 0 || !value)) ||
     !value
   ) {
-    confirmBtnDisabled = true
+    disabled = true
   }
 
-  return confirmBtnDisabled
+  return disabled
 }
+
 function handleChange({ value }: { value: number | number[] | null }) {
   calendarValue.value = deepClone(value)
-  confirmBtnDisabled.value = getConfirmBtnStatus(value)
-
   emit('change', {
     value
   })
@@ -265,6 +293,7 @@ function handleChange({ value }: { value: number | number[] | null }) {
     handleConfirm()
   }
 }
+
 function handleConfirm() {
   if (props.beforeConfirm) {
     props.beforeConfirm({
@@ -280,10 +309,13 @@ function handleConfirm() {
 function onConfirm() {
   pickerShow.value = false
   lastCurrentType.value = currentType.value
+  lastCalendarValue.value = deepClone(calendarValue.value)
+  lastTab.value = currentTab.value
   emit('update:modelValue', calendarValue.value)
   emit('confirm', {
     value: calendarValue.value
   })
+  emit('update:visible', false)
 }
 
 function handleShortcutClick(index: number) {
@@ -294,9 +326,7 @@ function handleShortcutClick(index: number) {
         index
       })
     )
-    confirmBtnDisabled.value = getConfirmBtnStatus(calendarValue.value)
   }
-
   if (!props.showConfirm) {
     handleConfirm()
   }
diff --git a/src/uni_modules/wot-design-uni/components/wd-col-picker/types.ts b/src/uni_modules/wot-design-uni/components/wd-col-picker/types.ts
index 47810097..e4d81262 100644
--- a/src/uni_modules/wot-design-uni/components/wd-col-picker/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-col-picker/types.ts
@@ -66,15 +66,7 @@ export const colPickerProps = {
   /**
    * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
    */
-  safeAreaInsetBottom: makeBooleanProp(true),
-  /**
-   * 底部条宽度，单位像素
-   */
-  lineWidth: numericProp,
-  /**
-   * 底部条高度，单位像素
-   */
-  lineHeight: numericProp
+  safeAreaInsetBottom: makeBooleanProp(true)
 }
 
 export type ColPickerProps = ExtractPropTypes<typeof colPickerProps>
@@ -87,7 +79,6 @@ export type ColPickerColumnChangeOption = {
   finish: (isOk?: boolean) => void
 }
 export type ColPickerColumnChange = (option: ColPickerColumnChangeOption) => void
-export type ColPickerDisplayFormat = (selectedItems: ColPickerOption[]) => string
 export type ColPickerBeforeConfirm = (value: (string | number)[], selectedItems: ColPickerOption[], resolve: (isPass: boolean) => void) => void
 
 export type ColPickerExpose = {
diff --git a/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue b/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
index 718f12d1..44acb5f1 100644
--- a/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
@@ -5,14 +5,14 @@
       :duration="250"
       :title="title || translate('title')"
       :close-on-click-modal="closeOnClickModal"
-      :hideWhenClose="false"
+      :hide-when-close="false"
       :z-index="zIndex"
       :safe-area-inset-bottom="safeAreaInsetBottom"
       @opened="handlePickerOpened"
       @close="handlePickerClose"
       @closed="handlePickerClosed"
     >
-      <wd-tabs ref="tabs" v-model="currentCol" :animated="animated" slidable="always">
+      <wd-tabs ref="tabsRef" v-model="currentCol" :animated="animated" slidable="always">
         <wd-tab v-for="(col, colIndex) in innerColumns" :key="colIndex" :title="`${currentColumn[colIndex] || translate('select')}`" :name="colIndex">
           <view class="wd-col-picker__list-container">
             <view class="wd-col-picker__list">
@@ -62,7 +62,7 @@ import { colPickerProps, type ColPickerExpose, type ColPickerOption } from './ty
 import type { TabsInstance } from '../wd-tabs/types'
 
 const { translate } = useTranslate('col-picker')
-const tabs = ref<TabsInstance>()
+const tabsRef = ref<TabsInstance>()
 
 const props = defineProps(colPickerProps)
 const emit = defineEmits(['close', 'update:modelValue', 'update:visible', 'confirm'])
@@ -70,7 +70,6 @@ const innerValue = ref(props.modelValue) // 当前选择值
 const innerColumns = ref<ColPickerOption[][]>(props.columns) // 全部列数据
 const currentColumn = ref<ColPickerOption[]>([]) // 当前展示列数据
 const animated = ref<boolean>(false) // 是否开启切换动画 弹窗打开后开启
-
 const pickerShow = ref<boolean>(false)
 const currentCol = ref<number>(0)
 const loading = ref<boolean>(false)
@@ -134,8 +133,8 @@ function updateInnerValue() {
  * 弹出框打开后
  */
 function handlePickerOpened() {
-  if (isDef(tabs.value)) {
-    tabs.value?.updateLineStyle(false)
+  if (isDef(tabsRef.value)) {
+    tabsRef.value?.updateLineStyle(false)
     animated.value = true
   }
 }
@@ -153,17 +152,15 @@ function handlePickerClose() {
  */
 function handlePickerClosed() {
   animated.value = false
-  setTimeout(() => {
-    innerColumns.value = lastSelectList.value.slice(0)
-    innerValue.value = lastPickerColSelected.value.slice(0)
-    currentColumn.value = lastPickerColSelected.value.map((item, colIndex) => {
-      return getSelectedItem(item, colIndex, lastSelectList.value)[props.labelKey]
-    })
-    currentCol.value = lastSelectList.value.length - 1
-    if (isDef(tabs.value)) {
-      tabs.value.updateLineStyle(false)
-    }
-  }, 250)
+  innerColumns.value = lastSelectList.value.slice(0)
+  innerValue.value = lastPickerColSelected.value.slice(0)
+  currentColumn.value = lastPickerColSelected.value.map((item, colIndex) => {
+    return getSelectedItem(item, colIndex, lastSelectList.value)[props.labelKey]
+  })
+  currentCol.value = lastSelectList.value.length - 1
+  if (isDef(tabsRef.value)) {
+    tabsRef.value.updateLineStyle(false)
+  }
 }
 
 function getSelectedItem(value: string | number, colIndex: number, innerColumns: ColPickerOption[][]) {
diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts
index eb93e4ed..a2c86e60 100644
--- a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts
@@ -90,10 +90,6 @@ export const datetimePickerProps = {
    * 在区域选择模式下，自定义展示tab标签文案的格式化函数，返回一个字符串
    */
   displayFormatTabLabel: Function as PropType<DatetimePickerDisplayFormatTabLabel>,
-  /**
-   * 默认日期，类型保持与 value 一致，打开面板时面板自动选到默认日期
-   */
-  defaultValue: [String, Number, Array] as PropType<string | number | Array<string | number>>,
   /**
    * 弹窗层级
    */
@@ -105,7 +101,11 @@ export const datetimePickerProps = {
   /**
    * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
    */
-  immediateChange: makeBooleanProp(false)
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 是否显示
+   */
+  visible: makeBooleanProp(false)
 }
 
 export type DatetimePickerDisplayFormat = (items: Record<string, any>[]) => string
diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
index 6dea4c5d..5ee248be 100644
--- a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
@@ -1,6 +1,5 @@
 <template>
   <view :class="`wd-picker  ${customClass}`" :style="customStyle">
-    <!--弹出层，picker-view 在隐藏时修改值，会触发多次change事件，从而导致所有列选中第一项，因此picker在关闭时不隐藏 -->
     <wd-popup
       v-model="popupShow"
       position="bottom"
@@ -8,24 +7,20 @@
       :close-on-click-modal="closeOnClickModal"
       :safe-area-inset-bottom="safeAreaInsetBottom"
       :z-index="zIndex"
-      @close="onCancel"
+      @leave="handlePickerClose"
+      @after-leave="handlePickerClosed"
       custom-class="wd-picker__popup"
     >
       <view class="wd-picker__wraper">
-        <!--toolBar-->
         <view class="wd-picker__toolbar" @touchmove="noop">
-          <!--取消按钮-->
-          <view class="wd-picker__action wd-picker__action--cancel" @click="onCancel">
+          <view class="wd-picker__action wd-picker__action--cancel" @click="close">
             {{ cancelButtonText || translate('cancel') }}
           </view>
-          <!--标题-->
           <view v-if="title" class="wd-picker__title">{{ title }}</view>
-          <!--确定按钮-->
           <view :class="`wd-picker__action ${loading || isLoading ? 'is-loading' : ''}`" @click="onConfirm">
             {{ confirmButtonText || translate('confirm') }}
           </view>
         </view>
-        <!-- 区域选择tab展示 -->
         <view v-if="region" class="wd-picker__region-tabs">
           <view :class="`wd-picker__region ${showStart ? 'is-active' : ''} `" @click="tabChange">
             <view>{{ translate('start') }}</view>
@@ -36,7 +31,6 @@
             <view class="wd-picker__region-time">{{ showTabLabel[1] }}</view>
           </view>
         </view>
-        <!--datetimePickerView-->
         <view :class="showStart ? 'wd-picker__show' : 'wd-picker__hidden'">
           <wd-datetime-picker-view
             :custom-class="customViewClass"
@@ -123,7 +117,7 @@ import { datetimePickerProps, type DatetimePickerExpose } from './types'
 import { dayjs } from '../common/dayjs'
 
 const props = defineProps(datetimePickerProps)
-const emit = defineEmits(['change', 'open', 'toggle', 'cancel', 'confirm', 'update:modelValue'])
+const emit = defineEmits(['change', 'open', 'toggle', 'cancel', 'confirm', 'update:modelValue', 'update:visible', 'close'])
 
 const { translate } = useTranslate('datetime-picker')
 
@@ -166,6 +160,18 @@ watch(
   }
 )
 
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (newValue) {
+      open()
+    } else {
+      close()
+    }
+  },
+  { deep: true, immediate: true }
+)
+
 watch(
   () => props.displayFormat,
   (fn) => {
@@ -227,22 +233,6 @@ watch(
   }
 )
 
-watch(
-  () => props.defaultValue,
-  (val) => {
-    if (isArray(val) || region.value) {
-      innerValue.value = deepClone(getDefaultInnerValue(true))
-      endInnerValue.value = deepClone(getDefaultInnerValue(true, true))
-    } else {
-      innerValue.value = deepClone(getDefaultInnerValue())
-    }
-  },
-  {
-    deep: true,
-    immediate: true
-  }
-)
-
 /**
  * @description 自定义列项筛选规则，对每列单项进行禁用校验，最终返回传入PickerView的columns数组
  * @param {Component} picker datetimePickerView对象
@@ -317,34 +307,20 @@ function getSelects(picker: 'before' | 'after') {
 function noop() {}
 
 function getDefaultInnerValue(isRegion?: boolean, isEnd?: boolean): string | number {
-  const { modelValue: value, defaultValue, maxDate, minDate, type } = props
+  const { modelValue: value, maxDate, minDate, type } = props
   if (isRegion) {
     const index = isEnd ? 1 : 0
     const targetValue = isArray(value) ? (value[index] as string) : ''
-    const targetDefault = isArray(defaultValue) ? (defaultValue[index] as string) : ''
     const maxValue = type === 'time' ? dayjs(maxDate).format('HH:mm') : maxDate
     const minValue = type === 'time' ? dayjs(minDate).format('HH:mm') : minDate
-    return targetValue || targetDefault || (isEnd ? maxValue : minValue)
+    return targetValue || (isEnd ? maxValue : minValue)
   } else {
-    return isDef(value || defaultValue) ? (value as string) || (defaultValue as string) : ''
+    return isDef(value) ? (value as string) : ''
   }
 }
 
-// 对外暴露接口，打开弹框
+// 打开弹框
 function open() {
-  showPopup()
-}
-
-// 对外暴露接口，关闭弹框
-function close() {
-  onCancel()
-}
-
-/**
- * @description 展示popup，小程序有个bug，在picker-view弹出时设置value，会触发change事件，而且会将picker-view的value多次触发change重置为第一项
- */
-function showPopup() {
-  emit('open')
   if (region.value) {
     popupShow.value = true
     showStart.value = true
@@ -357,6 +333,34 @@ function showPopup() {
   setShowValue(true, false, true)
 }
 
+// 关闭弹框
+function close() {
+  popupShow.value = false
+}
+
+/**
+ * 弹出框关闭后
+ */
+function handlePickerClosed() {
+  let timer = setTimeout(() => {
+    clearTimeout(timer)
+    if (region.value) {
+      innerValue.value = deepClone(getDefaultInnerValue(true))
+      endInnerValue.value = deepClone(getDefaultInnerValue(true, true))
+    } else {
+      innerValue.value = deepClone(getDefaultInnerValue())
+    }
+  }, 300)
+}
+
+/**
+ * 弹出框关闭时
+ */
+function handlePickerClose() {
+  emit('update:visible', false)
+  emit('close')
+}
+
 /**
  * @description 区域选择时tab标签切换时触发
  */
@@ -401,23 +405,6 @@ function onChangeEnd({ value }: { value: number | string }) {
   datetimePickerView1.value && datetimePickerView1.value.setColumns(datetimePickerView1.value.updateColumns())
 }
 
-/**
- * @description 点击取消按钮触发。关闭popup，触发cancel事件。
- */
-function onCancel() {
-  popupShow.value = false
-  setTimeout(() => {
-    if (region.value) {
-      innerValue.value = deepClone(getDefaultInnerValue(true))
-      endInnerValue.value = deepClone(getDefaultInnerValue(true, true))
-    } else {
-      innerValue.value = deepClone(getDefaultInnerValue())
-    }
-  }, 200)
-
-  emit('cancel')
-}
-
 /** picker触发confirm事件，同步触发confirm事件 */
 function onConfirm() {
   if (props.loading || isLoading.value) return
diff --git a/src/uni_modules/wot-design-uni/components/wd-picker/types.ts b/src/uni_modules/wot-design-uni/components/wd-picker/types.ts
index 2ac36b16..ecd17f3f 100644
--- a/src/uni_modules/wot-design-uni/components/wd-picker/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-picker/types.ts
@@ -1,7 +1,6 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 import type { ColumnItem, PickerViewColumnChange } from '../wd-picker-view/types'
-import type { FormItemRule } from '../wd-form/types'
 
 export const pickerProps = {
   ...baseProps,
@@ -72,10 +71,6 @@ export const pickerProps = {
    * 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 setColumnData 方法修改其他列的数据源。
    */
   columnChange: Function as PropType<PickerViewColumnChange>,
-  /**
-   * 自定义展示文案的格式化函数，返回一个字符串
-   */
-  displayFormat: Function as PropType<PickerDisplayFormat>,
   /**
    * 自定义层级
    */
@@ -83,13 +78,15 @@ export const pickerProps = {
   /**
    * 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
    */
-  immediateChange: makeBooleanProp(false)
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 是否显示
+   */
+  visible: makeBooleanProp(false)
 }
 
 export type PickerProps = ExtractPropTypes<typeof pickerProps>
 
-export type PickerDisplayFormat = (item: ColumnItem | ColumnItem[], vl: { valueKey: string; labelKey: string }) => string
-
 export type PickerBeforeConfirm = (
   value: string | number | boolean | string[] | number[] | boolean[],
   resolve: (isPass: boolean) => void,
diff --git a/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue b/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue
index 8d872078..d770170f 100644
--- a/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue
@@ -7,12 +7,13 @@
       :close-on-click-modal="closeOnClickModal"
       :z-index="zIndex"
       :safe-area-inset-bottom="safeAreaInsetBottom"
-      @close="onCancel"
+      @leave="handlePickerClose"
+      @after-leave="handlePickerClosed"
       custom-class="wd-picker__popup"
     >
       <view class="wd-picker__wraper">
         <view class="wd-picker__toolbar" @touchmove="noop">
-          <view class="wd-picker__action wd-picker__action--cancel" @click="onCancel">
+          <view class="wd-picker__action wd-picker__action--cancel" @click="close">
             {{ cancelButtonText || translate('cancel') }}
           </view>
           <view v-if="title" class="wd-picker__title">{{ title }}</view>
@@ -21,7 +22,7 @@
           </view>
         </view>
         <wd-picker-view
-          ref="pickerViewWd"
+          ref="pickerViewRef"
           :custom-class="customViewClass"
           v-model="pickerValue"
           :columns="displayColumns"
@@ -55,17 +56,17 @@ export default {
 <script lang="ts" setup>
 import wdPopup from '../wd-popup/wd-popup.vue'
 import wdPickerView from '../wd-picker-view/wd-picker-view.vue'
-import { getCurrentInstance, onBeforeMount, ref, watch, computed, onMounted, nextTick } from 'vue'
-import { deepClone, getType, isArray, isDef, isFunction } from '../common/util'
-import { type ColumnItem, formatArray, type PickerViewInstance } from '../wd-picker-view/types'
+import { getCurrentInstance, onBeforeMount, ref, watch, computed } from 'vue'
+import { deepClone, isDef, isFunction } from '../common/util'
+import { type ColumnItem, type PickerViewInstance } from '../wd-picker-view/types'
 import { useTranslate } from '../composables/useTranslate'
 import { pickerProps, type PickerExpose } from './types'
 const { translate } = useTranslate('picker')
 
 const props = defineProps(pickerProps)
-const emit = defineEmits(['confirm', 'open', 'cancel', 'clear', 'update:modelValue'])
+const emit = defineEmits(['confirm', 'open', 'cancel', 'update:modelValue', 'update:visible', 'close'])
 
-const pickerViewWd = ref<PickerViewInstance | null>(null)
+const pickerViewRef = ref<PickerViewInstance | null>(null)
 
 const innerLoading = ref<boolean>(false) // 内部控制是否loading
 
@@ -82,28 +83,10 @@ const isLoading = computed(() => {
   return props.loading || innerLoading.value
 })
 
-watch(
-  () => props.displayFormat,
-  (fn) => {
-    if (fn && !isFunction(fn)) {
-      console.error('The type of displayFormat must be Function')
-    }
-    if (pickerViewWd.value && pickerViewWd.value.getSelectedIndex().length !== 0) {
-      handleShowValueUpdate(props.modelValue)
-    }
-  },
-  {
-    immediate: true,
-    deep: true
-  }
-)
-
 watch(
   () => props.modelValue,
   (newValue) => {
     pickerValue.value = newValue
-    // 获取初始选中项,并展示初始选中文案
-    handleShowValueUpdate(newValue)
   },
   {
     deep: true,
@@ -111,13 +94,23 @@ watch(
   }
 )
 
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (newValue) {
+      open()
+    } else {
+      close()
+    }
+  },
+  { deep: true, immediate: true }
+)
+
 watch(
   () => props.columns,
   (newValue) => {
     displayColumns.value = deepClone(newValue)
     resetColumns.value = deepClone(newValue)
-    // 获取初始选中项,并展示初始选中文案
-    handleShowValueUpdate(props.modelValue)
   },
   {
     deep: true,
@@ -140,106 +133,41 @@ watch(
 
 const { proxy } = getCurrentInstance() as any
 
-onMounted(() => {
-  handleShowValueUpdate(props.modelValue)
-})
-
 onBeforeMount(() => {
   displayColumns.value = deepClone(props.columns)
   resetColumns.value = deepClone(props.columns)
 })
 
-/**
- * 值变更时更新显示内容
- * @param value
- */
-function handleShowValueUpdate(value: string | number | Array<string | number>) {
-  // 获取初始选中项,并展示初始选中文案
-  if ((isArray(value) && value.length > 0) || (isDef(value) && !isArray(value) && value !== '')) {
-    if (pickerViewWd.value) {
-      nextTick(() => {
-        // setShowValue(pickerViewWd.value!.getSelects())
-      })
-    } else {
-      // setShowValue(getSelects(value)!)
-    }
-  } else {
-    // showValue.value = ''
-  }
-}
-
-/**
- * @description 根据传入的value，picker组件获取当前cell展示值。
- * @param {String|Number|Array<String|Number|Array<any>>}value
- */
-function getSelects(value: string | number | Array<string | number | Array<any>>) {
-  const formatColumns = formatArray(props.columns, props.valueKey, props.labelKey)
-  if (props.columns.length === 0) return
-
-  // 使其默认选中首项
-  if (value === '' || !isDef(value) || (isArray(value) && value.length === 0)) {
-    return
-  }
-  const valueType = getType(value)
-  const type = ['string', 'number', 'boolean', 'array']
-  if (type.indexOf(valueType) === -1) return []
-  /**
-   * 1.单key转为Array<key>
-   * 2.根据formatColumns的长度截取Array<String>，保证下面的遍历不溢出
-   * 3.根据每列的key值找到选项中value为此key的下标并记录
-   */
-  value = isArray(value) ? value : [value]
-  value = value.slice(0, formatColumns.length)
-
-  if (value.length === 0) {
-    value = formatColumns.map(() => 0)
-  }
-  let selected: number[] = []
-  value.forEach((target, col) => {
-    let row = formatColumns[col].findIndex((row) => {
-      return row[props.valueKey].toString() === target.toString()
-    })
-    row = row === -1 ? 0 : row
-    selected.push(row)
-  })
-
-  const selects = selected.map((row, col) => formatColumns[col][row])
-  // 单列选择器，则返回单项
-  if (selects.length === 1) {
-    return selects[0]
-  }
-  return selects
-}
-
-// 对外暴露方法，打开弹框
+// 打开弹框
 function open() {
-  showPopup()
-}
-// 对外暴露方法，关闭弹框
-function close() {
-  onCancel()
-}
-/**
- * 展示popup
- */
-function showPopup() {
   emit('open')
   popupShow.value = true
   pickerValue.value = props.modelValue
   displayColumns.value = resetColumns.value
 }
+// 关闭弹框
+function close() {
+  popupShow.value = false
+}
 
 /**
- * 点击取消按钮触发。关闭popup，触发cancel事件。
+ * 弹出框关闭后
  */
-function onCancel() {
-  popupShow.value = false
-  emit('cancel')
-  let timmer = setTimeout(() => {
-    clearTimeout(timmer)
-    isDef(pickerViewWd.value) && pickerViewWd.value.resetColumns(resetColumns.value)
+function handlePickerClosed() {
+  let timer = setTimeout(() => {
+    clearTimeout(timer)
+    isDef(pickerViewRef.value) && pickerViewRef.value.resetColumns(resetColumns.value)
   }, 300)
 }
+
+/**
+ * 弹出框关闭时
+ */
+function handlePickerClose() {
+  emit('update:visible', false)
+  emit('close')
+}
+
 /**
  * 点击确定按钮触发。展示选中值，触发cancel事件。
  */
@@ -271,15 +199,13 @@ function handleConfirm() {
     return
   }
 
-  const selects = pickerViewWd.value!.getSelects()
-  const values = pickerViewWd.value!.getValues()
+  const selects = pickerViewRef.value!.getSelects()
+  const values = pickerViewRef.value!.getValues()
   // 获取当前的数据源，并设置给 resetColumns，用于取消时可以回退数据源
-  const columns = pickerViewWd.value!.getColumnsData()
+  const columns = pickerViewRef.value!.getColumnsData()
   popupShow.value = false
   resetColumns.value = deepClone(columns)
   emit('update:modelValue', values)
-
-  // setShowValue(selects)
   emit('confirm', {
     value: values,
     selectedItems: selects