diff --git a/packages/nutui-taro-demo/src/dentry/pages/datepicker/basic.vue b/packages/nutui-taro-demo/src/dentry/pages/datepicker/basic.vue
new file mode 100644
index 0000000000..1efda36846
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/datepicker/basic.vue
@@ -0,0 +1,18 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 0, 1);
+const max = new Date(2025, 10, 1);
+const val = ref(new Date(2022, 4, 10));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/datepicker/date-time.vue b/packages/nutui-taro-demo/src/dentry/pages/datepicker/date-time.vue
new file mode 100644
index 0000000000..ce6416dc79
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/datepicker/date-time.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="datetime"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 0, 1, 10, 40);
+const max = new Date(2025, 10, 1, 23, 29);
+const val = ref(new Date(2022, 4, 10));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/datepicker/filter.vue b/packages/nutui-taro-demo/src/dentry/pages/datepicker/filter.vue
new file mode 100644
index 0000000000..b6ec727e63
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/datepicker/filter.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="datetime"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    :filter="filter"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 0, 1, 10, 40);
+const max = new Date(2025, 10, 1, 23, 29);
+const val = ref(new Date(2022, 4, 10));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+const filter = (type, options) => {
+  if (type === 'hour') {
+    return options.filter((option) => Number(option.value) % 6 === 0);
+  }
+  return options;
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/datepicker/format.vue b/packages/nutui-taro-demo/src/dentry/pages/datepicker/format.vue
new file mode 100644
index 0000000000..481243ce33
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/datepicker/format.vue
@@ -0,0 +1,42 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="datetime"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    :formatter="formatter"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 0, 1, 10, 40);
+const max = new Date(2025, 10, 1, 23, 29);
+const val = ref(new Date(2022, 4, 10));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+const formatter = (type, option) => {
+  switch (type) {
+    case 'year':
+      option.text += '年';
+      break;
+    case 'month':
+      option.text += '月';
+      break;
+    case 'day':
+      option.text += '日';
+      break;
+    case 'hour':
+      option.text += '时';
+      break;
+    case 'minute':
+      option.text += '分';
+      break;
+    default:
+      option.text += '';
+  }
+  return option;
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/datepicker/hour-minute.vue b/packages/nutui-taro-demo/src/dentry/pages/datepicker/hour-minute.vue
new file mode 100644
index 0000000000..4f7d1ad190
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/datepicker/hour-minute.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="hour-minute"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 1, 1, 10, 40);
+const max = new Date(2020, 1, 1, 23, 29);
+const val = ref(new Date(2020, 1, 1, 15, 30));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/datepicker/index.vue b/packages/nutui-taro-demo/src/dentry/pages/datepicker/index.vue
index 3176ca3326..80ce8c4414 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/datepicker/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/datepicker/index.vue
@@ -1,194 +1,74 @@
 <template>
   <Demo>
-    <h2>选择年月日</h2>
-    <!-- 选择年月日 -->
-    <nut-date-picker
-      v-model="state.currentDate"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :three-dimensional="false"
-      :is-show-chinese="true"
-      @confirm="confirm"
-    ></nut-date-picker>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>配合 Popup 使用</h2>
-    <nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>
-    <nut-popup v-model:visible="show" position="bottom">
-      <nut-date-picker
-        v-model="state.currentDate"
-        :min-date="minDate"
-        :max-date="maxDate"
-        :is-show-chinese="true"
-        :three-dimensional="false"
-        @confirm="popupConfirm"
-        @cancel="show = false"
-      >
-        <nut-button block type="primary" @click="alwaysFun">永远有效</nut-button>
-      </nut-date-picker>
-    </nut-popup>
+    <h2>{{ t('pop') }}</h2>
+    <Pop />
 
-    <h2>选择月日</h2>
-    <!-- 选择月日 -->
-    <nut-date-picker
-      v-model="state.currentDate2"
-      type="month-day"
-      title="日期选择"
-      :min-date="new Date(2022, 0, 1)"
-      :max-date="new Date(2022, 7, 1)"
-      @confirm="confirm"
-    ></nut-date-picker>
-    <h2>选择年月日时分</h2>
+    <h2>{{ t('yearMonth') }}</h2>
+    <YearMonth />
 
-    <!-- 选择年月日时分 -->
-    <nut-date-picker
-      v-model="state.currentDate3"
-      title="日期时间选择"
-      type="datetime"
-      :min-date="minDate"
-      :max-date="maxDate"
-      @confirm="confirm"
-    ></nut-date-picker>
-    <h2>选择时分秒</h2>
-    <!-- 选择时分秒 -->
-    <nut-date-picker
-      v-model="state.currentDate4"
-      title="时间选择"
-      type="time"
-      :min-date="minDate"
-      :max-date="maxDate"
-      @confirm="confirm"
-    ></nut-date-picker>
-    <h2>选择时分</h2>
-    <!-- 选择时分 -->
-    <nut-date-picker
-      v-model="state.currentDate4"
-      title="时间选择"
-      type="hour-minute"
-      :min-date="minDate"
-      :max-date="maxDate"
-      @confirm="confirm"
-    ></nut-date-picker>
-    <h2>格式化选项</h2>
-    <!-- 格式化选项 -->
-    <nut-date-picker
-      v-model="state.currentDate5"
-      title="日期选择"
-      type="datetime"
-      :min-date="new Date(2022, 0, 1)"
-      :max-date="new Date(2022, 10, 1)"
-      :formatter="formatter"
-      @confirm="confirm"
-    ></nut-date-picker>
-    <h2>分钟数递增步长设置</h2>
-    <!-- 分钟数递增步长设置 -->
-    <nut-date-picker
-      v-model="state.currentDate6"
-      title="时间选择"
-      type="time"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :minute-step="5"
-      @confirm="confirm"
-    ></nut-date-picker>
-    <h2>过滤选项</h2>
+    <h2>{{ t('monthDay') }}</h2>
+    <MonthDay />
 
