YearPickerTextField

If you want a year, you'll have a year.

Example

Props

🕹️ standard props
menuOpened
boolean
Indicates if the menu is opened.
false
openingId
string
The identifier of the element opening the menu.
'year-picker-text-field'
selectedYear
number
The currently selected year.
undefined
placeholder
string
The placeholder text for the input field.
undefined
mobileDialog
boolean
Determines if a dialog should be shown on mobile.
true
maxYearInRange
number
The maximum year available in the range.
2100
minYearInRange
number
The minimum year available in the range.
1900
disabled
boolean
Disables the component.
false
class
object
Class bindings for the component.
{}
🎨 style props
No data available

Slots

activatorSnippet

Default slot for the activator snippet.

Default content:

<SimpleTextField
  bind:value={mask.value}
  onfocus={() => handleTextFieldFocus(mAndDown)}
  onkeydown={handleInputChange}
  bind:input={inputElement}
  {placeholder}
  class={clazz.textfield}
  {disabled}
  {appendSnippet}
  {appendInnerSnippet}
  {prependSnippet}
>
  {#snippet prependInnerSnippet({ iconSize, prependInnerIcon })}
    {#if prependInnerInternalSnippet}
      {@render prependInnerInternalSnippet({ prependInnerIcon, iconSize })}
    {:else}
      <Icon
        name="mdi-calendar"
        onclick={() => menuOpened = !menuOpened}
      ></Icon>
    {/if}
  {/snippet}
</SimpleTextField>
      

Available variables:

Name	Type	Description
mask	InputMask	The input mask instance.
handleTextFieldFocus	function	Function to handle text field focus.
handleInputChange	function	Function to handle input changes.
inputElement	HTMLElement	The input element.
placeholder	string	The placeholder text.
disabled	boolean	Indicates if the input is disabled.

prependSnippet

Slot for prepending an icon outside the field.

Default content:

{#if !!prependIcon}
  <Icon name={prependIcon} --icon-size={iconSize}></Icon>
{/if}
    

Available variables:

Name	Type	Description
prependIcon	string | undefined	Icon to display.
iconSize	string	Size of the icon.

prependInnerSnippet

Slot for prepending an icon inside the field.

Default content:

<Icon
  name="mdi-calendar"
  onclick={() => menuOpened = !menuOpened}
></Icon>
    

Available variables:

Name	Type	Description
prependInnerIcon	string | undefined	Icon to display.
iconSize	string	Size of the icon.

appendSnippet

Slot for appending an icon outside the field.

Default content:

{#if !!appendIcon}
  <Icon name={appendIcon} --icon-size={iconSize}></Icon>
{/if}
    

Available variables:

Name	Type	Description
appendIcon	string | undefined	Icon to display.
iconSize	string	Size of the icon.

appendInnerSnippet

Slot for appending an icon inside the field.

Default content:

{#if !!appendInnerIcon}
  <Icon name={appendInnerIcon} --icon-size={iconSize}></Icon>
{/if}
    

Available variables:

Name	Type	Description
appendInnerIcon	string | undefined	Icon to display.
iconSize	string	Size of the icon.

Events

oninput

Fired when the input value changes.

Attribute	Type	Description
year	number | undefined	The selected year or undefined if no year is selected.

onyearClick

Fired when a year is clicked.

Attribute	Type	Description
year	number	The clicked year.