PeriodSelector

What period are you going through?

Example

Select range mode
  • Today
  • This week
  • This month
  • Last 3 months
  • Last 6 months
  • This year
  • All time
  • Custom Range
  • Rolling Window
  • Oggi
  • Questa settimana
  • Questo mese
  • Ultimi 3 mesi
  • Ultimi 6 mesi
  • Quest'anno
  • Sempre
  • Intervallo personalizzato
  • Periodo dinamico

Props

    🕹ī¸ standard props
    timespanSettings
    TimespanSettings<T>
    Contains the selected timespan
    quickSelectOptions
    Option[]
    Quick range options.
    defaultQuickOptions
    valid
    boolean
    True if the range is fully completed
    false
    mode
    'default' | 'datepicker'
    If datepicker, converts quick and rolling ranges into dates
    'default'
    lang
    "it" | "en"
    Language for labels
    "en"
    locale
    "it" | "en"
    Locale for dates
    lang
    isSelectionMode
    boolean
    True when the selectable vertical list is displayed
    true
    showTimeRangeLabel
    boolean
    Show the time range label
    false
    quickRangeConvertor
    function
    Converts the quick range value into dates
    setTimespanLabel
    function
    Custom label setter
    🎨 style props
    --period-selector-list-element-padding
    padding
    Element padding
    4px
    --period-selector-list-element-border-radius
    border-radius
    Element border radius
    4px
    --period-selector-list-element-font-size
    font-size
    Element font size
    0.95rem
    --period-selector-width
    width
    Selector width
    100%
    --period-selector-max-width
    max-width
    Selector max width
    400px
    --period-selector-min-height
    min-heinght
    Selecton min height
    360px

Slots

    No data available

Events

    onchange
    Event triggered when the settings have changed
    AttributeTypeDescription
    timespanSettingsTimespanSettings<T>Timespan settings