Search by Algolia
How personalization boosts customer engagement
e-commerce

How personalization boosts customer engagement

You land on your favorite retailer’s website, where everything seems to be attractively arranged just for you. Your favorite ...

Jon Silvers

Director, Digital Marketing

What is retail analytics and how can it inform your data-driven ecommerce merchandising strategy?
e-commerce

What is retail analytics and how can it inform your data-driven ecommerce merchandising strategy?

There is such tremendous activity both on and off of retailer websites today that it would be impossible to make ...

Catherine Dee

Search and Discovery writer

8 ways to use merchandising data to boost your online store ROI
e-commerce

8 ways to use merchandising data to boost your online store ROI

New year, new goals. Sounds positive, but looking at your sales data, your revenue and profit aren’t so hot ...

John Stewart

VP, Corporate Communications and Brand

Algolia DocSearch + Astro Starlight
engineering

Algolia DocSearch + Astro Starlight

What is Astro Starlight? If you're building a documentation site, your content needs to be easy to write and ...

Jaden Baptista

Technical Writer

What role does AI play in recommendation systems and engines?
ai

What role does AI play in recommendation systems and engines?

You put that in your cart. How about this cool thing to go with it? You liked that? Here are ...

Catherine Dee

Search and Discovery writer

How AI can help improve your user experience
ux

How AI can help improve your user experience

They say you get one chance to make a great first impression. With visual design on ecommerce web pages, this ...

Jon Silvers

Director, Digital Marketing

Keeping your Algolia search index up to date
product

Keeping your Algolia search index up to date

When creating your initial Algolia index, you may seed the index with an initial set of data. This is convenient ...

Jaden Baptista

Technical Writer

Merchandising in the AI era
e-commerce

Merchandising in the AI era

For merchandisers, every website visit is an opportunity to promote products to potential buyers. In the era of AI, incorporating ...

Tariq Khan

Director of Content Marketing

Debunking the most common AI myths
ai

Debunking the most common AI myths

ARTIFICIAL INTELLIGENCE CAN’T BE TRUSTED, shouts the headline on your social media newsfeed. Is that really true, or is ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

How AI can benefit the retail industry
ai

How AI can benefit the retail industry

Artificial intelligence is on a roll. It’s strengthening healthcare diagnostics, taking on office grunt work, helping banks combat fraud ...

Catherine Dee

Search and Discovery writer

How ecommerce AI is reshaping business
e-commerce

How ecommerce AI is reshaping business

Like other modern phenomena such as social media, artificial intelligence has landed on the ecommerce industry scene with a giant ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

AI-driven smart merchandising: what it is and why your ecommerce store needs it
ai

AI-driven smart merchandising: what it is and why your ecommerce store needs it

Do you dream of having your own personal online shopper? Someone familiar and fun who pops up every time you ...

Catherine Dee

Search and Discovery writer

NRF 2024: A cocktail of inspiration and innovation
e-commerce

NRF 2024: A cocktail of inspiration and innovation

Retail’s big show, NRF 2024, once again brought together a wide spectrum of practitioners focused on innovation and transformation ...

Reshma Iyer

Director of Product Marketing, Ecommerce

How AI-powered personalization is transforming the user and customer experience
ai

How AI-powered personalization is transforming the user and customer experience

In a world of so many overwhelming choices for consumers, how can you best engage with the shoppers who visit ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Unveiling the future: Algolia’s AI revolution at NRF Retail Big Show
algolia

Unveiling the future: Algolia’s AI revolution at NRF Retail Big Show

Get ready for an exhilarating journey into the future of retail as Algolia takes center stage at the NRF Retail ...

John Stewart

VP Corporate Marketing

How to master personalization with AI
ai

How to master personalization with AI

Picture ecommerce in its early days: businesses were just beginning to discover the power of personalized marketing. They’d divide ...

Ciprian Borodescu

AI Product Manager | On a mission to help people succeed through the use of AI

5 best practices for nailing the ecommerce virtual assistant user experience
ai

5 best practices for nailing the ecommerce virtual assistant user experience

“Hello there, how can I help you today?”, asks the virtual shopping assistant in the lower right-hand corner ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Add InstantSearch and Autocomplete to your search experience in just 5 minutes
product

Add InstantSearch and Autocomplete to your search experience in just 5 minutes

A good starting point for building a comprehensive search experience is a straightforward app template. When crafting your application’s ...

Imogen Lovera

Senior Product Manager

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

When crafting a search interface, it’s often enough to use what comes prepackaged with Algolia’s InstantSearch libraries. Each library comes in a different flavor of JavaScript for your ease of use. Each one has all the main pieces you need to craft a strong UI.

Sometimes you want to go beyond what’s available.

