@algolia/react-instantsearch-widget-date-range-picker
v1.1.2
Published
InstantSearch widget that makes a date range picker
Downloads
1,274
Readme
Demo
Demo on CodeSandbox.
Install
npm install @algolia/react-instantsearch-widget-date-range-picker
# or
yarn add @algolia/react-instantsearch-widget-date-range-pickerThis 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} />;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.