@algolia/react-instantsearch-widget-date-range-picker
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

MIT NPM version

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/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 '@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:

  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.

Dependents (0)

Package Sidebar

Install

npm i @algolia/react-instantsearch-widget-date-range-picker

Weekly Downloads

68

Version

1.1.2

License

MIT

Unpacked Size

18.3 kB

Total Files

11

Last publish

Collaborators

  • jasonberry
  • dhaya.b
  • instantsearch-bot
  • haroenv