22 ExportFormat ,
33 ExportOptions as ExportOptionsType ,
44 SortOrder ,
5+ DateFormat ,
56} from "../types" ;
67import { ExportService } from "../services/exportService" ;
78import {
@@ -15,6 +16,10 @@ import { Checkbox } from "./ui/checkbox";
1516import { Tooltip , TooltipTrigger , TooltipContent } from "./ui/tooltip" ;
1617import { Label } from "./ui/label" ;
1718import { Info } from "lucide-react" ;
19+ import {
20+ getDateFormatDisplayName ,
21+ getAllDateFormats ,
22+ } from "../utils/dateFormatter" ;
1823
1924interface ExportOptionsProps {
2025 exportFormat : ExportFormat ;
@@ -96,6 +101,14 @@ export default function ExportOptions({
96101 onOptionsChange ( newOptions ) ;
97102 } ;
98103
104+ const handleDateFormatChange = ( value : DateFormat ) => {
105+ const newOptions = {
106+ ...exportOptions ,
107+ dateFormat : value ,
108+ } ;
109+ onOptionsChange ( newOptions ) ;
110+ } ;
111+
99112 return (
100113 < div className = "space-y-4" >
101114 < div >
@@ -170,6 +183,32 @@ export default function ExportOptions({
170183 </ SelectContent >
171184 </ Select >
172185 </ div >
186+
187+ { /* Date Format */ }
188+ < div >
189+ < Label className = "block text-sm font-medium mb-2" >
190+ Date Format
191+ </ Label >
192+ < Select
193+ value = { exportOptions . dateFormat || DateFormat . ISO_FORMAT }
194+ onValueChange = { handleDateFormatChange }
195+ >
196+ < SelectTrigger className = "w-full" >
197+ < SelectValue placeholder = "Select date format" >
198+ { getDateFormatDisplayName (
199+ exportOptions . dateFormat || DateFormat . ISO_FORMAT
200+ ) }
201+ </ SelectValue >
202+ </ SelectTrigger >
203+ < SelectContent >
204+ { getAllDateFormats ( ) . map ( ( format ) => (
205+ < SelectItem key = { format } value = { format } >
206+ { getDateFormatDisplayName ( format ) }
207+ </ SelectItem >
208+ ) ) }
209+ </ SelectContent >
210+ </ Select >
211+ </ div >
173212 </ div >
174213 </ div >
175214
0 commit comments