LiveFilter.Components.DateRangeSelect (LiveFilter v0.1.0)
View SourceA reusable date range selector component for LiveFilter. Provides preset date ranges and custom date range selection with a calendar picker.
JavaScript Hook Dependency
This component requires the LiveFilter JavaScript hook to function properly. The hook handles positioning of the calendar dropdown to prevent viewport overflow and maintains stable positioning during date selection.
Installation
When using LiveFilter as a library, run the following to install JavaScript assets:
mix live_filter.install.assets
Then import the hook in your app.js
:
import LiveFilter from "./hooks/live_filter/live_filter"
let liveSocket = new LiveSocket("/live", Socket, {
hooks: { LiveFilter }
})
Hook Details
The LiveFilter hook automatically detects this component and:
- Calculates optimal calendar position to stay within viewport
- Handles window resize events
- Maintains position stability during date selection
- Uses
phx-hook="LiveFilter"
withdata-livefilter-component="date-range-select"