4.18.0: Улучшен календарь выбора даты

play-life-web/src/components/TaskList.jsx

@@ -1,8 +1,12 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { useAuth } from './auth/AuthContext'
 import TaskDetail from './TaskDetail'
 import LoadingError from './LoadingError'
 import Toast from './Toast'
+import { DayPicker } from 'react-day-picker'
+import { ru } from 'react-day-picker/locale'
+import 'react-day-picker/style.css'
 import './TaskList.css'
 
 const API_URL = '/api/tasks'
@@ -19,7 +23,6 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
   const [isPostponing, setIsPostponing] = useState(false)
   const [toast, setToast] = useState(null)
   const [searchQuery, setSearchQuery] = useState('')
-  const dateInputRef = useRef(null)
 
   useEffect(() => {
     if (data) {
@@ -368,6 +371,26 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
     setPostponeDate('')
   }
 
+  const handleDateSelect = (date) => {
+    if (!date) return
+    
+    // Преобразуем дату в формат YYYY-MM-DD
+    const formattedDate = formatDateToLocal(date)
+    setPostponeDate(formattedDate)
+    
+    // Применяем дату и закрываем модальное окно
+    if (selectedTaskForPostpone) {
+      handlePostponeSubmitWithDate(formattedDate)
+    }
+  }
+
+  const handleDayClick = (day, modifiers) => {
+    // Обрабатываем клик даже если дата уже выбрана
+    if (day && !modifiers.disabled) {
+      handleDateSelect(day)
+    }
+  }
+
   const handleTodayClick = () => {
     const today = new Date()
     today.setHours(0, 0, 0, 0)
@@ -985,7 +1008,7 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
         const isToday = nextShowAtStr === todayStr
         const isTomorrow = nextShowAtStr === tomorrowStr
         
-        return (
+        const modalContent = (
           <div className="task-postpone-modal-overlay" onClick={handlePostponeClose}>
             <div className="task-postpone-modal" onClick={(e) => e.stopPropagation()}>
               <div className="task-postpone-modal-header">
@@ -995,41 +1018,19 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
                 </button>
               </div>
               <div className="task-postpone-modal-content">
-                <div className="task-postpone-input-group">
-                  <input
-                    ref={dateInputRef}
-                    type="date"
-                    value={postponeDate}
-                    onChange={(e) => setPostponeDate(e.target.value)}
-                    className="task-postpone-input"
-                    min={new Date().toISOString().split('T')[0]}
+                <div className="task-postpone-calendar">
+                  <DayPicker
+                    mode="single"
+                    selected={postponeDate ? new Date(postponeDate + 'T00:00:00') : undefined}
+                    onSelect={handleDateSelect}
+                    onDayClick={handleDayClick}
+                    disabled={{ before: (() => {
+                      const today = new Date()
+                      today.setHours(0, 0, 0, 0)
+                      return today
+                    })() }}
+                    locale={ru}
                   />
-                  <div 
-                    className="task-postpone-display-date"
-                    onClick={() => {
-                      // Открываем календарь при клике
-                      if (dateInputRef.current) {
-                        if (typeof dateInputRef.current.showPicker === 'function') {
-                          dateInputRef.current.showPicker()
-                        } else {
-                          // Fallback для браузеров без showPicker
-                          dateInputRef.current.focus()
-                          dateInputRef.current.click()
-                        }
-                      }
-                    }}
-                  >
-                    {postponeDate ? formatDateForDisplay(postponeDate) : 'Выберите дату'}
-                  </div>
-                  {postponeDate && (
-                    <button
-                      onClick={handlePostponeSubmit}
-                      disabled={isPostponing || !postponeDate}
-                      className="task-postpone-submit-checkmark"
-                    >
-                      ✓
-                    </button>
-                  )}
                 </div>
                 <div className="task-postpone-quick-buttons">
                   {!isToday && (
@@ -1055,6 +1056,10 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
             </div>
           </div>
         )
+        
+        return typeof document !== 'undefined'
+          ? createPortal(modalContent, document.body)
+          : modalContent
       })()}
     </div>
   )