DatePickerTextField

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

Example

Props

🕹️ standard props
menuOpened
boolean
Controls the visibility of the menu.
false
openingId
string
The unique identifier for the menu opener.
'date-picker-text-field'
pattern
string
The date format pattern.
'dd/MM/yyyy'
selectedMonth
number
The selected month.
new Date().getMonth()
selectedYear
number
The selected year.
new Date().getFullYear()
visibleMonth
number
The month currently visible in the picker.
$bindable(selectedMonth)
visibleYear
number
The year currently visible in the picker.
$bindable(selectedYear)
type
'singleDate' | 'dateRange'
Choose either a single date or a date range.
singleDate
selectedDate
Date | undefined
The currently selected date.
$bindable(undefined)
selectedDateTo
Date | undefined
The second currently selected date for date ranges.
$bindable(undefined)
placeholder
string
Placeholder text for the input field.
undefined
placeholderTo
string
Placeholder text for the second input field.
undefined
mobileDialog
boolean
Determines if the date picker uses a dialog on mobile.
true
maxYearInRange
number
Maximum year allowed in the date picker range.
2100
minYearInRange
number
Minimum year allowed in the date picker range.
1970
disabled
boolean
If true, the date picker is disabled.
false
flipOnOverflow
boolean
Determines if the menu flips on overflow.
true
class
{ activator?: string, textfield?: ComponentProps<typeof SimpleTextField>['class'] }
Custom class names for styling.
{}
🎨 style props
No data available

Slots

activatorSnippet

Snippet for customizing the activator element of the date picker.

Default content:

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

Available variables:

Name	Type	Description
mask	InputMask	The input mask for the date picker.
handleTextFieldFocus	function	The function that handles the focus event for the text field.
handleInputChange	function	The function that handles the change event for the input field.
inputElement	HTMLElement | undefined	The input element for the date picker.
placeholder	string | undefined	The placeholder text for the input field.
disabled	boolean	Determines if the date picker 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:

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

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

ondayClick

Triggered when a day is clicked in the date picker.

Attribute	Type	Description
dateStat	DateStat	The date statistics for the clicked day.

oninput

Triggered when the input value changes.

Attribute	Type	Description
datetime	Date | undefined	The selected date or undefined if no date is selected.