searchkit-daterangefilter's Introduction

searchkit-daterangefilter

DateRangeFilter component for Searchkit

Installation

npm install searchkit-daterangefilter --save

Features

Similar to the classic RangeFilter, but with a date field

Usage

import { DateRangeFilter } from "searchkit-daterangefilter"

<DateRangeFilter 
  id="year"
  field="publication_date"
  title="Publication Date"
  min={2005} 
  max={new Date().getFullYear()} 
  interval="year"
  showHistogram={true} />

Example

const Demo = React.createClass({
  render() {
    return (
      <SearchkitProvider searchkit={searchkit}>
        <Layout>
          <TopBar>
            <SearchBox
              autofocus={true}
              searchOnChange={true}
              prefixQueryFields={["actors^1","type^2","languages","title^10"]}/>
          </TopBar>
          <LayoutBody>
            <SideBar>
              <HierarchicalMenuFilter
                fields={["type.raw", "genres.raw"]}
                title="Categories"
                id="categories"/>
              <DateRangeFilter 
                id="year"
                field="publication_date"
                title="Publication Date"
                min={2005} 
                max={new Date().getFullYear()} 
                interval="year"
                showHistogram={true} />
            </SideBar>
            <LayoutResults>
              <Hits mod="sk-hits-grid" hitsPerPage={10} itemComponent={MovieHitsGridItem}
                sourceFilter={["title", "poster", "imdbId"]}/>
              <NoHits/>
            </LayoutResults>
          </LayoutBody>
        </Layout>
      </SearchkitProvider>
    )
  }
})