At that point, you’re presented with two options: craft your own with our connector APIs or find a pre-built custom widget.

It should come as no surprise to anyone that knows me that when presented with wanting a React date picker, I wanted to write as little code as possible to make it work, but I also wanted the best UI possible for Santa. When it came to bonus challenge number 5, I needed something extra. My first stop? The Algolia Code Exchange!

After a quick search around date components, I found exactly what I needed: the aptly-named @algolia/react-instantsearch-widget-date-range-picker! There’s also a VanillaJS version if you’re not using React.

Setting up the project

If you’d like to follow along, you’ll need to install a new React InstantSearch project. The easiest way to do that is to run the following command:

 npx create-instantsearch-app concert-search \
 --app-id latency \
 --api-key 059c79ddd276568e990286944276464a \
 --index-name concert_events_instantsearchjs \
 --template "React InstantSearch"

This monster command will set up a React InstantSearch project and connect it to Algolia’s hosted concert Index. Change directory into the created folder and run yarn start for a solid starting point.

At this point, you’ve got a full search experience for a set of concerts.

If you want to filter by date, you could set up a <RefinementList> component and set its attribute prop to date, but those dates are Unix timestamps (for easiest comparisons). This isn’t ideal for the user experience. Let’s make that better.

Installing and configuring the widget

To get the date range picker up and running, we need to install a couple of dependencies.

npm install @algolia/react-instantsearch-widget-date-range-picker @duetds/date-picker

This will install the official Algolia React Date picker widget and its dependency the Duet Date picker.

From here, we need to import the packages into our src/App.js file and initialize the Duet Date Picker for use.

// Add right after the imports included in the create-instantsearch-app code

import { DateRangePicker } from '@algolia/react-instantsearch-widget-date-range-picker';  
import { defineCustomElements } from "@duetds/date-picker/dist/loader";

// Defines the custom elements from the date picker for use on the window object  
defineCustomElements(window);

Now that these packages are imported, we’re ready to get this on the page.

Adding the date range picker

To add the picker to the page, we need to select a spot within the <InstantSearch> component. The base of the app is a search-panel. By default, all we have inside this is the results, but we can add a filter panel, as well.

<InstantSearch searchClient={searchClient} indexName="concert_events_instantsearchjs">  
  <div className="search-panel">
    <div className="search-panel__filters"> 
      <DateRangePicker attribute="date" />
    </div>

    <div className="search-panel__results">

      //... Results code

    </div>
  </div>
</InstantSearch>

The DateRangePicker accepts an attribute prop. This prop accepts a date-based attribute from the hits in our Index.

Quick note: The DateRangePicker accepts a Unix timestamp with milliseconds since the Epoch, not seconds. Depending on your data structure, you may need to create a secondary timestamp in your data.

When you view the rendered page, you should now have a date picker. There are a few small UI snags to clean up.

The Duet Date picker uses a slew of CSS Custom Properties for much of its styling. At the start of our src/App.css file, we need to paste those in and configure for our app (as appropriate).

:root {  
  --duet-color-primary: #3c4ee0;  
  --duet-color-text: #333;  
  --duet-color-text-active: #fff;  
  --duet-color-placeholder: #666;  
  --duet-color-button: #f5f5f5;  
  --duet-color-surface: #fff;  
  --duet-color-overlay: rgba(0, 0, 0, 0.8);  
  --duet-color-border: #d6d6e7;  

  --duet-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,  
  Arial, sans-serif;  
  --duet-font-normal: 400;  
  --duet-font-bold: 600;  

  --duet-radius: 3px;  
  --duet-z-index: 600;  
}

The two picker areas are a little close together still, so let’s fix that with a little CSS, as well. This can go in src/App.css but should be closer to the bottom. There are many ways to get the space between the two items, the quick and easy solution is to use CSS Grid and the gap property.

.date-range-picker {  
  display: grid;  
  gap: 1rem;  
}

And with that, we have a functioning, user-friendly date picker. No more dealing with Unix timestamps and conversions.

Take this further

This works great in the small sample dataset, but can also be brought into any Algolia InstantSearch application. If you’re looking to take this example further, create a better UI around each Hit by editing the hit component in src/App.js. You could also show the current filters applied with the CurrentRefinements component.

About the authors
Bryan Robinson

Senior Developer Relations Specialist

githubtwitter
Chuck Meyer

Sr. Developer Relations Engineer

githubtwitter

Recommended Articles

Powered byAlgolia Algolia Recommend

Adding trending recommendations to your existing e-commerce store
engineering

Ashley Huynh

Building a Store Locator in React using Algolia, Mapbox, and Twilio – Part 2
engineering

Clément Sauvage

Software Engineer, Freelance

How to personalize search results and recommendations
engineering

Ashley Huynh