-    <!-- 过滤选项 -->
-    <nut-date-picker
-      v-model="state.currentDate7"
-      title="时间选择"
-      type="datehour"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :filter="filter"
-      :formatter="formatter1"
-      @confirm="confirm"
-    ></nut-date-picker>
+    <h2>{{ t('dateTime') }}</h2>
+    <DateTime />
 
-    <nut-toast v-model:visible="showToast" :msg="msg" type="text" />
-  </Demo>
-</template>
+    <h2>{{ t('time') }}</h2>
+    <Time />
 
-<script setup lang="ts">
-import { ref, reactive } from 'vue';
+    <h2>{{ t('hourMinute') }}</h2>
+    <HourMinute />
 
-const show = ref(false);
-const popupDesc = ref();
-const msg = ref();
-const showToast = ref(false);
+    <h2>{{ t('format') }}</h2>
+    <Format />
 
-const state = reactive({
-  currentDate: new Date(2022, 4, 10, 10, 10),
-  currentDate2: new Date(2022, 4, 10, 10, 10),
-  currentDate3: new Date(2022, 4, 10, 10, 10),
-  currentDate4: new Date(2022, 4, 10, 10, 10),
-  currentDate5: new Date(2022, 4, 10, 10, 10),
-  currentDate6: new Date(2022, 4, 10, 10, 10),
-  currentDate7: new Date(2022, 4, 10, 0, 0)
-});
+    <h2>{{ t('step') }}</h2>
+    <Step />
 
-const formatter = (type: string, option) => {
-  switch (type) {
-    case 'year':
-      option.text += '';
-      break;
-    case 'month':
-      option.text += '月';
-      break;
-    case 'day':
-      option.text += '日';
-      break;
-    case 'hour':
-      option.text += '时';
-      break;
-    case 'minute':
-      option.text += '分';
-      break;
-    default:
-      option.text += '';
-  }
-  return option;
-};
+    <h2>{{ t('filter') }}</h2>
+    <Filter />
+  </Demo>
+</template>
 
-const formatter1 = (type: string, option) => {
-  switch (type) {
-    case 'year':
-      option.text += '年';
-      break;
-    case 'month':
-      option.text += '月';
-      break;
-    case 'day':
-      option.text += '日';
-      break;
-    case 'hour':
-      option.text += '时';
-      break;
-    default:
-      option.text += '';
-  }
-  return option;
-};
+<script setup lang="ts">
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Pop from './pop.vue';
+import YearMonth from './year-month.vue';
+import MonthDay from './month-day.vue';
+import DateTime from './date-time.vue';
+import Time from './time.vue';
+import HourMinute from './hour-minute.vue';
+import Format from './format.vue';
+import Step from './step.vue';
+import Filter from './filter.vue';
 
