Demo

Demo on CodeSandbox.

Install

``bash
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 tag.

`html
type="module"
src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet.esm.js"
>
nomodule
src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet.js"
>
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/themes/default.css"
/>
`

Widget

$3

`jsx
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 = '';

const App = () => (



);
`

$3

| 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.

`jsx

`

#### datePickerProps

> object | optional

Props for @duetds/date-picker component.

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

;
`

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._