From edae5ee94595cc5b36abc24d775be53c6e82c476 Mon Sep 17 00:00:00 2001
From: harrywan <harrywan@webank.com>
Date: Wed, 3 Jun 2026 00:02:40 +0800
Subject: [PATCH] feat(date-picker): add clearable prop (#815)

---
 .../__tests__/date-picker-815.spec.ts         | 34 +++++++++++++++++++
 components/date-picker/datePicker.vue         |  2 +-
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 components/date-picker/__tests__/date-picker-815.spec.ts

diff --git a/components/date-picker/__tests__/date-picker-815.spec.ts b/components/date-picker/__tests__/date-picker-815.spec.ts
new file mode 100644
index 000000000..efa0dd5e0
--- /dev/null
+++ b/components/date-picker/__tests__/date-picker-815.spec.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FDatePicker from '../datePicker.vue';
+
+const CLOSE_ICON_PATH = 'M512 42.667C771.2 42.667 981.333 252.8';
+
+describe('FDatePicker clearable prop (#815)', () => {
+    it('clearable: true (default) shows the X clear icon when value is set', async () => {
+        const wrapper = mount(FDatePicker, {
+            props: {
+                modelValue: Date.now(),
+            },
+        });
+        const input = wrapper.find('input');
+        await input.trigger('focus');
+        await wrapper.vm.$nextTick();
+        const html = wrapper.html();
+        expect(html).toContain(CLOSE_ICON_PATH);
+    });
+
+    it('clearable: false hides the X clear icon when value is set', async () => {
+        const wrapper = mount(FDatePicker, {
+            props: {
+                modelValue: Date.now(),
+                clearable: false,
+            },
+        });
+        const input = wrapper.find('input');
+        await input.trigger('focus');
+        await wrapper.vm.$nextTick();
+        const html = wrapper.html();
+        expect(html).not.toContain(CLOSE_ICON_PATH);
+    });
+});
\ No newline at end of file
diff --git a/components/date-picker/datePicker.vue b/components/date-picker/datePicker.vue
index aea2f6ef5..6ddc99350 100644
--- a/components/date-picker/datePicker.vue
+++ b/components/date-picker/datePicker.vue
@@ -132,7 +132,7 @@ export const datePickerProps = {
     },
     clearable: {
         type: Boolean,
-        default: false,
+        default: true,
     },
     placeholder: {
         type: [String, Array] as PropType<string | string[]>,