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

    1.1.1 • 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

    14

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    18.4 kB

    Total Files

    12

    Last publish

    Collaborators

    • millotp
    • thomaslef
    • lukyvj
    • sepehrf
    • kosai106
    • marielaure
    • redox
    • mthuret
    • haroenv
    • rayrutjes
    • speedblue
    • jerska
    • raphi
    • cbaptiste
    • ronanlevesque
    • samouss
    • therealwebby
    • francoischalifour
    • jonmontane
    • mikaa123
    • valentindotxyz
    • shipow
    • tkrugg
    • seafoox
    • sylvainh
    • clemfromspace
    • lorrissaintgenez
    • broujo
    • marieglr
    • e-krebs
    • eunjae-lee
    • kombucha
    • h1fra
    • sylvain
    • crawler-team
    • amcdaid106
    • devinalgolia
    • dispix
    • jvenezia
    • otomatik
    • julienbourdeau
    • sophiem03
    • mschreiber
    • sarahdayan
    • alexandremeunier
    • dcoates
    • maximehuang
    • netgusto
    • guitek
    • matthewbond
    • cyril.descossy
    • tatsuro
    • danajeremy
    • mathougui
    • xavdh
    • agdavid
    • charbell
    • rasemotte
    • plnech
    • shortcuts
    • praagyajoshi
    • tomklotz
    • loicsay
    • svensoldin
    • alphonseb
    • leodau
    • fabienmotte
    • sarahfranc