feat(calendar): add year picker functionality to PersianDatePicker and PersianCalendar

2026-06-25 20:00:13 +03:30
parent 60b2224ec3
commit 1997b78d11
3 changed files with 148 additions and 48 deletions
@@ -5,6 +5,8 @@ interface Props {
  value: string;        // YYYY-MM-DD Gregorian
  onChange: (v: string) => void;
  onClose: () => void;
+  /** انتخاب سال→ماه→روز را فعال می‌کند (پیش‌فرض خاموش — مناسب تاریخ تولد). */
+  enableYearPicker?: boolean;
 }

 const WEEK_DAYS = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'];
@@ -65,7 +67,7 @@ function jalaliToGregorian(jy: number, jm: number, jd: number): string {

 const JALALI_MONTHS = ['فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند'];

-export default function PersianCalendar({ value, onChange, onClose }: Props) {
+export default function PersianCalendar({ value, onChange, onClose, enableYearPicker = false }: Props) {
  const ref = useRef<HTMLDivElement>(null);

  const todayGreg = new Date().toISOString().slice(0, 10);
@@ -74,6 +76,11 @@ export default function PersianCalendar({ value, onChange, onClose }: Props) {

  const [viewYear, setViewYear] = useState(valueJ.year);
  const [viewMonth, setViewMonth] = useState(valueJ.month);
+  const [mode, setMode] = useState<'day' | 'month' | 'year'>('day');
+  // ابتدای بازه‌ی ۱۲تایی سال در نمای انتخاب سال
+  const [yearRangeStart, setYearRangeStart] = useState(valueJ.year - (valueJ.year % 12));
+
+  const faYear = (y: number) => y.toLocaleString('fa-IR', { useGrouping: false });

  useEffect(() => {
    function handler(e: MouseEvent) {
@@ -119,52 +126,122 @@ export default function PersianCalendar({ value, onChange, onClose }: Props) {
    }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
-        <button onClick={nextMonth} style={navBtnStyle}>
+        <button
+          onClick={mode === 'year' ? () => setYearRangeStart(s => s - 12) : nextMonth}
+          style={{ ...navBtnStyle, visibility: mode === 'month' ? 'hidden' : 'visible' }}
+        >
          <ChevronRightIcon style={{ width: 16, height: 16 }} />
        </button>
-        <span style={{ fontWeight: 700, fontSize: 14 }}>
-          {JALALI_MONTHS[viewMonth - 1]} {viewYear.toLocaleString('fa-IR')}
-        </span>
-        <button onClick={prevMonth} style={navBtnStyle}>
+
+        {mode === 'day' && (
+          <span style={{ fontWeight: 700, fontSize: 14, display: 'flex', gap: 6 }}>
+            <span
+              onClick={enableYearPicker ? () => setMode('month') : undefined}
+              style={{ cursor: enableYearPicker ? 'pointer' : 'default', color: enableYearPicker ? 'var(--primary)' : 'inherit' }}
+            >
+              {JALALI_MONTHS[viewMonth - 1]}
+            </span>
+            <span
+              onClick={enableYearPicker ? () => { setYearRangeStart(viewYear - (viewYear % 12)); setMode('year'); } : undefined}
+              style={{ cursor: enableYearPicker ? 'pointer' : 'default', color: enableYearPicker ? 'var(--primary)' : 'inherit' }}
+            >
+              {faYear(viewYear)}
+            </span>
+          </span>
+        )}
+        {mode === 'month' && <span style={{ fontWeight: 700, fontSize: 14 }}>انتخاب ماه {faYear(viewYear)}</span>}
+        {mode === 'year' && (
+          <span style={{ fontWeight: 700, fontSize: 14 }}>
+            {faYear(yearRangeStart)} - {faYear(yearRangeStart + 11)}
+          </span>
+        )}
+
+        <button
+          onClick={mode === 'year' ? () => setYearRangeStart(s => s + 12) : prevMonth}
+          style={{ ...navBtnStyle, visibility: mode === 'month' ? 'hidden' : 'visible' }}
+        >
          <ChevronLeftIcon style={{ width: 16, height: 16 }} />
        </button>
      </div>

-      {/* Week day headers */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2, marginBottom: 4 }}>
-        {WEEK_DAYS.map(d => (
-          <div key={d} style={{ textAlign: 'center', fontSize: 11, color: 'var(--text-3)', fontWeight: 600, padding: '2px 0' }}>
-            {d}
+      {/* Day view */}
+      {mode === 'day' && (
+        <>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2, marginBottom: 4 }}>
+            {WEEK_DAYS.map(d => (
+              <div key={d} style={{ textAlign: 'center', fontSize: 11, color: 'var(--text-3)', fontWeight: 600, padding: '2px 0' }}>
+                {d}
+              </div>
+            ))}
          </div>
-        ))}
-      </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }}>
+            {cells.map((day, i) => {
+              if (!day) return <div key={i} />;
+              const sel = isSelected(day);
+              const tod = isToday(day) && !sel;
+              return (
+                <button
+                  key={i}
+                  onClick={() => selectDay(day)}
+                  style={{
+                    width: 32, height: 32, borderRadius: '50%', fontSize: 12,
+                    border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    fontWeight: sel || tod ? 700 : 400,
+                    background: sel ? 'var(--primary)' : tod ? 'var(--surface-2)' : 'transparent',
+                    color: sel ? '#fff' : tod ? 'var(--text)' : 'var(--text)',
+                    transition: 'background 0.1s',
+                  }}
+                  onMouseEnter={e => { if (!sel && !tod) (e.currentTarget as HTMLButtonElement).style.background = 'var(--surface-2)'; }}
+                  onMouseLeave={e => { if (!sel && !tod) (e.currentTarget as HTMLButtonElement).style.background = 'transparent'; }}
+                >
+                  {day.toLocaleString('fa-IR')}
+                </button>
+              );
+            })}
+          </div>
+        </>
+      )}

-      {/* Days grid */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }}>
-        {cells.map((day, i) => {
-          if (!day) return <div key={i} />;
-          const sel = isSelected(day);
-          const tod = isToday(day) && !sel;
-          return (
-            <button
-              key={i}
-              onClick={() => selectDay(day)}
-              style={{
-                width: 32, height: 32, borderRadius: '50%', fontSize: 12,
-                border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                fontWeight: sel || tod ? 700 : 400,
-                background: sel ? 'var(--primary)' : tod ? 'var(--surface-2)' : 'transparent',
-                color: sel ? '#fff' : tod ? 'var(--text)' : 'var(--text)',
-                transition: 'background 0.1s',
-              }}
-              onMouseEnter={e => { if (!sel && !tod) (e.currentTarget as HTMLButtonElement).style.background = 'var(--surface-2)'; }}
-              onMouseLeave={e => { if (!sel && !tod) (e.currentTarget as HTMLButtonElement).style.background = 'transparent'; }}
-            >
-              {day.toLocaleString('fa-IR')}
-            </button>
-          );
-        })}
-      </div>
+      {/* Month view */}
+      {mode === 'month' && (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
+          {JALALI_MONTHS.map((mName, idx) => {
+            const m = idx + 1;
+            const active = m === viewMonth;
+            return (
+              <button
+                key={m}
+                onClick={() => { setViewMonth(m); setMode('day'); }}
+                style={{ ...gridItemStyle, background: active ? 'var(--primary)' : 'transparent', color: active ? '#fff' : 'var(--text)' }}
+                onMouseEnter={e => { if (!active) (e.currentTarget as HTMLButtonElement).style.background = 'var(--surface-2)'; }}
+                onMouseLeave={e => { if (!active) (e.currentTarget as HTMLButtonElement).style.background = 'transparent'; }}
+              >
+                {mName}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Year view */}
+      {mode === 'year' && (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
+          {Array.from({ length: 12 }, (_, i) => yearRangeStart + i).map(y => {
+            const active = y === viewYear;
+            return (
+              <button
+                key={y}
+                onClick={() => { setViewYear(y); setMode('month'); }}
+                style={{ ...gridItemStyle, background: active ? 'var(--primary)' : 'transparent', color: active ? '#fff' : 'var(--text)' }}
+                onMouseEnter={e => { if (!active) (e.currentTarget as HTMLButtonElement).style.background = 'var(--surface-2)'; }}
+                onMouseLeave={e => { if (!active) (e.currentTarget as HTMLButtonElement).style.background = 'transparent'; }}
+              >
+                {faYear(y)}
+              </button>
+            );
+          })}
+        </div>
+      )}
    </div>
  );
 }
@@ -174,3 +251,9 @@ const navBtnStyle: React.CSSProperties = {
  color: 'var(--text-2)', padding: 4, borderRadius: 'var(--r-sm)',
  display: 'flex', alignItems: 'center',
 };
+
+const gridItemStyle: React.CSSProperties = {
+  height: 40, borderRadius: 'var(--r-sm)', fontSize: 13, fontWeight: 500,
+  border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+  transition: 'background 0.1s',
+};
@@ -9,9 +9,11 @@ interface Props {
  placeholder?: string;
  height?: number;
  minWidth?: number;
+  /** انتخاب سال→ماه→روز را فعال می‌کند (پیش‌فرض خاموش). */
+  enableYearPicker?: boolean;
 }

-export default function PersianDatePicker({ value, onChange, placeholder = 'انتخاب تاریخ', height = 38, minWidth = 148 }: Props) {
+export default function PersianDatePicker({ value, onChange, placeholder = 'انتخاب تاریخ', height = 38, minWidth = 148, enableYearPicker = false }: Props) {
  const [open, setOpen] = useState(false);

  return (
@@ -43,6 +45,7 @@ export default function PersianDatePicker({ value, onChange, placeholder = 'ان
          value={value}
          onChange={(v) => { onChange(v); setOpen(false); }}
          onClose={() => setOpen(false)}
+          enableYearPicker={enableYearPicker}
        />
      )}
    </div>
@@ -4,6 +4,18 @@ import { toast } from 'sonner';
 import { CheckBadgeIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
+import PersianDatePicker from '../components/ui/PersianDatePicker';
+
+// تبدیل تاریخ میلادی ISO (YYYY-MM-DD) به شمسی Y/m/d برای استعلام api.ir
+function toJalali(iso: string): string {
+  if (!iso) return '';
+  const parts = new Intl.DateTimeFormat('en-US-u-ca-persian-nu-latn', {
+    year: 'numeric', month: '2-digit', day: '2-digit',
+  }).formatToParts(new Date(iso + 'T00:00:00'));
+  const get = (t: string) => parts.find(p => p.type === t)?.value ?? '';
+  const y = get('year'), m = get('month'), d = get('day');
+  return y && m && d ? `${y}/${m}/${d}` : '';
+}

 interface IbanItem {
  id: string;
@@ -81,10 +93,9 @@ export default function RepresentationProfilePage() {

  const submitIban = () => {
    if (!iban.trim()) { toast.error('شماره شبا را وارد کنید'); return; }
-    if (!/^\d{4}[\/\-.]\d{1,2}[\/\-.]\d{1,2}$/.test(birthDate.trim())) {
-      toast.error('تاریخ تولد را به صورت 1370/01/01 وارد کنید'); return;
-    }
-    addIbanMut.mutate({ iban: iban.trim(), birth_date: birthDate.trim() });
+    const jalali = toJalali(birthDate);
+    if (!jalali) { toast.error('تاریخ تولد را انتخاب کنید'); return; }
+    addIbanMut.mutate({ iban: iban.trim(), birth_date: jalali });
  };

  return (
@@ -171,10 +182,13 @@ export default function RepresentationProfilePage() {
              onChange={(e) => setIban(e.target.value)}
              style={{ width: 320, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, boxSizing: 'border-box', fontFamily: 'monospace' }}
            />
-            <input
-              type="text" dir="ltr" value={birthDate} placeholder="تاریخ تولد ۱۳۷۰/۰۱/۰۱"
-              onChange={(e) => setBirthDate(e.target.value)}
-              style={{ width: 180, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, boxSizing: 'border-box', textAlign: 'center' }}
+            <PersianDatePicker
+              value={birthDate}
+              onChange={setBirthDate}
+              placeholder="تاریخ تولد"
+              height={38}
+              minWidth={170}
+              enableYearPicker
            />
            <button className="btn primary" onClick={submitIban} disabled={addIbanMut.isPending} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <PlusIcon style={{ width: 16, height: 16 }} />