Gladyson/openmonetis
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: prop compact no DatePicker para formato abreviado "28 fev"

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-02-27 15:24:30 +00:00
parent 4ea2ba9463
commit 656fbaed54
1 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/ui/date-picker.tsx
View File

@@ -13,11 +13,21 @@ import {
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { cn } from "@/lib/utils/ui"; import { cn } from "@/lib/utils/ui";
function formatDate(date: Date | undefined): string { function formatDate(date: Date | undefined, compact = false): string {
if (!date) { if (!date) {
return ""; return "";
} }
if (compact) {
return date
.toLocaleDateString("pt-BR", {
day: "numeric",
month: "short",
})
.replace(".", "")
.replace(" de ", " ");
}
return date.toLocaleDateString("pt-BR", { return date.toLocaleDateString("pt-BR", {
day: "2-digit", day: "2-digit",
month: "long", month: "long",
@@ -70,6 +80,8 @@ export interface DatePickerProps {
required?: boolean; required?: boolean;
disabled?: boolean; disabled?: boolean;
className?: string; className?: string;
/** Show compact format like "10 mar" instead of "10 de março de 2025" */
compact?: boolean;
} }
export function DatePicker({ export function DatePicker({
@@ -80,6 +92,7 @@ export function DatePicker({
required = false, required = false,
disabled = false, disabled = false,
className, className,
compact = false,
}: DatePickerProps) { }: DatePickerProps) {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const [date, setDate] = React.useState<Date | undefined>(() => const [date, setDate] = React.useState<Date | undefined>(() =>
@@ -89,7 +102,7 @@ export function DatePicker({
parseYYYYMMDD(value), parseYYYYMMDD(value),
); );
const [displayValue, setDisplayValue] = React.useState(() => const [displayValue, setDisplayValue] = React.useState(() =>
formatDate(parseYYYYMMDD(value)), formatDate(parseYYYYMMDD(value), compact),
); );
// Sincronizar quando value externo mudar // Sincronizar quando value externo mudar
@@ -97,8 +110,8 @@ export function DatePicker({
const newDate = parseYYYYMMDD(value); const newDate = parseYYYYMMDD(value);
setDate(newDate); setDate(newDate);
setMonth(newDate); setMonth(newDate);
setDisplayValue(formatDate(newDate)); setDisplayValue(formatDate(newDate, compact));
}, [value]); }, [value, compact]);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const inputValue = e.target.value; const inputValue = e.target.value;
@@ -121,7 +134,7 @@ export function DatePicker({
const handleCalendarSelect = (selectedDate: Date | undefined) => { const handleCalendarSelect = (selectedDate: Date | undefined) => {
setDate(selectedDate); setDate(selectedDate);
setDisplayValue(formatDate(selectedDate)); setDisplayValue(formatDate(selectedDate, compact));
onChange?.(dateToYYYYMMDD(selectedDate)); onChange?.(dateToYYYYMMDD(selectedDate));
setOpen(false); setOpen(false);
}; };