InstantSearch widget that makes a date range picker
Demo on CodeSandbox.
npm install @algolia/instantsearch-widget-date-range-picker
# or
yarn add @algolia/instantsearch-widget-date-range-pickerThis widget is using @duetds/date-picker under the hood, so you need to include this at the end of <head> tag.
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@duetds/[email protected]/dist/duet/duet.esm.js"
></script>
<script
nomodule
src="https://cdn.jsdelivr.net/npm/@duetds/[email protected]/dist/duet/duet.js"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@duetds/[email protected]/dist/duet/themes/default.css"
/>This widget is using @duetds/date-picker under the hood, so you need to include this at the end of <head> tag.
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@duetds/[email protected]/dist/duet/duet.esm.js"
></script>
<script
nomodule
src="https://cdn.jsdelivr.net/npm/@duetds/[email protected]/dist/duet/duet.js"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@duetds/[email protected]/dist/duet/themes/default.css"
/>import instantsearch from 'instantsearch.js';
import algoliasearch from 'algoliasearch/lite';
import { dateRangePicker } from '@algolia/instantsearch-widget-date-range-picker';
const searchClient = algoliasearch('appId', 'apiKey');
const search = instantsearch({
indexName: 'indexName',
searchClient,
});
search.addWidgets([
dateRangePicker({
// widget parameters
}),
]);
search.start();| Option | Type | Required | Default | Description |
|---|---|---|---|---|
container |
string or HTMLElement |
true | - | The element to insert the widget into. |
option1 |
... |
true | - | REPLACE WITH THE DESCRIPTION FOR THIS OPTION |
string | Element| required
The element to insert the widget into.
This can be either a valid CSS Selector:
dateRangePicker({
container: '#date-range-picker',
// ...
});or an HTMLElement:
dateRangePicker({
container: document.querySelector('#date-range-picker'),
// ...
});
...| required
REPLACE WITH THE DESCRIPTION FOR THIS OPTION
dateRangePicker({
option1: 'value',
// ...
});import { connectDateRangePicker } from '@algolia/instantsearch-widget-date-range-picker';
// 1. Create a render function
const renderDateRangePicker = (renderOptions, isFirstRender) => {
// Rendering logic
};
// 2. Create the custom widget
const customDateRangePicker = connectDateRangePicker(renderDateRangePicker);
// 3. Instantiate
search.addWidgets([
customDateRangePicker({
// instance params
}),
]);
...
REPLACE WITH THE DESCRIPTION FOR THIS RENDERING ITEM
const renderDateRangePicker = (renderOptions, isFirstRender) => {
// show how to use this render option
};
const customDateRangePicker = connectDateRangePicker(renderDateRangePicker);
search.addWidgets([
customDateRangePicker({
// ...
}),
]);
object
All original widget options forwarded to the render function.
const renderDateRangePicker = (renderOptions, isFirstRender) => {
const { widgetParams } = renderOptions;
widgetParams.container.innerHTML = '...';
};
const customDateRangePicker = connectDateRangePicker(renderDateRangePicker);
search.addWidgets([
customDateRangePicker({
container: document.querySelector('#date-range-picker'),
// ...
}),
]);To start contributing to code, you need to:
- Fork the project
- Clone the repository
- Install the dependencies:
yarn - Run the development mode:
yarn start
Please read our contribution process to learn more.
This project was generated with create-instantsearch-app by Algolia.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent