From 9bc930fe91d5445bb3b1d63e05877fb13f143a09 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gnerim.ru>
Date: Sun, 5 Apr 2026 20:57:57 +0300
Subject: [PATCH] feat: create CalendarInput date picker component

---
 .../calendar-input/calendar-input.scss        | 30 ++++++++++++++
 .../calendar-input/calendar-input.tsx         | 40 +++++++++++++++++++
 .../app/components/calendar-input/index.ts    |  2 +
 3 files changed, 72 insertions(+)
 create mode 100644 apps/react/src/app/components/calendar-input/calendar-input.scss
 create mode 100644 apps/react/src/app/components/calendar-input/calendar-input.tsx
 create mode 100644 apps/react/src/app/components/calendar-input/index.ts

diff --git a/apps/react/src/app/components/calendar-input/calendar-input.scss b/apps/react/src/app/components/calendar-input/calendar-input.scss
new file mode 100644
index 000000000..8f627cf9f
--- /dev/null
+++ b/apps/react/src/app/components/calendar-input/calendar-input.scss
@@ -0,0 +1,30 @@
+.calendar-input {
+  width: 100%;
+
+  :global {
+    .calendar-input__field {
+      width: 100%;
+    }
+
+    .p-calendar {
+      width: 100%;
+
+      .p-inputtext {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1px solid #e0e0e0;
+        border-radius: 4px;
+        font-size: 14px;
+
+        &:focus {
+          border-color: #1976d2;
+          outline: none;
+        }
+      }
+
+      .p-calendar-trigger {
+        padding: 8px 12px;
+      }
+    }
+  }
+}
diff --git a/apps/react/src/app/components/calendar-input/calendar-input.tsx b/apps/react/src/app/components/calendar-input/calendar-input.tsx
new file mode 100644
index 000000000..897fdcb58
--- /dev/null
+++ b/apps/react/src/app/components/calendar-input/calendar-input.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { Calendar } from 'primereact/calendar'
+import './calendar-input.scss'
+
+export interface CalendarInputProps {
+  value: Date | null
+  onChange: (date: Date | null) => void
+  minDate?: Date
+  maxDate?: Date
+  placeholder?: string
+  disabled?: boolean
+  'data-testid'?: string
+}
+
+export const CalendarInput: React.FC<CalendarInputProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  placeholder = 'Select date',
+  disabled = false,
+  'data-testid': dataTestId,
+}) => {
+  return (
+    <div className="calendar-input" data-testid={dataTestId || 'calendar-input'}>
+      <Calendar
+        value={value}
+        onChange={(e) => onChange(e.value as Date | null)}
+        dateFormat="dd.mm.yy"
+        minDate={minDate}
+        maxDate={maxDate}
+        placeholder={placeholder}
+        disabled={disabled}
+        showIcon
+        inline={false}
+        className="calendar-input__field"
+      />
+    </div>
+  )
+}
diff --git a/apps/react/src/app/components/calendar-input/index.ts b/apps/react/src/app/components/calendar-input/index.ts
new file mode 100644
index 000000000..aba06b8e9
--- /dev/null
+++ b/apps/react/src/app/components/calendar-input/index.ts
@@ -0,0 +1,2 @@
+export { CalendarInput } from './calendar-input'
+export type { CalendarInputProps } from './calendar-input'