YearSelector

Select your year.

Example

Props

🕹️ standard props
selectedYear
number
The currently selected year.
undefined
selectableYears
number[]
The list of selectable years.
[...Array(150).keys()].map((i) => i + (new Date().getFullYear() - 75))
disabled
boolean
If true, the year selector will be disabled.
false
class
string
Custom CSS class for the year selector.
undefined
🎨 style props
--year-selector-height
size
The height of the year selector.
100%
--year-selector-max-height
size
The maximum height of the year selector.
500px
--year-selector-width
size
The width of the year selector.
100%

Slots

selectorSnippet

A snippet for rendering the year selector button.

Default content:

<div bind:this={targetButtons[year]} style:width="100%">
  <Button
    --button-background-color={year == selectedYear ? "rgb(var(--global-color-primary-500))" : "trasparent"}
    --button-active-background-color={year == selectedYear ? "rgb(var(--global-color-primary-500))" : "trasparent"}
    --button-focus-background-color={year == selectedYear ? "rgb(var(--global-color-primary-500))" : "trasparent"}
    --button-hover-background-color={year == selectedYear ? "var(--button-background-color)" : "rgb(var(--global-color-primary-500), .2)"}
    --button-color={year == selectedYear ?  "rgb(var(--global-color-grey-50))" : undefined}
    --button-font-weight="500"
    --button-width="var(--year-selector-width, var(--year-selector-default-width))"
    --button-padding=".5rem 0px"
    buttonType="text"
    onclick={() => handleYearClick(year)}
    disabled={disabled}
  >
    {#if labelSnippet}
      {@render labelSnippet({ year })}
    {:else}
      <div
        style:transition="all .1s"
        style:font-weight={year == selectedYear ? "700" : "400"}
        style:font-size={year == selectedYear ? "16pt" : "13pt"}
      >
        {year}
      </div>
    {/if}
  </Button>
</div>
    

Available variables:

Name	Type	Description
year	number	The year to display.
handleYearClick	function	The function to call when a year is clicked.

labelSnippet

A snippet for rendering a label for each year.

Default content:

<div
  style:transition="all .1s"
  style:font-weight={year == selectedYear ? "700" : "400"}
  style:font-size={year == selectedYear ? "16pt" : "13pt"}
>
  {year}
</div>
    

Available variables:

Name	Type	Description
year	number	The year to label.

Events

onclick

Triggered when a year is clicked.

Attribute	Type	Description
year	number	The year that was clicked.

onchange

Triggered when the selected year changes.

Attribute	Type	Description
year	number | undefined	The updated selected year.