docs(date-picker): [date-picker] optimize date-picker docs (#1320)

* docs(date-picker): [date-picker] optimize the width of date editor

* docs(date-picker): [date-picker] optimize api docs

examples/sites/demos/pc/app/date-picker/clear-composition-api.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <p>默认显示清除按钮</p>
+    <p>默认显示清除按钮：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value"></tiny-date-picker>
     </div>
-  
+
-    <p>隐藏清除按钮</p>
+    <p>隐藏清除按钮：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :clearable="false"></tiny-date-picker>
     </div>
 
-    <p>自定义清除图标</p>
+    <p>自定义清除图标：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :clear-icon="IconClose"></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/clear.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <p>默认显示清除按钮</p>
+    <p>默认显示清除按钮：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value"></tiny-date-picker>
     </div>
-  
+
-    <p>隐藏清除按钮</p>
+    <p>隐藏清除按钮：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :clearable="false"></tiny-date-picker>
     </div>
 
-    <p>自定义清除图标</p>
+    <p>自定义清除图标：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :clear-icon="IconClose"></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue

@@ -1,9 +1,33 @@
 <template>
   <div class="demo-date-picker-wrap">
-    <tiny-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
+    <tiny-date-picker
-    <tiny-date-picker v-model="dateTimeValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
+      v-model="value"
-    <tiny-date-picker v-model="monthValue" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份" range-separator="至"></tiny-date-picker>
+      type="daterange"
-    <tiny-date-picker v-model="yearValue" type="yearrange" start-placeholder="开始年份" end-placeholder="结束年份" range-separator="至"></tiny-date-picker>
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      range-separator="至"
+    ></tiny-date-picker>
+    <tiny-date-picker
+      v-model="dateTimeValue"
+      type="datetimerange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      range-separator="至"
+    ></tiny-date-picker>
+    <tiny-date-picker
+      v-model="monthValue"
+      type="monthrange"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份"
+      range-separator="至"
+    ></tiny-date-picker>
+    <tiny-date-picker
+      v-model="yearValue"
+      type="yearrange"
+      start-placeholder="开始年份"
+      end-placeholder="结束年份"
+      range-separator="至"
+    ></tiny-date-picker>
   </div>
 </template>
 
@@ -21,6 +45,10 @@ const yearValue = ref('')
 .demo-date-picker-wrap {
   width: 350px;
 
+  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
+    width: 350px;
+  }
+
   & > * {
     margin-top: 12px;
   }

examples/sites/demos/pc/app/date-picker/date-range.vue

@@ -1,9 +1,33 @@
 <template>
   <div class="demo-date-picker-wrap">
-    <tiny-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
+    <tiny-date-picker
-    <tiny-date-picker v-model="dateTimeValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
+      v-model="value"
-    <tiny-date-picker v-model="monthValue" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份" range-separator="至"></tiny-date-picker>
+      type="daterange"
-    <tiny-date-picker v-model="yearValue" type="yearrange" start-placeholder="开始年份" end-placeholder="结束年份" range-separator="至"></tiny-date-picker>
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      range-separator="至"
+    ></tiny-date-picker>
+    <tiny-date-picker
+      v-model="dateTimeValue"
+      type="datetimerange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      range-separator="至"
+    ></tiny-date-picker>
+    <tiny-date-picker
+      v-model="monthValue"
+      type="monthrange"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份"
+      range-separator="至"
+    ></tiny-date-picker>
+    <tiny-date-picker
+      v-model="yearValue"
+      type="yearrange"
+      start-placeholder="开始年份"
+      end-placeholder="结束年份"
+      range-separator="至"
+    ></tiny-date-picker>
   </div>
 </template>
 
@@ -29,6 +53,10 @@ export default {
 .demo-date-picker-wrap {
   width: 350px;
 
+  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
+    width: 350px;
+  }
+
   & > * {
     margin-top: 12px;
   }

examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
-    <p>打开日期面板，默认显示的日期</p>
+    <p>打开日期面板，默认显示的日期：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :default-value="defaultDate"></tiny-date-picker>
     </div>
-    <p>日期时间(范围)，选择日期之后默认显示的时间(范围)</p>
+    <p>日期时间(范围)，选择日期之后默认显示的时间(范围)：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="dateTimeValue" type="datetime" :default-time="defaultTime"></tiny-date-picker>
-      <tiny-date-picker v-model="dateTimeRangeValue" type="datetimerange" :default-time="defaultTimeRange"></tiny-date-picker>
+      <tiny-date-picker
+        v-model="dateTimeRangeValue"
+        type="datetimerange"
+        :default-time="defaultTimeRange"
+      ></tiny-date-picker>
     </div>
   </div>
 </template>
@@ -28,6 +32,10 @@ const defaultTimeRange = ref(['09:00:00', '18:00:00'])
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

examples/sites/demos/pc/app/date-picker/default-value.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
-    <p>打开日期面板，默认显示的日期</p>
+    <p>打开日期面板，默认显示的日期：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :default-value="defaultDate"></tiny-date-picker>
     </div>
-    <p>日期时间(范围)，选择日期之后默认显示的时间(范围)</p>
+    <p>日期时间(范围)，选择日期之后默认显示的时间(范围)：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="dateTimeValue" type="datetime" :default-time="defaultTime"></tiny-date-picker>
-      <tiny-date-picker v-model="dateTimeRangeValue" type="datetimerange" :default-time="defaultTimeRange"></tiny-date-picker>
+      <tiny-date-picker
+        v-model="dateTimeRangeValue"
+        type="datetimerange"
+        :default-time="defaultTimeRange"
+      ></tiny-date-picker>
     </div>
   </div>
 </template>
@@ -36,6 +40,10 @@ export default {
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue

@@ -52,6 +52,10 @@ const pickerOptions = {
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

examples/sites/demos/pc/app/date-picker/disabled.vue

@@ -59,6 +59,10 @@ export default {
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue

@@ -17,6 +17,10 @@ const dateRangeValue = ref([])
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

examples/sites/demos/pc/app/date-picker/label-inside.vue

@@ -25,6 +25,10 @@ export default {
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

examples/sites/demos/pc/app/date-picker/size-composition-api.vue

@@ -8,11 +8,27 @@
     </tiny-radio-group>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :size="radioValue" placeholder="请选择日期"></tiny-date-picker>
-      <tiny-date-picker v-model="dateTimeValue" type="datetime" :size="radioValue" placeholder="请选择日期"></tiny-date-picker>
+      <tiny-date-picker
+        v-model="dateTimeValue"
+        type="datetime"
+        :size="radioValue"
+        placeholder="请选择日期"
+      ></tiny-date-picker>
       <tiny-date-picker v-model="weekValue" type="week" :size="radioValue" placeholder="请选择周"></tiny-date-picker>
-      <tiny-date-picker v-model="monthValue" type="month" :size="radioValue" placeholder="请选择月份"></tiny-date-picker>
+      <tiny-date-picker
+        v-model="monthValue"
+        type="month"
+        :size="radioValue"
+        placeholder="请选择月份"
+      ></tiny-date-picker>
       <tiny-date-picker v-model="yearValue" type="year" :size="radioValue" placeholder="请选择年份"></tiny-date-picker>
-      <tiny-date-picker v-model="rangeValue" type="daterange" :size="radioValue" start-placeholder="开始日期" end-placeholder="结束日期"></tiny-date-picker>
+      <tiny-date-picker
+        v-model="rangeValue"
+        type="daterange"
+        :size="radioValue"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></tiny-date-picker>
     </div>
   </div>
 </template>
@@ -38,6 +54,10 @@ const radioValue = ref('default')
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

examples/sites/demos/pc/app/date-picker/size.vue

@@ -8,21 +8,33 @@
     </tiny-radio-group>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :size="radioValue" placeholder="请选择日期"></tiny-date-picker>
-      <tiny-date-picker v-model="dateTimeValue" type="datetime" :size="radioValue" placeholder="请选择日期"></tiny-date-picker>
+      <tiny-date-picker
+        v-model="dateTimeValue"
+        type="datetime"
+        :size="radioValue"
+        placeholder="请选择日期"
+      ></tiny-date-picker>
       <tiny-date-picker v-model="weekValue" type="week" :size="radioValue" placeholder="请选择周"></tiny-date-picker>
-      <tiny-date-picker v-model="monthValue" type="month" :size="radioValue" placeholder="请选择月份"></tiny-date-picker>
+      <tiny-date-picker
+        v-model="monthValue"
+        type="month"
+        :size="radioValue"
+        placeholder="请选择月份"
+      ></tiny-date-picker>
       <tiny-date-picker v-model="yearValue" type="year" :size="radioValue" placeholder="请选择年份"></tiny-date-picker>
-      <tiny-date-picker v-model="rangeValue" type="daterange" :size="radioValue" start-placeholder="开始日期" end-placeholder="结束日期"></tiny-date-picker>
+      <tiny-date-picker
+        v-model="rangeValue"
+        type="daterange"
+        :size="radioValue"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></tiny-date-picker>
     </div>
   </div>
 </template>
 
 <script>
-import {
+import { DatePicker, RadioGroup, RadioButton } from '@opentiny/vue'
-  DatePicker,
-  RadioGroup,
-  RadioButton
-} from '@opentiny/vue'
 
 export default {
   components: {
@@ -48,6 +60,10 @@ export default {
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue

@@ -14,11 +14,7 @@
           ></tiny-date-picker>
         </tiny-form-item>
         <tiny-form-item prop="date2">
-          <tiny-time-picker
+          <tiny-time-picker :validate-event="false" placeholder="选择时间" v-model="ruleForm.date2"></tiny-time-picker>
-            :validate-event="false"
-            placeholder="选择时间"
-            v-model="ruleForm.date2"
-          ></tiny-time-picker>
         </tiny-form-item>
       </tiny-form-item>
       <tiny-form-item>
@@ -72,9 +68,9 @@ const rules = ref({
 function submitForm() {
   ruleFormRef.value.validate((valid) => {
     if (valid) {
-      Modal.message('Submitted successfully !')
+      Modal.message({ message: 'Submitted successfully !', status: 'success' })
     } else {
-      Modal.message('Data verification failed !')
+      Modal.message({ message: 'Data verification failed !', status: 'error' })
 
       return false
     }
@@ -86,8 +82,12 @@ function resetForm() {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .demo-date-picker-wrap {
   width: 400px;
+
+  :deep(.tiny-form-item .tiny-form-item) {
+    margin-bottom: 8px;
+  }
 }
 </style>

examples/sites/demos/pc/app/date-picker/validate-event.vue

@@ -14,11 +14,7 @@
           ></tiny-date-picker>
         </tiny-form-item>
         <tiny-form-item prop="date2">
-          <tiny-time-picker
+          <tiny-time-picker :validate-event="false" placeholder="选择时间" v-model="ruleForm.date2"></tiny-time-picker>
-            :validate-event="false"
-            placeholder="选择时间"
-            v-model="ruleForm.date2"
-          ></tiny-time-picker>
         </tiny-form-item>
       </tiny-form-item>
       <tiny-form-item>
@@ -75,9 +71,9 @@ export default {
     submitForm() {
       this.$refs.ruleFormRef.validate((valid) => {
         if (valid) {
-          Modal.message('Submitted successfully !')
+          Modal.message({ message: 'Submitted successfully !', status: 'success' })
         } else {
-          Modal.message('Data verification failed !')
+          Modal.message({ message: 'Data verification failed !', status: 'error' })
 
           return false
         }
@@ -90,8 +86,12 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .demo-date-picker-wrap {
   width: 400px;
+
+  :deep(.tiny-form-item .tiny-form-item) {
+    margin-bottom: 8px;
+  }
 }
 </style>

examples/sites/demos/pc/app/date-picker/webdoc/date-picker.js

@@ -333,7 +333,7 @@ export default {
         },
         {
           'name': 'clear-icon',
-          'type': 'object',
+          'type': 'Component',
           'defaultValue': 'IconOperationfaild',
           'desc': {
             'zh-CN': '自定义清空图标',
@@ -397,7 +397,7 @@ export default {
         {
           'name': 'format',
           'type': 'string',
-          'defaultValue': 'yyyy-MM-dd',
+          'defaultValue': "'yyyy-MM-dd'",
           'desc': {
             'zh-CN': '显示在输入框中的格式',
             'en-US': 'Display format in the text box'
@@ -555,8 +555,8 @@ export default {
         },
         {
           'name': 'size',
-          'type': "'medium' | 'small' | '' | 'mini'",
+          'type': "'medium' | 'small' | 'mini'",
-          'defaultValue': "''",
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '输入框尺寸',
             'en-US': 'Text box size; The values of this attribute are medium, small, and mini'
@@ -587,7 +587,7 @@ export default {
         },
         {
           'name': 'suffix-icon',
-          'type': 'object',
+          'type': 'Component',
           'defaultValue': 'IconCalendar',
           'desc': {
             'zh-CN': '自定义选择器的后置图标',
@@ -663,7 +663,7 @@ export default {
         {
           'name': 'value-format',
           'type': 'string',
-          'defaultValue': 'Date 对象',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '指定绑定值的格式，不指定则绑定值为 Date 对象',
             'en-US':