feat: create CalendarInput date picker component

2026-04-05 20:57:57 +03:00
parent 3225ecd1fa
commit 9bc930fe91
3 changed files with 72 additions and 0 deletions
@@ -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;
+      }
+    }
+  }
+}
@@ -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>
+  )
+}
@@ -0,0 +1,2 @@
+export { CalendarInput } from './calendar-input'
+export type { CalendarInputProps } from './calendar-input'