#96 UI: Date Range Picker Component
Description
EditCreate date range picker for audit logs and filters.
Component: api/ui/templates/components/date_range_picker/
Files:
- date_range_picker.html
- date_range_picker.css
- date_range_picker.js
Features:
- Two date inputs (from/to)
- Calendar dropdown for each
- Quick presets:
- Today
- Yesterday
- Last 7 days
- Last 30 days
- This month
- Last month
- Custom range
- Calendar:
- Month/year navigation
- Day selection
- Range visualization
- Disabled future dates (optional)
- Min/max date constraints
- Validation:
- From date before to date
- Max range limit (e.g., 90 days)
- Clear error messages
- Format:
- Configurable date format
- Locale support
JavaScript API:
- new DateRangePicker(element, config)
- picker.setRange(from, to)
- picker.getRange()
- picker.onChange(callback)
Pure JavaScript - no external libraries.
With ultra attention to details and correctness.
Before closing: write comment summarizing implementation with screenshot.
Comments
Loading comments...
Context
Loading context...
Audit History
View AllLoading audit history...