A period picker component for selecting date ranges.

Install

npm install @fluid-topics/ft-period-picker
yarn add @fluid-topics/ft-period-picker

Usage

This package provides two components:

• ftds-period-picker: A standalone period picker with radio buttons and date inputs
• ftds-period-picker-in-select: A dropdown-style period picker with a trigger button

Basic Period Picker

import { html } from "lit"
import "@fluid-topics/ft-period-picker"
import { FtPeriodsBuiltin } from "@fluid-topics/ft-period-picker"

function render() {
    return html`
        <ftds-period-picker
            .periods=${[
                FtPeriodsBuiltin.anyTime(),
                FtPeriodsBuiltin.today(),
                FtPeriodsBuiltin.lastNdays(7),
                FtPeriodsBuiltin.lastNdays(30)
            ]}
            ?customPeriod=${true}
            @change=${(e: CustomEvent) => console.log("Period changed:", e.detail)}>
        </ftds-period-picker>
    `
}

Period Picker in Select

import { html } from "lit"
import "@fluid-topics/ft-period-picker"
import { FtPeriodsBuiltin } from "@fluid-topics/ft-period-picker"
import {
    FtdsPeriodPickerInSelectVariant,
    FtdsPeriodPickerInSelectDisplayMode
} from "@fluid-topics/ft-period-picker"

function render() {
    return html`
        <ftds-period-picker-in-select
            label="Select a period"
            defaultValueKey="today"
            .variant=${FtdsPeriodPickerInSelectVariant.dateInputsAlwaysVisible}
            .displayMode=${FtdsPeriodPickerInSelectDisplayMode.labels}
            .periods=${[
                FtPeriodsBuiltin.anyTime(),
                FtPeriodsBuiltin.today(),
                FtPeriodsBuiltin.lastNdays(7),
                FtPeriodsBuiltin.lastNdays(30)
            ]}
            ?customPeriod=${true}
            @change=${(e: CustomEvent) => console.log("Period changed:", e.detail)}>
        </ftds-period-picker-in-select>
    `
}

With Date Constraints

import { html } from "lit"
import "@fluid-topics/ft-period-picker"
import { FtPeriodsBuiltin } from "@fluid-topics/ft-period-picker"

function render() {
    const maxDate = () => new Date()
    const minDate = () => new Date(2020, 0, 1)

    return html`
        <ftds-period-picker-in-select
            label="Select a period"
            .periods=${[
                FtPeriodsBuiltin.today(),
                FtPeriodsBuiltin.lastNdays(7),
                FtPeriodsBuiltin.lastNdays(30)
            ]}
            .minDate=${minDate}
            .maxDate=${maxDate}
            ?customPeriod=${true}
            @change=${(e: CustomEvent) => console.log("Period changed:", e.detail)}>
        </ftds-period-picker-in-select>
    `
}