feat(WEB): DatePicker 공통화 및 공정관리/작업자화면 대폭 개선

DatePicker 공통화:
- date-picker.tsx 공통 컴포넌트 신규 추가
- 전체 폼 컴포넌트 DatePicker 통일 적용 (50+ 파일)
- DateRangeSelector 개선

공정관리:
- RuleModal 대폭 리팩토링 (-592줄 → 간소화)
- ProcessForm, StepForm 개선
- ProcessDetail 수정, actions 확장

작업자화면:
- WorkerScreen 기능 대폭 확장 (+543줄)
- WorkItemCard 개선
- types 확장

회계/인사/영업/품질:
- BadDebtDetail, BillDetail, DepositDetail, SalesDetail 등 DatePicker 적용
- EmployeeForm, VacationDialog 등 DatePicker 적용
- OrderRegistration, QuoteRegistration DatePicker 적용
- InspectionCreate, InspectionDetail DatePicker 적용

공사관리/CEO대시보드:
- BiddingDetail, ContractDetail, HandoverReport 등 DatePicker 적용
- ScheduleDetailModal, TodayIssueSection 개선

기타:
- WorkOrderCreate/Edit/Detail/List 개선
- ShipmentCreate/Edit, ReceivingDetail 개선
- calendar, calendarEvents 수정
- datepicker 마이그레이션 체크리스트 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/business/CEODashboard/modals/ScheduleDetailModal.tsx

@@ -6,6 +6,7 @@ import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Checkbox } from '@/components/ui/checkbox';
 import { TimePicker } from '@/components/ui/time-picker';