-const filter = (type: string, options) => {
-  if (type == 'hour') {
-    return options.filter((option) => Number(option.value) % 6 === 0);
+const t = useTranslate({
+  'zh-CN': {
+    basic: '选择日期',
+    pop: '搭配 Popup 使用',
+    yearMonth: '选择年月',
+    monthDay: '选择月日',
+    dateTime: '选择年月日时分',
+    time: '选择时分秒',
+    hourMinute: '选择时分',
+    format: '格式化选项',
+    step: '分钟数递增步长设置',
+    filter: '过滤选项'
+  },
+  'en-US': {
+    basic: 'Choose Date',
+    pop: 'With Popup',
+    yearMonth: 'Choose Year-Month',
+    monthDay: 'Choose Month-Day',
+    dateTime: 'Choose DateTime',
+    time: 'Choose Time',
+    hourMinute: 'Choose Hour-Minute',
+    format: 'Option Formatter',
+    step: 'Option Steps',
+    filter: 'Option Filter'
   }
-  return options;
-};
-
-const confirm = ({ selectedOptions }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
-  showToast.value = true;
-  msg.value = selectedOptions.map((val: any) => val.text).join('-');
-};
-const popupConfirm = ({ selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
-  popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
-  show.value = false;
-};
-const alwaysFun = () => {
-  popupDesc.value = '永远有效';
-  show.value = false;
-};
-const minDate = new Date(2020, 0, 1);
-const maxDate = new Date(2025, 10, 1);
+});
 </script>
-<style lang="scss" scoped></style>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/datepicker/month-day.vue b/packages/nutui-taro-demo/src/dentry/pages/datepicker/month-day.vue
new file mode 100644
index 0000000000..c820985052
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/datepicker/month-day.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="month-day"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 0, 20);
+const max = new Date(2020, 9, 10);
+const val = ref(new Date(2020, 2, 28));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/datepicker/pop.vue b/packages/nutui-taro-demo/src/dentry/pages/datepicker/pop.vue
new file mode 100644
index 0000000000..5c4151f855
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/datepicker/pop.vue
@@ -0,0 +1,23 @@
+<template>
+  <nut-button @click="show = true">open</nut-button>
+  <nut-popup v-model:visible="show" position="bottom">
+    <nut-date-picker
+      v-model="val"
+      :min-date="min"
+      :max-date="max"
+      :three-dimensional="false"
+      @confirm="confirm"
+    ></nut-date-picker>
+  </nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const min = new Date(2020, 0, 1);
+const max = new Date(2025, 10, 1);
+const val = ref(new Date(2022, 4, 10));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+  show.value = false;
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/datepicker/step.vue b/packages/nutui-taro-demo/src/dentry/pages/datepicker/step.vue
new file mode 100644
index 0000000000..4ca58c7fe5
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/datepicker/step.vue
@@ -0,0 +1,20 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="time"
+    :min-date="min"
+    :max-date="max"
+    :minute-step="5"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 1, 1, 10, 40, 0);
+const max = new Date(2020, 1, 1, 23, 29, 59);
+const val = ref(new Date(2020, 1, 1, 15, 30, 30));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/datepicker/time.vue b/packages/nutui-taro-demo/src/dentry/pages/datepicker/time.vue
new file mode 100644
index 0000000000..0e0702c682
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/datepicker/time.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="time"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 1, 1, 10, 40, 0);
+const max = new Date(2020, 1, 1, 23, 29, 59);
+const val = ref(new Date(2020, 1, 1, 15, 30, 30));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/datepicker/year-month.vue b/packages/nutui-taro-demo/src/dentry/pages/datepicker/year-month.vue
new file mode 100644
index 0000000000..613bec96d5
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/datepicker/year-month.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="year-month"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2012, 0);
+const max = new Date(2024, 10);
+const val = ref(new Date(2020, 2));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/src/packages/__VUE/datepicker/demo.vue b/src/packages/__VUE/datepicker/demo.vue
deleted file mode 100644
index 1494e3c72e..0000000000
--- a/src/packages/__VUE/datepicker/demo.vue
+++ /dev/null
@@ -1,264 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>{{ translate('basic') }}</h2>
-    <!-- 选择年月日 -->
-    <nut-date-picker
-      v-model="state.currentDate"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :is-show-chinese="true"
-      :three-dimensional="false"
-      @confirm="confirm"
-    ></nut-date-picker>
-
-    <h2>{{ translate('popupDesc') }}</h2>
-    <nut-cell :title="translate('basic')" :desc="popupDesc" @click="show = true"></nut-cell>
-    <nut-popup v-model:visible="show" position="bottom">
-      <nut-date-picker
-        v-model="state.currentDate"
-        :min-date="minDate"
-        :max-date="maxDate"
-        :is-show-chinese="true"
-        :three-dimensional="false"
-        @confirm="popupConfirm"
-      >
-        <nut-button block type="primary" @click="alwaysFun">{{ translate('forever') }}</nut-button>
-      </nut-date-picker>
-    </nut-popup>
-    <h2>{{ translate('mmdd') }}</h2>
-    <!-- 选择月日 -->
-    <nut-date-picker
-      v-model="state.currentDate2"
-      type="month-day"
-      :title="translate('basic')"
-      :min-date="new Date(2022, 0, 1)"
-      :max-date="new Date(2022, 7, 1)"
-      @confirm="confirm5"
-    ></nut-date-picker>
-    <h2>{{ translate('showAll') }}</h2>
-
-    <!-- 选择年月日时分 -->
-    <nut-date-picker
-      v-model="state.currentDate3"
-      :title="translate('chooseDate')"
-      type="datetime"
-      :min-date="minDate"
-      :max-date="maxDate"
-      @confirm="confirm2"
-    ></nut-date-picker>
-    <h2>{{ translate('time') }}</h2>
-
-    <!-- 选择时分秒 -->
-    <nut-date-picker
-      v-model="state.currentDate4"
-      :title="translate('chooseTime')"
-      type="time"
-      :min-date="minDate"
-      :max-date="maxDate"
-      @confirm="confirm3"
-    ></nut-date-picker>
-    <h2>{{ translate('hourMinute') }}</h2>
-
-    <!-- 选择时分 -->
-    <nut-date-picker
-      v-model="state.currentDate4"
-      :title="translate('chooseTime')"
-      type="hour-minute"
-      :min-date="minDate"
-      :max-date="maxDate"
-      @confirm="confirm3"
-    ></nut-date-picker>
-    <h2>{{ translate('format') }}</h2>
-
-    <!-- 格式化选项 -->
-    <nut-date-picker
-      v-model="state.currentDate5"
-      :title="translate('chooseTime')"
-      type="datetime"
-      :min-date="new Date(2022, 0, 1)"
-      :max-date="new Date(2022, 10, 1)"
-      :formatter="formatter"
-      @confirm="confirm4"
-    ></nut-date-picker>
-    <h2>{{ translate('stepMins') }}</h2>
-
-    <!-- 分钟数递增步长设置 -->
-    <nut-date-picker
-      v-model="state.currentDate6"
-      :title="translate('chooseTime')"
-      type="time"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :minute-step="5"
-      @confirm="confirm3"
-    ></nut-date-picker>
-    <h2>{{ translate('filter') }}</h2>
-    <!-- 过滤选项 -->
-    <nut-date-picker
-      v-model="state.currentDate7"
-      :title="translate('chooseTime')"
-      type="datehour"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :filter="filter"
-      :formatter="formatter1"
-      @confirm="confirm"
-    ></nut-date-picker>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { showToast } from '@/packages/nutui.vue';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '选择日期',
-    showChinese: '显示中文',
-    mmdd: '选择月日',
-    showAll: '选择年月日时分',
-    time: '选择时分秒',
-    hourMinute: '选择时分',
-    format: '格式化选项',
-    stepMins: '分钟数递增步长设置',
-    filter: '过滤选项',
-    setStartEnd: '限制开始结束时间',
-    chooseDate: '日期时间选择',
-    chooseTime: '时间选择',
-    forever: '永远有效',
-    year: '年',
-    month: '月',
-    day: '日',
-    hour: '时',
-    min: '分',
-    seconds: '秒',
-    popupDesc: '搭配 Popup 使用'
-  },
-  'en-US': {
-    basic: 'Choose Date',
-    showChinese: 'Show Chinese',
-    mmdd: 'Choose Month-Day',
-    showAll: 'Choose DateTime',
-    time: 'Choose Time',
-    hourMinute: 'Choose Hour-Minute',
-    format: 'Option Formatter',
-    stepMins: 'Option Steps',
-    filter: 'Option Filter',
-    setStartEnd: 'Limit the start and end time',
-    chooseDate: 'Choose Time',
-    chooseTime: 'Choose Time',
-    forever: 'Forever',
-    year: 'Year',
-    month: 'Month',
-    day: 'Day',
-    hour: 'Hour',
-    min: 'Minute',
-    seconds: 'Second',
-    popupDesc: 'With Popup'
-  }
-});
-const show = ref(false);
-const popupDesc = ref();
-
-const state = reactive({
-  currentDate: new Date(2022, 4, 10, 10, 10),
-  currentDate2: new Date(2022, 4, 10, 10, 10),
-  currentDate3: new Date(2022, 4, 10, 10, 10),
-  currentDate4: new Date(2022, 4, 10, 10, 10),
-  currentDate5: new Date(2022, 4, 10, 10, 10),
-  currentDate6: new Date(2022, 4, 10, 10, 10),
-  currentDate7: new Date(2022, 4, 10, 0, 0)
-});
-
-const formatter = (type: string, option: any) => {
-  switch (type) {
-    case 'year':
-      option.text += '';
-      break;
-    case 'month':
-      option.text += `${translate('month')}`;
-      break;
-    case 'day':
-      option.text += `${translate('day')}`;
-      break;
-    case 'hour':
-      option.text += `${translate('hour')}`;
-      break;
-    case 'minute':
-      option.text += `${translate('min')}`;
-      break;
-    default:
-      option.text += '';
-  }
-  return option;
-};
-
-const formatter1 = (type: string, option: any) => {
-  switch (type) {
-    case 'year':
-      option.text += `${translate('year')}`;
-      break;
-    case 'month':
-      option.text += `${translate('month')}`;
-      break;
-    case 'day':
-      option.text += `${translate('day')}`;
-      break;
-    case 'hour':
-      option.text += `${translate('hour')}`;
-      break;
-    default:
-      option.text += '';
-  }
-  return option;
-};
-
-const filter = (type: string, options: any) => {
-  if (type == 'hour') {
-    return options.filter((option: any) => Number(option.value) % 6 === 0);
-  }
-  return options;
-};
-
-const confirm = ({ selectedOptions }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
-  showToast.text(selectedOptions.map((val: any) => val.text).join(''));
-};
-
-const confirm2 = ({ selectedValue }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
-  const date = selectedValue.slice(0, 3).join('-');
-  const time = selectedValue.slice(3).join(':');
-  showToast.text(date + ' ' + time);
-};
-
-const confirm3 = ({ selectedValue }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
-  showToast.text(selectedValue.join(':'));
-};
-
-const confirm4 = ({ selectedOptions }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
-  const date = selectedOptions
-    .slice(1, 3)
-    .map((op: any) => op.text)
-    .join('');
-  const time = selectedOptions
-    .slice(3)
-    .map((op: any) => op.value)
-    .join(':');
-  showToast.text(selectedOptions[0].text + translate('year') + date + ' ' + time);
-};
-
-const confirm5 = ({ selectedValue }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
-  showToast.text(selectedValue.join('-'));
-};
-
-const popupConfirm = ({ selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
-  popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
-  show.value = false;
-};
-
-const alwaysFun = () => {
-  popupDesc.value = '永远有效';
-  show.value = false;
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
diff --git a/src/packages/__VUE/datepicker/demo/basic.vue b/src/packages/__VUE/datepicker/demo/basic.vue
new file mode 100644
index 0000000000..1efda36846
--- /dev/null
+++ b/src/packages/__VUE/datepicker/demo/basic.vue
@@ -0,0 +1,18 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 0, 1);
+const max = new Date(2025, 10, 1);
+const val = ref(new Date(2022, 4, 10));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/src/packages/__VUE/datepicker/demo/date-time.vue b/src/packages/__VUE/datepicker/demo/date-time.vue
new file mode 100644
index 0000000000..ce6416dc79
--- /dev/null
+++ b/src/packages/__VUE/datepicker/demo/date-time.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="datetime"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 0, 1, 10, 40);
+const max = new Date(2025, 10, 1, 23, 29);
+const val = ref(new Date(2022, 4, 10));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/src/packages/__VUE/datepicker/demo/filter.vue b/src/packages/__VUE/datepicker/demo/filter.vue
new file mode 100644
index 0000000000..b6ec727e63
--- /dev/null
+++ b/src/packages/__VUE/datepicker/demo/filter.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="datetime"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    :filter="filter"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 0, 1, 10, 40);
+const max = new Date(2025, 10, 1, 23, 29);
+const val = ref(new Date(2022, 4, 10));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+const filter = (type, options) => {
+  if (type === 'hour') {
+    return options.filter((option) => Number(option.value) % 6 === 0);
+  }
+  return options;
+};
+</script>
diff --git a/src/packages/__VUE/datepicker/demo/format.vue b/src/packages/__VUE/datepicker/demo/format.vue
new file mode 100644
index 0000000000..481243ce33
--- /dev/null
+++ b/src/packages/__VUE/datepicker/demo/format.vue
@@ -0,0 +1,42 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="datetime"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    :formatter="formatter"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 0, 1, 10, 40);
+const max = new Date(2025, 10, 1, 23, 29);
+const val = ref(new Date(2022, 4, 10));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+const formatter = (type, option) => {
+  switch (type) {
+    case 'year':
+      option.text += '年';
+      break;
+    case 'month':
+      option.text += '月';
+      break;
+    case 'day':
+      option.text += '日';
+      break;
+    case 'hour':
+      option.text += '时';
+      break;
+    case 'minute':
+      option.text += '分';
+      break;
+    default:
+      option.text += '';
+  }
+  return option;
+};
+</script>
diff --git a/src/packages/__VUE/datepicker/demo/hour-minute.vue b/src/packages/__VUE/datepicker/demo/hour-minute.vue
new file mode 100644
index 0000000000..4f7d1ad190
--- /dev/null
+++ b/src/packages/__VUE/datepicker/demo/hour-minute.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="hour-minute"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 1, 1, 10, 40);
+const max = new Date(2020, 1, 1, 23, 29);
+const val = ref(new Date(2020, 1, 1, 15, 30));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/src/packages/__VUE/datepicker/demo/index.vue b/src/packages/__VUE/datepicker/demo/index.vue
new file mode 100644
index 0000000000..7e39633cb8
--- /dev/null
+++ b/src/packages/__VUE/datepicker/demo/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('pop') }}</h2>
+    <Pop />
+
+    <h2>{{ t('yearMonth') }}</h2>
+    <YearMonth />
+
+    <h2>{{ t('monthDay') }}</h2>
+    <MonthDay />
+
+    <h2>{{ t('dateTime') }}</h2>
+    <DateTime />
+
+    <h2>{{ t('time') }}</h2>
+    <Time />
+
+    <h2>{{ t('hourMinute') }}</h2>
+    <HourMinute />
+
+    <h2>{{ t('format') }}</h2>
+    <Format />
+
+    <h2>{{ t('step') }}</h2>
+    <Step />
+
+    <h2>{{ t('filter') }}</h2>
+    <Filter />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Pop from './pop.vue';
+import YearMonth from './year-month.vue';
+import MonthDay from './month-day.vue';
+import DateTime from './date-time.vue';
+import Time from './time.vue';
+import HourMinute from './hour-minute.vue';
+import Format from './format.vue';
+import Step from './step.vue';
+import Filter from './filter.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '选择日期',
+    pop: '搭配 Popup 使用',
+    yearMonth: '选择年月',
+    monthDay: '选择月日',
+    dateTime: '选择年月日时分',
+    time: '选择时分秒',
+    hourMinute: '选择时分',
+    format: '格式化选项',
+    step: '分钟数递增步长设置',
+    filter: '过滤选项'
+  },
+  'en-US': {
+    basic: 'Choose Date',
+    pop: 'With Popup',
+    yearMonth: 'Choose Year-Month',
+    monthDay: 'Choose Month-Day',
+    dateTime: 'Choose DateTime',
+    time: 'Choose Time',
+    hourMinute: 'Choose Hour-Minute',
+    format: 'Option Formatter',
+    step: 'Option Steps',
+    filter: 'Option Filter'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/datepicker/demo/month-day.vue b/src/packages/__VUE/datepicker/demo/month-day.vue
new file mode 100644
index 0000000000..c820985052
--- /dev/null
+++ b/src/packages/__VUE/datepicker/demo/month-day.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="month-day"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 0, 20);
+const max = new Date(2020, 9, 10);
+const val = ref(new Date(2020, 2, 28));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/src/packages/__VUE/datepicker/demo/pop.vue b/src/packages/__VUE/datepicker/demo/pop.vue
new file mode 100644
index 0000000000..5c4151f855
--- /dev/null
+++ b/src/packages/__VUE/datepicker/demo/pop.vue
@@ -0,0 +1,23 @@
+<template>
+  <nut-button @click="show = true">open</nut-button>
+  <nut-popup v-model:visible="show" position="bottom">
+    <nut-date-picker
+      v-model="val"
+      :min-date="min"
+      :max-date="max"
+      :three-dimensional="false"
+      @confirm="confirm"
+    ></nut-date-picker>
+  </nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const min = new Date(2020, 0, 1);
+const max = new Date(2025, 10, 1);
+const val = ref(new Date(2022, 4, 10));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+  show.value = false;
+};
+</script>
diff --git a/src/packages/__VUE/datepicker/demo/step.vue b/src/packages/__VUE/datepicker/demo/step.vue
new file mode 100644
index 0000000000..4ca58c7fe5
--- /dev/null
+++ b/src/packages/__VUE/datepicker/demo/step.vue
@@ -0,0 +1,20 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="time"
+    :min-date="min"
+    :max-date="max"
+    :minute-step="5"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 1, 1, 10, 40, 0);
+const max = new Date(2020, 1, 1, 23, 29, 59);
+const val = ref(new Date(2020, 1, 1, 15, 30, 30));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/src/packages/__VUE/datepicker/demo/time.vue b/src/packages/__VUE/datepicker/demo/time.vue
new file mode 100644
index 0000000000..0e0702c682
--- /dev/null
+++ b/src/packages/__VUE/datepicker/demo/time.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="time"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2020, 1, 1, 10, 40, 0);
+const max = new Date(2020, 1, 1, 23, 29, 59);
+const val = ref(new Date(2020, 1, 1, 15, 30, 30));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/src/packages/__VUE/datepicker/demo/year-month.vue b/src/packages/__VUE/datepicker/demo/year-month.vue
new file mode 100644
index 0000000000..613bec96d5
--- /dev/null
+++ b/src/packages/__VUE/datepicker/demo/year-month.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-date-picker
+    v-model="val"
+    type="year-month"
+    :min-date="min"
+    :max-date="max"
+    :three-dimensional="false"
+    @confirm="confirm"
+  ></nut-date-picker>
+</template>
+<script setup>
+import { ref } from 'vue';
+const min = new Date(2012, 0);
+const max = new Date(2024, 10);
+const val = ref(new Date(2020, 2));
+const confirm = ({ selectedValue }) => {
+  console.log(selectedValue);
+};
+</script>
diff --git a/src/packages/__VUE/datepicker/doc.en-US.md b/src/packages/__VUE/datepicker/doc.en-US.md
index fe55e758b0..b1bd5eb842 100644
--- a/src/packages/__VUE/datepicker/doc.en-US.md
+++ b/src/packages/__VUE/datepicker/doc.en-US.md
@@ -16,332 +16,43 @@ app.use(DatePicker);
 
 ### Choose Date
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    :min-date="minDate"
-    :max-date="maxDate"
-    :is-show-chinese="true"
-    :three-dimensional="false"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const minDate = new Date(2020, 0, 1);
-const maxDate = new Date(2025, 10, 1);
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  showToast.text(selectedOptions.map((val) => val.text).join(''));
-};
-</script>
-```
-
-:::
+> demo: datepicker basic
 
 ### With popup
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>
-  <nut-popup position="bottom" v-model:visible="show">
-    <nut-date-picker
-      v-model="currentDate"
-      :min-date="minDate"
-      :max-date="maxDate"
-      @confirm="popupConfirm"
-      :is-show-chinese="true"
-      :threeDimensional="false"
-    >
-      <nut-button block type="primary" @click="alwaysFun">Always</nut-button>
-    </nut-date-picker>
-  </nut-popup>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const show = ref(false);
-const popupDesc = ref();
-const minDate = new Date(2020, 0, 1);
-const maxDate = new Date(2025, 10, 1);
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const popupConfirm = ({ selectedValue, selectedOptions }) => {
-  popupDesc.value = selectedOptions.map((val) => val.text).join('');
-  show.value = false;
-};
-const alwaysFun = () => {
-  popupDesc.value = 'Always';
-  show.value = false;
-};
-</script>
-```
+> demo: datepicker pop
 
