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

    Install

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

    DownloadsWeekly Downloads

    36

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    18.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • fabienmotte
    • sarahdayan
    • dhaya.b
    • haroenv
    • francoischalifour
    • tkrugg