Period selector

The period selector is for selecting a date range, with an optional compare range.

Install

Add the component and it’s dependencies to your project:

Import the component and it’s style:

Use

Here’s a fully working example

Types

The period selector is for selecting a date range or Period. A Period and it’s related types are defined as:

Properties

nametypedescriptionrequireddefault
activePeriodPeriodfalse
onChange(nextPeriod: Period) => voidtrue
localeLocaleUsed to set the start of the weekfalse
calendarMaxDateDateSet max date that is selectablefalse90 days from today
calendarMinDateDateSet min date that is selectablefalse2013-01-01

Internals

The period selector component is built up from a number of smaller components that are also exposed and can be used if needed.

DateEntry

Calendar

ComparePicker

Search Gunnel

Powered byAlgolia