-:::
+### Choose Year-Month
 
-### Choose Month-Day
+> demo: datepicker yearMonth
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    type="month-day"
-    title="Choose Time"
-    :min-date="new Date(2022, 0, 1)"
-    :max-date="new Date(2022, 7, 1)"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  showToast.text(selectedOptions.map((val) => val.text).join('-'));
-};
-</script>
-```
+### Choose Month-Day
 
-:::
+> demo: datepicker monthDay
 
 ### Choose DateTime
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="Choose Time"
-    type="datetime"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  date = selectedValue.slice(0, 3).join('-');
-  time = selectedValue.slice(3).join(':');
-  showToast.text(date + ' ' + time);
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
-```
-
-:::
+> demo: datepicker date-time
 
 ### Choose Time
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="Choose Time"
-    type="time"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  showToast.text(selectedValue.join(':'));
-};
-</script>
-```
-
-:::
+> demo: datepicker time
 
 ### Choose Hour-Minute v4.0.5
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="Choose Hour-Minute"
-    type="hour-minute"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  showToast.text(selectedValue.join(':'));
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
-```
-
-:::
+> demo: datepicker hour-minute
 
 ### Option Formatter
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="Choose Time"
-    type="datetime"
-    :min-date="new Date(2022, 0, 1)"
-    :max-date="new Date(2022, 10, 1)"
-    :formatter="formatter"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  const date = selectedOptions
-    .slice(1, 3)
-    .map((op) => op.text)
-    .join('');
-  const time = selectedOptions
-    .slice(3)
-    .map((op) => op.value)
-    .join(':');
-  showToast.text(selectedOptions[0].text + 'Year' + date + ' ' + time);
-};
-const formatter = (type, option) => {
-  switch (type) {
-    case 'year':
-      option.text += '';
-      break;
-    case 'month':
-      option.text += 'Month';
-      break;
-    case 'day':
-      option.text += 'Day';
-      break;
-    case 'hour':
-      option.text += 'Hour';
-      break;
-    case 'minute':
-      option.text += 'Minute';
-      break;
-    default:
-      option.text += '';
-  }
-  return option;
-};
-</script>
-```
-
-:::
+> demo: datepicker format
 
 ### Option Steps
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    type="time"
-    :minute-step="5"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  showToast.text(selectedValue.join(':'));
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
-```
-
-:::
+> demo: datepicker step
 
 ### Option Filter
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="Choose Time"
-    type="datehour"
-    :min-date="minDate"
-    :max-date="maxDate"
-    :filter="filter"
-    :formatter="formatter"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 0, 0);
-const formatter = (type, option) => {
-  switch (type) {
-    case 'year':
-      option.text += 'Year';
-      break;
-    case 'month':
-      option.text += 'Month';
-      break;
-    case 'day':
-      option.text += 'Day';
-      break;
-    case 'hour':
-      option.text += 'Hour';
-      break;
-    default:
-      option.text += '';
-  }
-  return option;
-};
-
-const filter = (type, options) => {
-  if (type == 'hour') {
-    return options.filter((option) => Number(option.value) % 6 === 0);
-  }
-  return options;
-};
-const confirm = ({ selectedValue, selectedOptions }) => {
-  showToast.text(selectedOptions.map((option) => option.text).join(''));
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
-```
-
-:::
+> demo: datepicker filter
 
 ## API
 
diff --git a/src/packages/__VUE/datepicker/doc.md b/src/packages/__VUE/datepicker/doc.md
index 13d59a483c..40bc1f0e1b 100644
--- a/src/packages/__VUE/datepicker/doc.md
+++ b/src/packages/__VUE/datepicker/doc.md
@@ -16,340 +16,57 @@ app.use(DatePicker);
 
 ### 选择年月日
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    :min-date="minDate"
-    :max-date="maxDate"
-    :is-show-chinese="true"
-    :three-dimensional="false"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const minDate = new Date(2020, 0, 1);
-const maxDate = new Date(2025, 10, 1);
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  showToast.text(selectedOptions.map((val) => val.text).join(''));
-};
-</script>
-```
-
-:::
+> demo: datepicker basic
 
 ### 搭配 Popup 使用
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>
-  <nut-popup position="bottom" v-model:visible="show">
-    <nut-date-picker
-      v-model="currentDate"
-      :min-date="minDate"
-      :max-date="maxDate"
-      @confirm="popupConfirm"
-      :is-show-chinese="true"
-      :threeDimensional="false"
-    >
-      <nut-button block type="primary" @click="alwaysFun">永远有效</nut-button>
-    </nut-date-picker>
-  </nut-popup>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const show = ref(false);
-const popupDesc = ref();
-const minDate = new Date(2020, 0, 1);
-const maxDate = new Date(2025, 10, 1);
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const popupConfirm = ({ selectedValue, selectedOptions }) => {
-  popupDesc.value = selectedOptions.map((val) => val.text).join('');
-  show.value = false;
-};
-const alwaysFun = () => {
-  popupDesc.value = '永远有效';
-  show.value = false;
-};
-</script>
-```
+> demo: datepicker pop
+
+### 选择年月
 
-:::
+将 `type` 设置为 `year-month` 即可选择年月。
+
+> demo: datepicker year-month
 
 ### 选择月日
 
-DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `type` 设置为 year-month 即可选择年份和月份，设置为 month-day 即可选择月份和日期。
-
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    type="month-day"
-    title="日期选择"
-    :min-date="new Date(2022, 0, 1)"
-    :max-date="new Date(2022, 7, 1)"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  showToast.text(selectedOptions.map((val) => val.text).join('-'));
-};
-</script>
-```
+将 `type` 设置为 `month-day` 即可选择月份和日期。
 
-:::
+> demo: datepicker month-day
 
 ### 选择年月日时分
 
-将 `type` 设置为 datetime 即可选择完整的时间。
-
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="日期时间选择"
-    type="datetime"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  date = selectedValue.slice(0, 3).join('-');
-  time = selectedValue.slice(3).join(':');
-  showToast.text(date + ' ' + time);
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
-```
+将 `type` 设置为 `datetime` 即可选择年月日时分。
 
-:::
+> demo: datepicker date-time
 
 ### 选择时分秒
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="时间选择"
-    type="time"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  showToast.text(selectedValue.join(':'));
-};
-</script>
-```
+将 `type` 设置为 `time` 即可选择时分秒。
 
-:::
+> demo: datepicker time
 
 ### 选择时分 v4.0.5
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="时间选择"
-    type="hour-minute"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  showToast.text(selectedValue.join(':'));
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
-```
+将 `type` 设置为 `hour-minute` 即可选择时分。
 
-:::
+> demo: datepicker hour-minute
 
 ### 格式化选项
 
-通过传入 `formatter` 函数，可以对选项文字进行格式化处理。 `isShowChinese` 属性同样是也为选项后面添加文案，但 `formatter` 函数的优先级高于 `isShowChinese` 属性。
-
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="时间选择"
-    type="datetime"
-    :min-date="new Date(2022, 0, 1)"
-    :max-date="new Date(2022, 10, 1)"
-    :formatter="formatter"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  const date = selectedOptions
-    .slice(1, 3)
-    .map((op) => op.text)
-    .join('');
-  const time = selectedOptions
-    .slice(3)
-    .map((op) => op.value)
-    .join(':');
-  showToast.text(selectedOptions[0].text + '年' + date + ' ' + time);
-};
-const formatter = (type, option) => {
-  switch (type) {
-    case 'year':
-      option.text += '';
-      break;
-    case 'month':
-      option.text += '月';
-      break;
-    case 'day':
-      option.text += '日';
-      break;
-    case 'hour':
-      option.text += '时';
-      break;
-    case 'minute':
-      option.text += '分';
-      break;
-    default:
-      option.text += '';
-  }
-  return option;
-};
-</script>
-```
+通过传入 `formatter` 函数，可以对选项文字进行格式化处理。
 
-:::
+> demo: datepicker format
 
 ### 分钟数递增步长设置
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    type="time"
-    :minute-step="5"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  showToast.text(selectedValue.join(':'));
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
-```
-
-:::
+> demo: datepicker step
 
 ### 过滤选项
 
 通过 `filter` 函数可以对选项数组进行过滤，实现自定义时间间隔。
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="时间选择"
-    type="datehour"
-    :min-date="minDate"
-    :max-date="maxDate"
-    :filter="filter"
-    :formatter="formatter"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const currentDate = new Date(2022, 4, 10, 0, 0);
-const formatter = (type, option) => {
-  switch (type) {
-    case 'year':
-      option.text += '年';
-      break;
-    case 'month':
-      option.text += '月';
-      break;
-    case 'day':
-      option.text += '月';
-      break;
-    case 'hour':
-      option.text += '时';
-      break;
-    default:
-      option.text += '';
-  }
-  return option;
-};
-
-const filter = (type, options) => {
-  if (type == 'hour') {
-    return options.filter((option) => Number(option.value) % 6 === 0);
-  }
-  return options;
-};
-const confirm = ({ selectedValue, selectedOptions }) => {
-  showToast.text(selectedOptions.map((option) => option.text).join(''));
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
-```
-
-:::
+> demo: datepicker filter
 
 ## API
 
diff --git a/src/packages/__VUE/datepicker/doc.taro.md b/src/packages/__VUE/datepicker/doc.taro.md
index eb95f9f099..d8b58188dc 100644
--- a/src/packages/__VUE/datepicker/doc.taro.md
+++ b/src/packages/__VUE/datepicker/doc.taro.md
@@ -16,330 +16,57 @@ app.use(DatePicker);
 
 ### 选择年月日
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    :min-date="minDate"
-    :max-date="maxDate"
-    :is-show-chinese="true"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const minDate = new Date(2020, 0, 1);
-const maxDate = new Date(2025, 10, 1);
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  console.log(selectedOptions.map((val) => val.text).join(''));
-};
-</script>
-```
-
-:::
+> demo: datepicker basic dentry
 
 ### 搭配 Popup 使用
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>
-  <nut-popup position="bottom" v-model:visible="show">
-    <nut-date-picker
-      v-model="currentDate"
-      :min-date="minDate"
-      :max-date="maxDate"
-      @confirm="popupConfirm"
-      :is-show-chinese="true"
-    >
-      <nut-button block type="primary" @click="alwaysFun">永远有效</nut-button>
-    </nut-date-picker>
-  </nut-popup>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const show = ref(false);
-const popupDesc = ref();
-const minDate = new Date(2020, 0, 1);
-const maxDate = new Date(2025, 10, 1);
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const popupConfirm = ({ selectedValue, selectedOptions }) => {
-  popupDesc.value = selectedOptions.map((val) => val.text).join('');
-  show.value = false;
-};
-const alwaysFun = () => {
-  popupDesc.value = '永远有效';
-  show.value = false;
-};
-</script>
-```
+> demo: datepicker pop dentry
+
+### 选择年月
 
