diff --git a/docs/examples/date-picker/date-range.vue b/docs/examples/date-picker/date-range.vue
index 60bd8ed5f3..7a873526b6 100644
--- a/docs/examples/date-picker/date-range.vue
+++ b/docs/examples/date-picker/date-range.vue
@@ -1,11 +1,9 @@
 <template>
-  <div>
-    <el-radio-group v-model="size" label="size control">
-      <el-radio-button label="large">large</el-radio-button>
-      <el-radio-button label="default">default</el-radio-button>
-      <el-radio-button label="small">small</el-radio-button>
-    </el-radio-group>
-  </div>
+  <el-radio-group v-model="size" label="size control" size="small">
+    <el-radio-button label="large">large</el-radio-button>
+    <el-radio-button label="default">default</el-radio-button>
+    <el-radio-button label="small">small</el-radio-button>
+  </el-radio-group>
   <div class="demo-date-picker">
     <div class="block">
       <span class="demonstration">Default</span>
@@ -37,7 +35,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-const size = ref<'' | 'large' | 'small'>('')
+const size = ref<'default' | 'large' | 'small'>('default')
 
 const value1 = ref('')
 const value2 = ref('')
@@ -72,6 +70,7 @@ const shortcuts = [
   },
 ]
 </script>
+
 <style scoped>
 .demo-date-picker {
   display: flex;
@@ -79,15 +78,18 @@ const shortcuts = [
   padding: 0;
   flex-wrap: wrap;
 }
+
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
   border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
+
 .demo-date-picker .block:last-child {
   border-right: none;
 }
+
 .demo-date-picker .demonstration {
   display: block;
   color: var(--el-text-color-secondary);
diff --git a/docs/examples/date-picker/enter-date.vue b/docs/examples/date-picker/enter-date.vue
index 8ec1981e3d..0903aee4a3 100644
--- a/docs/examples/date-picker/enter-date.vue
+++ b/docs/examples/date-picker/enter-date.vue
@@ -1,11 +1,9 @@
 <template>
-  <div>
-    <el-radio-group v-model="size" label="size control">
-      <el-radio-button label="large">large</el-radio-button>
-      <el-radio-button label="default">default</el-radio-button>
-      <el-radio-button label="small">small</el-radio-button>
-    </el-radio-group>
-  </div>
+  <el-radio-group v-model="size" label="size control" size="small">
+    <el-radio-button label="large">large</el-radio-button>
+    <el-radio-button label="default">default</el-radio-button>
+    <el-radio-button label="small">small</el-radio-button>
+  </el-radio-group>
   <div class="demo-date-picker">
     <div class="block">
       <span class="demonstration">Default</span>
@@ -33,7 +31,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-const size = ref<'' | 'large' | 'small'>('')
+const size = ref<'default' | 'large' | 'small'>('default')
 
 const value1 = ref('')
 const value2 = ref('')
@@ -65,6 +63,7 @@ const disabledDate = (time: Date) => {
   return time.getTime() > Date.now()
 }
 </script>
+
 <style scoped>
 .demo-date-picker {
   display: flex;
@@ -72,15 +71,18 @@ const disabledDate = (time: Date) => {
   padding: 0;
   flex-wrap: wrap;
 }
+
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
   border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
+
 .demo-date-picker .block:last-child {
   border-right: none;
 }
+
 .demo-date-picker .demonstration {
   display: block;
   color: var(--el-text-color-secondary);