blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: override native browser date input format to explicitly show DD/MM/YY in custom period selector

Browse Source
This commit is contained in:
Cauê Faleiros
2026-05-07 15:55:43 -03:00
parent df5f60e540
commit 802558510f
1 changed files with 43 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/DateRangePicker.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import { Calendar, RefreshCw, ChevronDown } from 'lucide-react';
import type { DateRange } from '../types';
@@ -33,6 +33,8 @@ const REFRESH_OPTIONS = [
const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange, refreshInterval, setRefreshInterval, onManualRefresh }) => {
const [isPresetOpen, setIsPresetOpen] = useState(false);
const startRef = useRef<HTMLInputElement>(null);
const endRef = useRef<HTMLInputElement>(null);
const formatShortDate = (date: Date) => {
return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit' });
@@ -66,6 +68,20 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
}
};
const openPicker = (ref: React.RefObject<HTMLInputElement | null>) => {
if (ref.current) {
try {
if ('showPicker' in HTMLInputElement.prototype) {
ref.current.showPicker();
} else {
ref.current.focus();
}
} catch (e) {
ref.current.focus();
}
}
};
return (
<div className="flex flex-wrap items-center gap-3">
{/* Date Presets Dropdown */}
@@ -88,24 +104,38 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
<div className="flex flex-col gap-1.5">
<div className="flex items-center justify-between gap-2">
<span className="text-xs font-medium text-dark-text w-6">De:</span>
<div
className="relative bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus-within:border-brand-primary w-full cursor-pointer overflow-hidden flex items-center h-6"
onClick={() => openPicker(startRef)}
>
<span className="w-full text-center">{formatShortDate(dateRange.start)}</span>
<input
ref={startRef}
type="date"
value={formatDateForInput(dateRange.start)}
onChange={handleStartChange}
className="bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary w-full cursor-pointer"
className="absolute inset-0 opacity-0 cursor-pointer"
/>
</div>
</div>
<div className="flex items-center justify-between gap-2">
<span className="text-xs font-medium text-dark-text w-6">Até:</span>
<div
className="relative bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus-within:border-brand-primary w-full cursor-pointer overflow-hidden flex items-center h-6"
onClick={() => openPicker(endRef)}
>
<span className="w-full text-center">{formatShortDate(dateRange.end)}</span>
<input
ref={endRef}
type="date"
value={formatDateForInput(dateRange.end)}
onChange={handleEndChange}
className="bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary w-full cursor-pointer"
className="absolute inset-0 opacity-0 cursor-pointer"
/>
</div>
</div>
</div>
</div>
<span className="px-4 text-xs font-bold text-dark-muted uppercase tracking-widest mb-1 block">Atalhos</span>
{PRESETS.map((preset) => (
<button