Date picker

te-date-picker binds a Date and closes when you click outside of it, which relies on the v-click-outside directive the plugin registers.

Inside a te-field it takes the id its label points at, its description and its invalid state from the wrapper.

Basic

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember20352034203320322031203020292028202720262025202420232022202120202019201820172016201520142013201220112010200920082007200620052004200320022001200019991998199719961995199419931992199119901989198819871986198519841983198219811980197919781977197619751974197319721971197019691968196719661965196419631962196119601959195819571956195519541953195219511950194919481947194619451944194319421941194019391938193719361935193419331932193119301929192819271926

Sun

Mon

Tue

Wed

Thu

Fri

Sat

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<te-date-picker />

Localised month and day names

EneroFebreroMarzoAbrilMayoJunioJulioAgostoSeptiembreOctubreNoviembreDiciembre20352034203320322031203020292028202720262025202420232022202120202019201820172016201520142013201220112010200920082007200620052004200320022001200019991998199719961995199419931992199119901989198819871986198519841983198219811980197919781977197619751974197319721971197019691968196719661965196419631962196119601959195819571956195519541953195219511950194919481947194619451944194319421941194019391938193719361935193419331932193119301929192819271926

Dom

Lun

Mar

Mié

Jue

Vie

Sáb

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<te-date-picker
  placeholder="Selecciona una fecha"
  :days="['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb']"
  :month-names="['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']"
/>

Inside a scrolling container

An ancestor with overflow: hidden or its own scrollbar clips the open calendar. append-to-body renders it in <body> instead, anchored to the field while the page or the container scrolls.

<div class="h-32 overflow-auto">
  <te-date-picker append-to-body v-model="date" />
</div>

Keyboard

Enter, Space or ↓ on the field opens the calendar on the selected day. The grid is one tab stop — the arrows move the day and cross into the next or previous month on their own.

Key	Does
← →	Previous / next day.
↑ ↓	Same weekday, a week back or forward.
Home End	First / last day of that week.
PageUp PageDown	Same day of the previous / next month.
Enter Space	Pick the focused day. Dates outside minDate/maxDate or in notAllowedDates do nothing.
Esc	Close and go back to the field.

Props

Prop	Type	Default	Description
modelValue	Date | null	null	Selected date. Supports v-model.
placeholder	string	'Select a date'	Placeholder of the trigger input.
disabled	boolean	false	Disables the trigger input.
minDate / maxDate	Date | null	null	Selectable range. Also limits the year list and the arrows.
notAllowedDates	Date[]	[]	Individual dates to block.
monthNames	string[]	English months	Twelve month names.
days	string[]	['Sun', …]	Seven weekday labels, starting on Sunday.
appendToBody	boolean	false	Renders the calendar in <body> so it is not clipped by a scrolling or overflow: hidden container.

Events

Event	Payload	Description
update:modelValue	Date	A date was picked. The panel closes.

Slots

Slot	Props	Description
trigger	—	Replaces the input that opens the calendar.
icon	—	Replaces the calendar icon.