date-range-picker

InstantSearch widget that makes a date range picker

Demo

Demo on CodeSandbox.

Install

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

This widget uses @duetds/date-picker under the hood. You need the following code at the end of your <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 '@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:

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.

seafoox / react-date-range-picker