search

algolia / instantsearch-widget-date-range-picker

MIT License
1 stars 2 forks source link

readme

date-range-picker

InstantSearch widget that makes a date range picker

MIT NPM version

Demo

Demo on CodeSandbox.

Install

npm install @algolia/instantsearch-widget-date-range-picker
# or
yarn add @algolia/instantsearch-widget-date-range-picker

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/date-picker@1.4.0/dist/duet/duet.esm.js"
></script>
<script
  nomodule
  src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/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/date-picker@1.4.0/dist/duet/duet.esm.js"
></script>
<script
  nomodule
  src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/themes/default.css"
/>

Widget

Usage

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();

Options

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

container

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'),
  // ...
});

option1

... | required

REPLACE WITH THE DESCRIPTION FOR THIS OPTION

dateRangePicker({
  option1: 'value',
  // ...
});

Connector

Usage

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
  }),
]);

Options

option1

...

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({
    // ...
  }),
]);

widgetParams

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'),
    // ...
  }),
]);

Contributing

To start contributing to code, you need to:

  1. Fork the project
  2. Clone the repository
  3. Install the dependencies: yarn
  4. Run the development mode: yarn start

Please read our contribution process to learn more.

This project was generated with create-instantsearch-app by Algolia.