+import { DatePicker } from '@/components/ui/date-picker';
 import {
   Dialog,
   DialogContent,
@@ -172,17 +173,17 @@ export function ScheduleDetailModal({
               기간
             </label>
             <div className="flex-1 flex items-center gap-2">
-              <Input
-                type="date"
+              <DatePicker
                 value={formData.startDate}
-                onChange={(e) => handleFieldChange('startDate', e.target.value)}
+                onChange={(value) => handleFieldChange('startDate', value)}
+                size="sm"
                 className="flex-1"
               />
               <span className="text-gray-400 px-1">~</span>
-              <Input
-                type="date"
+              <DatePicker
                 value={formData.endDate}
-                onChange={(e) => handleFieldChange('endDate', e.target.value)}
+                onChange={(value) => handleFieldChange('endDate', value)}
+                size="sm"
                 className="flex-1"
               />
             </div>

src/components/business/CEODashboard/sections/TodayIssueSection.tsx

@@ -6,7 +6,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import {
   Select,
   SelectContent,
@@ -204,9 +204,8 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
   const yesterday = useMemo(() => getYesterday(), []);
   const isNextDisabled = isSameDay(pastDate, yesterday);
 
-  // 날짜 input 직접 선택
-  const handleDateInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value; // yyyy-MM-dd
+  // DatePicker 날짜 선택
+  const handleDatePickerChange = useCallback((value: string) => {
     if (!value) return;
     const selected = new Date(value + 'T00:00:00');
     if (isNaN(selected.getTime())) return;
@@ -296,24 +295,27 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
           {activeTab === 'past' && (
             <div className="flex items-center gap-1 shrink-0">
               <Button
-                variant="ghost"
+                variant="outline"
                 size="sm"
-                className="h-7 w-7 p-0"
+                className="h-8 px-2"
                 onClick={handlePrevDate}
               >
                 <ChevronLeft className="h-4 w-4" />
               </Button>
-              <Input
-                type="date"
+              <DatePicker
                 value={formatDateParam(pastDate)}
-                max={formatDateParam(yesterday)}
-                onChange={handleDateInputChange}
-                className="w-[160px] h-8 text-sm text-center"
+                maxDate={yesterday}
+                onChange={handleDatePickerChange}
+                size="sm"
+                displayFormat="yyyy년 MM월 dd일"
+                className="w-[170px]"
+                align="start"
+                sideOffset={4}
               />
               <Button
-                variant="ghost"
+                variant="outline"
                 size="sm"
-                className="h-7 w-7 p-0"
+                className="h-8 px-2"
                 onClick={handleNextDate}
                 disabled={isNextDisabled}
               >

src/components/business/construction/bidding/BiddingDetailForm.tsx

@@ -3,6 +3,7 @@
 import { useState, useCallback, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -184,10 +185,9 @@ export default function BiddingDetailForm({
                 {isViewMode ? (
                   <Input value={formData.biddingDate} disabled className="bg-muted" />
                 ) : (
-                  <Input
-                    type="date"
+                  <DatePicker
                     value={formData.biddingDate}
-                    onChange={(e) => handleFieldChange('biddingDate', e.target.value)}
+                    onChange={(date) => handleFieldChange('biddingDate', date)}
                   />
                 )}
               </div>
@@ -210,21 +210,15 @@ export default function BiddingDetailForm({
                     />
                   ) : (
                     <>
-                      <Input
-                        type="date"
+                      <DatePicker
                         value={formData.constructionStartDate}
-                        onChange={(e) =>
-                          handleFieldChange('constructionStartDate', e.target.value)
-                        }
+                        onChange={(date) => handleFieldChange('constructionStartDate', date)}
                         className="flex-1"
                       />
                       <span>~</span>
-                      <Input
-                        type="date"
+                      <DatePicker
                         value={formData.constructionEndDate}
-                        onChange={(e) =>
-                          handleFieldChange('constructionEndDate', e.target.value)
-                        }
+                        onChange={(date) => handleFieldChange('constructionEndDate', date)}
                         className="flex-1"
                       />
                     </>
@@ -313,10 +307,9 @@ export default function BiddingDetailForm({
                     className="bg-muted"
                   />
                 ) : (
-                  <Input
-                    type="date"
+                  <DatePicker
                     value={formData.submissionDate}
-                    onChange={(e) => handleFieldChange('submissionDate', e.target.value)}
+                    onChange={(date) => handleFieldChange('submissionDate', date)}
                   />
                 )}
               </div>
@@ -331,10 +324,9 @@ export default function BiddingDetailForm({
                     className="bg-muted"
                   />
                 ) : (
-                  <Input
-                    type="date"
+                  <DatePicker
                     value={formData.confirmDate}
-                    onChange={(e) => handleFieldChange('confirmDate', e.target.value)}
+                    onChange={(date) => handleFieldChange('confirmDate', date)}
                   />
                 )}
               </div>

src/components/business/construction/contract/ContractDetailForm.tsx

@@ -8,6 +8,7 @@ import { FileDropzone } from '@/components/ui/file-dropzone';
 import { FileList, type NewFile, type ExistingFile } from '@/components/ui/file-list';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -297,10 +298,9 @@ export default function ContractDetailForm({
               {/* 계약일자 */}
               <div className="space-y-2">
                 <Label>계약일자</Label>
-                <Input
-                  type="date"
+                <DatePicker
                   value={formData.contractDate}
-                  onChange={(e) => handleFieldChange('contractDate', e.target.value)}
+                  onChange={(date) => handleFieldChange('contractDate', date)}
                   disabled={isViewMode}
                 />
               </div>
@@ -319,17 +319,15 @@ export default function ContractDetailForm({
               <div className="space-y-2">
                 <Label>계약기간</Label>
                 <div className="flex items-center gap-2">
-                  <Input
-                    type="date"
+                  <DatePicker
                     value={formData.contractStartDate}
-                    onChange={(e) => handleFieldChange('contractStartDate', e.target.value)}
+                    onChange={(date) => handleFieldChange('contractStartDate', date)}
                     disabled={isViewMode}
                   />
                   <span>~</span>
-                  <Input
-                    type="date"
+                  <DatePicker
                     value={formData.contractEndDate}
-                    onChange={(e) => handleFieldChange('contractEndDate', e.target.value)}
+                    onChange={(date) => handleFieldChange('contractEndDate', date)}
                     disabled={isViewMode}
                   />
                 </div>

src/components/business/construction/estimates/sections/EstimateInfoSection.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -162,12 +163,10 @@ export function EstimateInfoSection({
             </div>
             <div className="space-y-2">
               <Label className="text-sm font-medium text-gray-700">입찰일자</Label>
-              <Input
-                type="date"
+              <DatePicker
                 value={formData.bidInfo.bidDate}
-                onChange={(e) => onBidInfoChange('bidDate', e.target.value)}
+                onChange={(date) => onBidInfoChange('bidDate', date)}
                 disabled={isViewMode}
-                className={isViewMode ? 'bg-gray-50' : 'bg-white'}
               />
             </div>
             <div className="space-y-2">
@@ -182,20 +181,16 @@ export function EstimateInfoSection({
             <div className="space-y-2">
               <Label className="text-sm font-medium text-gray-700">공사기간</Label>
               <div className="flex items-center gap-2">
-                <Input
-                  type="date"
+                <DatePicker
                   value={formData.bidInfo.constructionStartDate}
-                  onChange={(e) => onBidInfoChange('constructionStartDate', e.target.value)}
+                  onChange={(date) => onBidInfoChange('constructionStartDate', date)}
                   disabled={isViewMode}
-                  className={isViewMode ? 'bg-gray-50' : 'bg-white'}
                 />
                 <span className="text-muted-foreground">~</span>
-                <Input
-                  type="date"
+                <DatePicker
                   value={formData.bidInfo.constructionEndDate}
-                  onChange={(e) => onBidInfoChange('constructionEndDate', e.target.value)}
+                  onChange={(date) => onBidInfoChange('constructionEndDate', date)}
                   disabled={isViewMode}
-                  className={isViewMode ? 'bg-gray-50' : 'bg-white'}
                 />
               </div>
             </div>

src/components/business/construction/handover-report/HandoverReportDetailForm.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { Plus, X, Eye, Stamp } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -268,10 +269,9 @@ export default function HandoverReportDetailForm({
               {/* 계약일자 */}
               <div className="space-y-2">
                 <Label>계약일자</Label>
-                <Input
-                  type="date"
+                <DatePicker
                   value={formData.contractDate}
-                  onChange={(e) => handleFieldChange('contractDate', e.target.value)}
+                  onChange={(date) => handleFieldChange('contractDate', date)}
                   disabled={isViewMode}
                 />
               </div>
@@ -290,17 +290,15 @@ export default function HandoverReportDetailForm({
               <div className="space-y-2">
                 <Label>계약기간</Label>
                 <div className="flex items-center gap-2">
-                  <Input
-                    type="date"
+                  <DatePicker
                     value={formData.contractStartDate}
-                    onChange={(e) => handleFieldChange('contractStartDate', e.target.value)}
+                    onChange={(date) => handleFieldChange('contractStartDate', date)}
                     disabled={isViewMode}
                   />
                   <span>~</span>
-                  <Input
-                    type="date"
+                  <DatePicker
                     value={formData.contractEndDate}
-                    onChange={(e) => handleFieldChange('contractEndDate', e.target.value)}
+                    onChange={(date) => handleFieldChange('contractEndDate', date)}
                     disabled={isViewMode}
                   />
                 </div>

src/components/business/construction/issue-management/IssueDetailForm.tsx

@@ -6,6 +6,7 @@ import { getTodayString } from '@/utils/date';
 import { Mic, X, Upload } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import {
@@ -406,11 +407,9 @@ export default function IssueDetailForm({ issue, mode = 'view' }: IssueDetailFor
               {/* 이슈보고일 */}
               <div className="space-y-2">
                 <Label htmlFor="reportDate">이슈보고일</Label>
-                <Input
-                  id="reportDate"
-                  type="date"
+                <DatePicker
                   value={formData.reportDate}
-                  onChange={handleInputChange('reportDate')}
+                  onChange={(date) => handleInputChange('reportDate')({ target: { value: date } } as React.ChangeEvent<HTMLInputElement>)}
                   disabled={isReadOnly}
                 />
               </div>
@@ -418,11 +417,9 @@ export default function IssueDetailForm({ issue, mode = 'view' }: IssueDetailFor
               {/* 이슈해결일 */}
               <div className="space-y-2">
                 <Label htmlFor="resolvedDate">이슈해결일</Label>
-                <Input
-                  id="resolvedDate"
-                  type="date"
+                <DatePicker
                   value={formData.resolvedDate}
-                  onChange={handleInputChange('resolvedDate')}
+                  onChange={(date) => handleInputChange('resolvedDate')({ target: { value: date } } as React.ChangeEvent<HTMLInputElement>)}
                   disabled={isReadOnly}
                 />
               </div>

src/components/business/construction/management/ConstructionDetailClient.tsx

@@ -6,6 +6,7 @@ import { getTodayString, formatDate } from '@/utils/date';
 import { Plus, Trash2, FileText, Upload, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
@@ -399,13 +400,11 @@ export default function ConstructionDetailClient({ id, mode }: ConstructionDetai
                           {isViewMode ? (
                             <span>{worker.workDate || '-'}</span>
                           ) : (
-                            <Input
-                              type="date"
+                            <DatePicker
                               value={worker.workDate}
-                              onChange={(e) =>
-                                handleWorkerInfoChange(worker.id, 'workDate', e.target.value)
+                              onChange={(date) =>
+                                handleWorkerInfoChange(worker.id, 'workDate', date)
                               }
-                              className="w-full"
                             />
                           )}
                         </td>

src/components/business/construction/management/ProjectEndDialog.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import {
@@ -112,9 +113,7 @@ export default function ProjectEndDialog({
           {/* 결선작업일 - 읽기전용 */}
           <div className="grid gap-2">
             <Label htmlFor="workDate">결선작업일</Label>
-            <Input
-              id="workDate"
-              type="date"
+            <DatePicker
               value={formData.workDate}
               disabled
               className="bg-muted"
@@ -124,12 +123,10 @@ export default function ProjectEndDialog({
           {/* 결선완료일 - 입력 */}
           <div className="grid gap-2">
             <Label htmlFor="completionDate">결선완료일</Label>
-            <Input
-              id="completionDate"
-              type="date"
+            <DatePicker
               value={formData.completionDate}
-              onChange={(e) =>
-                setFormData((prev) => ({ ...prev, completionDate: e.target.value }))
+              onChange={(date) =>
+                setFormData((prev) => ({ ...prev, completionDate: date }))
               }
             />
           </div>

src/components/business/construction/order-management/cards/ConstructionDetailCard.tsx

@@ -2,6 +2,7 @@
 
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   Select,
@@ -60,19 +61,16 @@ export function ConstructionDetailCard({
               시공완료일
             </Label>
             <div className="flex items-center gap-2">
-              <Input
-                type="date"
+              <DatePicker
                 value={formData.constructionStartDate}
-                onChange={(e) => onFieldChange('constructionStartDate', e.target.value)}
+                onChange={(date) => onFieldChange('constructionStartDate', date)}
                 disabled={isViewMode}
-                required
                 className="flex-1"
               />
               <span className="text-muted-foreground">~</span>
-              <Input
-                type="date"
+              <DatePicker
                 value={formData.constructionEndDate}
-                onChange={(e) => onFieldChange('constructionEndDate', e.target.value)}
+                onChange={(date) => onFieldChange('constructionEndDate', date)}
                 disabled={isViewMode}
                 className="flex-1"
               />

src/components/business/construction/order-management/tables/OrderDetailItemTable.tsx

@@ -3,6 +3,7 @@
 import { Plus, Trash2, Image as ImageIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { NumberInput } from '@/components/ui/number-input';
 import { QuantityInput } from '@/components/ui/quantity-input';
@@ -219,13 +220,12 @@ export function OrderDetailItemTable({
                     </TableCell>
                     <TableCell>
                       {isEditMode ? (
-                        <Input
-                          type="date"
+                        <DatePicker
                           value={item.constructionStartDate}
-                          onChange={(e) =>
-                            onItemChange(item.id, 'constructionStartDate', e.target.value)
+                          onChange={(date) =>
+                            onItemChange(item.id, 'constructionStartDate', date)
                           }
-                          className="h-8"
+                          size="sm"
                         />
                       ) : (
                         item.constructionStartDate || '-'
@@ -233,13 +233,12 @@ export function OrderDetailItemTable({
                     </TableCell>
                     <TableCell>
                       {isEditMode ? (
-                        <Input
-                          type="date"
+                        <DatePicker
                           value={item.constructionEndDate}
-                          onChange={(e) =>
-                            onItemChange(item.id, 'constructionEndDate', e.target.value)
+                          onChange={(date) =>
+                            onItemChange(item.id, 'constructionEndDate', date)
                           }
-                          className="h-8"
+                          size="sm"
                         />
                       ) : (
                         item.constructionEndDate || '-'
@@ -360,13 +359,12 @@ export function OrderDetailItemTable({
                     </TableCell>
                     <TableCell>
                       {isEditMode ? (
-                        <Input
-                          type="date"
+                        <DatePicker
                           value={item.orderDate}
-                          onChange={(e) =>
-                            onItemChange(item.id, 'orderDate', e.target.value)
+                          onChange={(date) =>
+                            onItemChange(item.id, 'orderDate', date)
                           }
-                          className="h-8"
+                          size="sm"
                         />
                       ) : (
                         item.orderDate || '-'
@@ -374,13 +372,12 @@ export function OrderDetailItemTable({
                     </TableCell>
                     <TableCell>
                       {isEditMode ? (
-                        <Input
-                          type="date"
+                        <DatePicker
                           value={item.plannedDeliveryDate}
-                          onChange={(e) =>
-                            onItemChange(item.id, 'plannedDeliveryDate', e.target.value)
+                          onChange={(date) =>
+                            onItemChange(item.id, 'plannedDeliveryDate', date)
                           }
-                          className="h-8"
+                          size="sm"
                         />
                       ) : (
                         item.plannedDeliveryDate || '-'
@@ -388,13 +385,12 @@ export function OrderDetailItemTable({
                     </TableCell>
                     <TableCell>
                       {isEditMode ? (
-                        <Input
-                          type="date"
+                        <DatePicker
                           value={item.actualDeliveryDate}
-                          onChange={(e) =>
-                            onItemChange(item.id, 'actualDeliveryDate', e.target.value)
+                          onChange={(date) =>
+                            onItemChange(item.id, 'actualDeliveryDate', date)
                           }
-                          className="h-8"
+                          size="sm"
                         />
                       ) : (
                         item.actualDeliveryDate || '-'

src/components/business/construction/site-briefings/SiteBriefingForm.tsx

@@ -7,6 +7,7 @@ import { FileDropzone } from '@/components/ui/file-dropzone';
 import { FileList, type NewFile, type ExistingFile } from '@/components/ui/file-list';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -751,20 +752,16 @@ export default function SiteBriefingForm({ mode, briefingId, initialData }: Site
               <div className="space-y-2">
                 <Label className="text-sm font-medium text-gray-700">공사기간</Label>
                 <div className="flex items-center gap-2">
-                  <Input
-                    type="date"
+                  <DatePicker
                     value={formData.constructionStartDate}
-                    onChange={(e) => handleChange('constructionStartDate', e.target.value)}
+                    onChange={(date) => handleChange('constructionStartDate', date)}
                     disabled={isViewMode}
-                    className="bg-white"
                   />
                   <span className="text-muted-foreground">~</span>
-                  <Input
-                    type="date"
+                  <DatePicker
                     value={formData.constructionEndDate}
-                    onChange={(e) => handleChange('constructionEndDate', e.target.value)}
+                    onChange={(date) => handleChange('constructionEndDate', date)}
                     disabled={isViewMode}
-                    className="bg-white"
                   />
                 </div>
               </div>

src/components/business/construction/structure-review/StructureReviewDetailForm.tsx

@@ -11,6 +11,7 @@ import { FileDropzone } from '@/components/ui/file-dropzone';
 import { FileList, type NewFile, type ExistingFile } from '@/components/ui/file-list';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import {
   Select,
@@ -310,11 +311,9 @@ export default function StructureReviewDetailForm({
                 {/* 구조검토 의뢰일 */}
                 <div className="space-y-2">
                   <Label htmlFor="requestDate">구조검토 의뢰일</Label>
-                  <Input
-                    id="requestDate"
-                    type="date"
+                  <DatePicker
                     value={formData.requestDate}
-                    onChange={handleInputChange('requestDate')}
+                    onChange={(date) => handleInputChange('requestDate')({ target: { value: date } } as React.ChangeEvent<HTMLInputElement>)}
                     disabled={isViewMode}
                   />
                 </div>
@@ -322,11 +321,9 @@ export default function StructureReviewDetailForm({
                 {/* 구조검토 완료일 */}
                 <div className="space-y-2">
                   <Label htmlFor="completionDate">구조검토 완료일</Label>
-                  <Input
-                    id="completionDate"
-                    type="date"
+                  <DatePicker
                     value={formData.completionDate || ''}
-                    onChange={handleInputChange('completionDate')}
+                    onChange={(date) => handleInputChange('completionDate')({ target: { value: date } } as React.ChangeEvent<HTMLInputElement>)}
                     disabled={isViewMode}
                   />
                 </div>