-:::
+将 `type` 设置为 `year-month` 即可选择年月。
+
+> demo: datepicker year-month dentry
 
 ### 选择月日
 
-DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `type` 设置为 year-month 即可选择年份和月份，设置为 month-day 即可选择月份和日期。
-
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    type="month-day"
-    title="日期选择"
-    :min-date="new Date(2022, 0, 1)"
-    :max-date="new Date(2022, 7, 1)"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  console.log(selectedOptions.map((val) => val.text).join('-'));
-};
-</script>
-```
+将 `type` 设置为 `month-day` 即可选择月份和日期。
 
-:::
+> demo: datepicker month-day dentry
 
 ### 选择年月日时分
 
-将 `type` 设置为 datetime 即可选择完整的时间。
-
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="日期时间选择"
-    type="datetime"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  date = selectedValue.slice(0, 3).join('-');
-  time = selectedValue.slice(3).join(':');
-  console.log(date + ' ' + time);
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
-```
+将 `type` 设置为 `datetime` 即可选择年月日时分。
 
-:::
+> demo: datepicker date-time dentry
 
 ### 选择时分秒
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="时间选择"
-    type="time"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  console.log(selectedValue.join(':'));
-};
-</script>
-```
+将 `type` 设置为 `time` 即可选择时分秒。
 
-:::
+> demo: datepicker time dentry
 
 ### 选择时分 v4.0.5
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="时间选择"
-    type="hour-minute"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  console.log(selectedValue.join(':'));
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
-```
+将 `type` 设置为 `hour-minute` 即可选择时分。
 
