date-range-picker

InstantSearch widget that makes a date range picker

---

Install

npm install @eunjae-lee/react-instantsearch-widget-date-range-picker
# or
yarn add @eunjae-lee/react-instantsearch-widget-date-range-picker

Widget

Usage

import instantsearch from 'instantsearch.js';
import algoliasearch from 'algoliasearch/lite';
import { DateRangePicker } from '@eunjae-lee/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} />;

You can see an example here.

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.