The react-instantsearch-widget-date-range-picker from priya-9

react-instantsearch-widget-date-range-picker's Introduction

Demo

Demo on CodeSandbox.

Install

npm install @algolia/react-instantsearch-widget-date-range-picker
# or
yarn add @algolia/react-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/[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"
/>

Widget

Usage

import instantsearch from 'instantsearch.js';
import algoliasearch from 'algoliasearch/lite';
import { DateRangePicker } from '@algolia/react-instantsearch-widget-date-range-picker';

const searchClient = algoliasearch('appId', 'apiKey');
const attribute = '<your-attribuet-for-faceting>';

const App = () => (
  <InstantSearch searchClient={searchClient} indexName="indexName">
    <DateRangePicker attribute={attribute} />
  </InstantSearch>
);

Options

Option	Type	Required	Default	Description
`attribute`	`string`	true	-	Name of the attribute for faceting
`datePickerProps`	`object`	false	undefined	Props for @duetds/date-picker component

attribute

string | required

Name of the attribute for faceting.

<DateRangePicker attribute="date" />

datePickerProps

object | optional

Props for @duetds/date-picker component.

const datePickerProps = {
  dateAdapter: {
    parse(dateString) {
      // ...
    },
    format(date) {
      // ...
    },
  },
  localization: {
    // ...
  },
  // ...
};

<DateRangePicker attribute="date" datePickerProps={datePickerProps} />;