Usage

DateInput is a text field with a calendar button. People can type a date or open the calendar and pick a day.

Bind a date:

<script setup lang="ts">
import { DateInput } from '@astryx-vue/core/DateInput'
import { ref } from 'vue'

const date = ref(null)
</script>

<template>
  <DateInput v-model="date" />
</template>

The value is a local date. The field writes it back as a long date, such as March 21, 2026. It can also show a short date, a weekday, the system date, or custom text. A description can sit under the label, and validation can change the border or add a message under the field.

The calendar can open in a popover or a bottom sheet. The sheet shows one month. Picking a day writes it immediately, and Save closes the sheet. The month title opens month and year wheels. The system date control can be used all the time, or only on a touch device. When nothing is specified, a mouse gets the popover and a coarse pointer gets the system control. While a change is saving, the field cannot be edited. The save runs after the new value is written. The label can carry a hint and mark the field optional or required. The popover can show two months, and the week can start on a chosen day.

Anatomy

Element	Description
Label	Text above the input describing what date is expected.
Text input	A field where the user can type a date directly. Parses common formats like MM/DD/YYYY.
Calendar icon	A button that opens the calendar popover for visual date picking.
Calendar popover	A month grid that appears when the icon is clicked or the input is focused.
Clear button	A × button that resets the date value. Shown when clearable is set and a date is present.
Status message	An error, warning, or success message below the input.

Best practices

Guideline	Practice
Do	Turn on clearable when the date is optional.
Do	Set min and max so people cannot pick a date the product will reject.
Do	Use a placeholder that shows the expected format.
Don't	Use it when the value needs a time of day. This field is a calendar date.

Examples

Clearable

Selected: 2026-04-06

Event date

Pick a date for your event

An optional event date with a clear button. The line above shows the selected value.

Description

Helper text explains what the field expects

Start date

Your subscription begins on this date

Helper text under the label explains what the date is for.

Formats

The same committed date, displayed with different formats.

Short month (date)

Long month (date_long, default)

With weekday (date_weekday)

ISO 8601 (system_date)

Custom function

The same committed date as a short month, a long month, a weekday, an ISO date, or a custom string.

Min and max

Pick a date in the available range

Booking date

Available dates: Oct 8 – 21, 2026

Only the 8th through the 21st of the current month can be selected. A coarse pointer opens a bottom sheet.

Validation

Event date

This date is already booked

Preferred date

This date falls on a holiday

Start date

Date confirmed

Error, warning, and success, each with a message.

Saving and labels

Ship date ∙ Required

Saved when the date changes.

Follow-up ∙ Optional

The date is written first, and the field stays busy until the save finishes. Weekends cannot be picked. The other field is marked optional.

System date

System date

This field opens the browser date control.

March 21, 2026

The browser date control, with the committed day still shown as a long date.

Bottom sheet

Due

Opens a one-month sheet. Save closes it.

Su

Mo

Tu

We

Th

Fr

Sa

A bottom sheet on both mouse and touch. Picking a day writes it, and Save closes the sheet.