-:::
+> demo: datepicker hour-minute dentry
 
 ### 格式化选项
 
-通过传入 `formatter` 函数，可以对选项文字进行格式化处理。 `isShowChinese` 属性同样是也为选项后面添加文案，但 `formatter` 函数的优先级高于 `isShowChinese` 属性。
-
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="时间选择"
-    type="datetime"
-    :min-date="new Date(2022, 0, 1)"
-    :max-date="new Date(2022, 10, 1)"
-    :formatter="formatter"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  const date = selectedOptions
-    .slice(1, 3)
-    .map((op) => op.text)
-    .join('');
-  const time = selectedOptions
-    .slice(3)
-    .map((op) => op.value)
-    .join(':');
-  console.log(selectedOptions[0].text + '年' + date + ' ' + time);
-};
-const formatter = (type, option) => {
-  switch (type) {
-    case 'year':
-      option.text += '';
-      break;
-    case 'month':
-      option.text += '月';
-      break;
-    case 'day':
-      option.text += '日';
-      break;
-    case 'hour':
-      option.text += '时';
-      break;
-    case 'minute':
-      option.text += '分';
-      break;
-    default:
-      option.text += '';
-  }
-  return option;
-};
-</script>
-```
+通过传入 `formatter` 函数，可以对选项文字进行格式化处理。
 
-:::
+> demo: datepicker format dentry
 
 ### 分钟数递增步长设置
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    type="time"
-    :minute-step="5"
-    :min-date="minDate"
-    :max-date="maxDate"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-const currentDate = new Date(2022, 4, 10, 10, 10);
-const confirm = ({ selectedValue, selectedOptions }) => {
-  console.log(selectedValue.join(':'));
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
-```
-
-:::
+> demo: datepicker step dentry
 
 ### 过滤选项
 
 通过 `filter` 函数可以对选项数组进行过滤，实现自定义时间间隔。
 
