vitalitymailg/shorturl-analytics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rm dack

Browse Source
This commit is contained in:
William Tso
2025-04-01 19:43:30 +08:00
parent 53822f1087
commit 1b901bda90
14 changed files with 577 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
app/components/ui/DateRangePicker.tsx
View File

@@ -1,48 +1,61 @@
"use client";
import { useState, useEffect } from 'react';
import { useState } from 'react';
import { format } from 'date-fns';
interface DateRangePickerProps {
value: {
from: Date;
to: Date;
};
onChange: (range: { from: Date; to: Date }) => void;
interface DateRange {
from: Date;
to: Date;
}
export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
const [from, setFrom] = useState(format(value.from, 'yyyy-MM-dd'));
const [to, setTo] = useState(format(value.to, 'yyyy-MM-dd'));
interface DateRangePickerProps {
value: DateRange;
onChange: (value: DateRange) => void;
className?: string;
}
useEffect(() => {
setFrom(format(value.from, 'yyyy-MM-dd'));
setTo(format(value.to, 'yyyy-MM-dd'));
}, [value]);
export function DateRangePicker({
value,
onChange,
className
}: DateRangePickerProps) {
// Internal date state for validation
const [from, setFrom] = useState<string>(
value.from ? format(value.from, 'yyyy-MM-dd') : ''
);
const [to, setTo] = useState<string>(
value.to ? format(value.to, 'yyyy-MM-dd') : ''
);
const handleFromChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newFrom = e.target.value;
setFrom(newFrom);
onChange({
from: new Date(newFrom),
to: value.to
});
if (newFrom) {
onChange({
from: new Date(newFrom),
to: value.to
});
}
};
const handleToChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newTo = e.target.value;
setTo(newTo);
onChange({
from: value.from,
to: new Date(newTo)
});
if (newTo) {
onChange({
from: value.from,
to: new Date(newTo)
});
}
};
return (
<div className="flex items-center space-x-4">
<div className={`flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-4 ${className}`}>
<div>
<label htmlFor="from" className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
From
<label htmlFor="from" className="block text-sm font-medium text-gray-500 mb-1">
Start Date
</label>
<input
type="date"
@@ -50,12 +63,12 @@ export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
value={from}
onChange={handleFromChange}
max={to}
className="block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
className="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div>
<label htmlFor="to" className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
To
<label htmlFor="to" className="block text-sm font-medium text-gray-500 mb-1">
End Date
</label>
<input
type="date"
@@ -63,7 +76,7 @@ export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
value={to}
onChange={handleToChange}
min={from}
className="block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
className="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
</div>