admin/Ingress-Dashoboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use js for datepicker

Browse Source
This commit is contained in:
Matteo Rosati
2026-01-16 11:03:39 +01:00
parent 7ccfa0b0ee
commit e2f7be2813
3 changed files with 42 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/FilterControls.tsx
View File

@@ -1,4 +1,6 @@
import React, { useState, useEffect } from "react";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
interface FilterControlsProps {
timestampFrom: Date | null;
@@ -33,26 +35,30 @@ export function FilterControls({
<div className="filter-controls">
<div className="filter-group">
<label className="filter-label">Timestamp From</label>
<input
type="datetime-local"
value={timestampFrom ? timestampFrom.toISOString().slice(0, 16) : ""}
onChange={(e) => {
const date = e.target.value ? new Date(e.target.value) : null;
onTimestampFromChange(date);
}}
<ReactDatePicker
selected={timestampFrom}
onChange={(date: Date | null) => onTimestampFromChange(date)}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
dateFormat="yyyy-MM-dd HH:mm"
isClearable
placeholderText="Select date and time"
className="filter-input"
/>
</div>
<div className="filter-group">
<label className="filter-label">Timestamp To</label>
<input
type="datetime-local"
value={timestampTo ? timestampTo.toISOString().slice(0, 16) : ""}
onChange={(e) => {
const date = e.target.value ? new Date(e.target.value) : null;
onTimestampToChange(date);
}}
<ReactDatePicker
selected={timestampTo}
onChange={(date: Date | null) => onTimestampToChange(date)}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
dateFormat="yyyy-MM-dd HH:mm"
isClearable
placeholderText="Select date and time"
className="filter-input"
/>
</div>