98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
import dateRangePickerStyles from "~/styles/components/date-range-picker.css?url";
|
|
|
|
export interface DateRangePickerProps {
|
|
startDate: string;
|
|
endDate: string;
|
|
onStartDateChange: (value: string) => void;
|
|
onEndDateChange: (value: string) => void;
|
|
startLabel?: string;
|
|
endLabel?: string;
|
|
className?: string;
|
|
startId?: string;
|
|
endId?: string;
|
|
}
|
|
|
|
export function links() {
|
|
return [
|
|
{ rel: "stylesheet", href: dateRangePickerStyles }
|
|
];
|
|
}
|
|
|
|
/**
|
|
* 日期范围选择器组件
|
|
* 用于选择日期范围，如开始日期和结束日期
|
|
*/
|
|
export function DateRangePicker({
|
|
startDate,
|
|
endDate,
|
|
onStartDateChange,
|
|
onEndDateChange,
|
|
startLabel = "从",
|
|
endLabel = "至",
|
|
className = "",
|
|
startId = "date-start",
|
|
endId = "date-end"
|
|
}: DateRangePickerProps) {
|
|
return (
|
|
<div className={`date-range-picker ${className}`}>
|
|
<div className="date-range-fields">
|
|
<div className="date-field">
|
|
<label htmlFor={startId} className="date-label">{startLabel}</label>
|
|
<input
|
|
id={startId}
|
|
type="date"
|
|
className="date-input"
|
|
value={startDate}
|
|
onChange={(e) => onStartDateChange(e.target.value)}
|
|
/>
|
|
</div>
|
|
<span className="date-separator">至</span>
|
|
<div className="date-field">
|
|
<label htmlFor={endId} className="date-label">{endLabel}</label>
|
|
<input
|
|
id={endId}
|
|
type="date"
|
|
className="date-input"
|
|
value={endDate}
|
|
onChange={(e) => onEndDateChange(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 简化版日期范围选择器，适用于紧凑布局，不显示标签
|
|
export function SimpleDateRangePicker({
|
|
startDate,
|
|
endDate,
|
|
onStartDateChange,
|
|
onEndDateChange,
|
|
className = "",
|
|
startId = "date-start-simple",
|
|
endId = "date-end-simple"
|
|
}: Omit<DateRangePickerProps, 'startLabel' | 'endLabel'>) {
|
|
return (
|
|
<div className={`date-range-picker simple-date-range-picker ${className}`}>
|
|
<div className="date-range-fields">
|
|
<input
|
|
id={startId}
|
|
type="date"
|
|
className="date-input"
|
|
value={startDate}
|
|
onChange={(e) => onStartDateChange(e.target.value)}
|
|
aria-label="开始日期"
|
|
/>
|
|
<span className="date-separator">至</span>
|
|
<input
|
|
id={endId}
|
|
type="date"
|
|
className="date-input"
|
|
value={endDate}
|
|
onChange={(e) => onEndDateChange(e.target.value)}
|
|
aria-label="结束日期"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|