From b27d86bdc70409ffd31cef5f04a1d280d89d2c25 Mon Sep 17 00:00:00 2001
From: Kunerkhan <kakerov@gmail.com>
Date: Tue, 14 Oct 2025 16:38:32 +0600
Subject: [PATCH] feat(AIFEP-20): Add clear button

---
 src/components/common/DatePicker/index.tsx   | 16 +++++++++++++++-
 src/components/common/DatePicker/styles.scss |  3 +++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/common/DatePicker/index.tsx b/src/components/common/DatePicker/index.tsx
index e8cd88f..5d07dc3 100644
--- a/src/components/common/DatePicker/index.tsx
+++ b/src/components/common/DatePicker/index.tsx
@@ -16,6 +16,7 @@ export interface DatePickerProps extends Pick<DatePickerBaseProps, 'yearsLength'
   defaultValue?: Date | null;
   disabledDate?: Matcher;
   className?: string;
+  withClear?: boolean;
   leftIconElement?: ReactNode;
 }
 
@@ -28,6 +29,7 @@ export const DatePicker: React.FC<DatePickerProps> = props => {
     disabledDate,
     defaultValue,
     yearsLength,
+    withClear,
   } = useCombinedPropsWithKit({
     name: 'DatePicker',
     props,
@@ -45,6 +47,11 @@ export const DatePicker: React.FC<DatePickerProps> = props => {
     return format(value, 'd MMM yyyy');
   }, [value]);
 
+  const clearDate = () => {
+    setValue(null);
+    onChange?.(null);
+  };
+
   useUpdateEffect(() => {
     onChange?.(value);
   }, [value]);
@@ -55,8 +62,15 @@ export const DatePicker: React.FC<DatePickerProps> = props => {
         {leftIconElement !== undefined && leftIconElement}
         {leftIconElement === undefined && <Icon name="calendar" size={16} />}
         {displayDate || placeholder}
-        <Icon name="down-arrow" size={18} />
+
+        {withClear && displayDate ? null : <Icon name="down-arrow" size={18} />}
       </button>
+      {withClear && displayDate && (
+        <button type="button" onClick={clearDate}>
+          <Icon name="close" size={16} />
+        </button>
+      )}
+
       {isOpen && (
         <DatePickerPopup
           callableElement={buttonRef.current}
diff --git a/src/components/common/DatePicker/styles.scss b/src/components/common/DatePicker/styles.scss
index 0e134d5..29c3297 100644
--- a/src/components/common/DatePicker/styles.scss
+++ b/src/components/common/DatePicker/styles.scss
@@ -1,4 +1,7 @@
 .date-picker {
+  display: flex;
+  gap: 0.43rem;
+  align-items: center;
   &__btn {
     display: flex;
     align-items: center;