-:::demo
-
-```vue
-<template>
-  <nut-date-picker
-    v-model="currentDate"
-    title="时间选择"
-    type="datehour"
-    :min-date="minDate"
-    :max-date="maxDate"
-    :filter="filter"
-    :formatter="formatter"
-    @confirm="confirm"
-  ></nut-date-picker>
-</template>
-<script setup>
-import { ref } from 'vue';
-const currentDate = new Date(2022, 4, 10, 0, 0);
-const formatter = (type, option) => {
-  switch (type) {
-    case 'year':
-      option.text += '年';
-      break;
-    case 'month':
-      option.text += '月';
-      break;
-    case 'day':
-      option.text += '月';
-      break;
-    case 'hour':
-      option.text += '时';
-      break;
-    default:
-      option.text += '';
-  }
-  return option;
-};
-
-const filter = (type, options) => {
-  if (type == 'hour') {
-    return options.filter((option) => Number(option.value) % 6 === 0);
-  }
-  return options;
-};
-const confirm = ({ selectedValue, selectedOptions }) => {
-  console.log(selectedOptions.map((option) => option.text).join(''));
-};
-const maxDate = new Date(2025, 10, 1);
-const minDate = new Date(2020, 0, 1);
-</script>
-```
-
-:::
+> demo: datepicker filter dentry
 
 ## API