From 81efc44c3b167a39bd529e5b57128d3003635f3c Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Fri, 10 Dec 2021 22:35:47 -0600
Subject: [PATCH] fix(components): [date-picker] filter custom content comment
 (#4651)

---
 .../date-picker/__tests__/date-picker.spec.ts | 48 +++++++++++++++++++
 .../src/date-picker-com/basic-cell-render.ts  | 36 ++++++++------
 2 files changed, 69 insertions(+), 15 deletions(-)

diff --git a/packages/components/date-picker/__tests__/date-picker.spec.ts b/packages/components/date-picker/__tests__/date-picker.spec.ts
index 24f637734e..3fce014ceb 100644
--- a/packages/components/date-picker/__tests__/date-picker.spec.ts
+++ b/packages/components/date-picker/__tests__/date-picker.spec.ts
@@ -275,6 +275,54 @@ describe('DatePicker', () => {
     ).toBeTruthy()
   })
 
+  it('custom content comment', async () => {
+    _mount(
+      `<el-date-picker
+        v-model="value"
+        ref="input">
+        <template #default="{ isCurrent, text }">
+          <!-- <div class="cell" :class="{ current: isCurrent }">
+            <div>{{ text + "csw" }}</div>
+          </div> -->
+        </template>
+      </el-date-picker>`,
+      () => ({ value: '' }),
+      {
+        mounted() {
+          this.$refs.input.focus()
+        },
+      }
+    )
+    await nextTick()
+    const el = document.querySelector('td.available .el-date-table-cell')
+    const text = el.textContent
+    expect(text.includes('csw')).toBeFalsy()
+  })
+
+  it('custom content value validate', async () => {
+    _mount(
+      `<el-date-picker
+        v-model="value"
+        ref="input">
+        <template #default="{ isCurrent, text }">
+          <div class="cell" :class="{ current: isCurrent }">
+            <div>{{ text + "csw" }}</div>
+          </div>
+        </template>
+      </el-date-picker>`,
+      () => ({ value: '' }),
+      {
+        mounted() {
+          this.$refs.input.focus()
+        },
+      }
+    )
+    await nextTick()
+    const el = document.querySelector('td.available .cell')
+    const text = el.textContent
+    expect(text.includes('csw')).toBeTruthy()
+  })
+
   describe('value-format', () => {
     it('with literal string', async () => {
       const day = dayjs()
diff --git a/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts b/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts
index 1c78b05dc2..c6034581ec 100644
--- a/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts
+++ b/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts
@@ -14,23 +14,29 @@ export default defineComponent({
     const picker = inject(ROOT_PICKER_INJECTION_KEY)
     return () => {
       const cell = props.cell
-      return picker?.ctx.slots.default
-        ? picker.ctx.slots.default(cell)
-        : h(
-            'div',
+      if (picker?.ctx.slots.default) {
+        const list = picker.ctx.slots.default(cell).filter((item) => {
+          return item.type.toString() !== 'Symbol(Comment)'
+        })
+        if (list.length) {
+          return list
+        }
+      }
+      return h(
+        'div',
+        {
+          class: 'el-date-table-cell',
+        },
+        [
+          h(
+            'span',
             {
-              class: 'el-date-table-cell',
+              class: 'el-date-table-cell__text',
             },
-            [
-              h(
-                'span',
-                {
-                  class: 'el-date-table-cell__text',
-                },
-                [cell?.text]
-              ),
-            ]
-          )
+            [cell?.text]
+          ),
+        ]
+      )
     }
   },
 })