DatePicker

TxDatePicker wraps TxPicker with year, month, and day columns and exposes a YYYY-MM-DD string model. Use it when the UI needs a compact date selector with optional popup behavior and simple min/max bounds.

Basic Usage

DatePicker

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const value = ref('2026-01-02')
</script>

<template>
  <div style="width: 360px; padding: 16px; border: 1px solid var(--tx-border-color); border-radius: 12px;">
    <div style="display: flex; gap: 8px; align-items: center;">
      <TxButton variant="primary" @click="visible = true">
        Open date picker
      </TxButton>
      <div style="color: var(--tx-text-color-secondary);">
        Value: {{ value }}
      </div>
    </div>

    <TxDatePicker
      v-model="value"
      v-model:visible="visible"
      title="Date"
      min="2025-01-01"
      max="2030-12-31"
    />
  </div>
</template>

API

Props

Prop	Type	Default	Description
`modelValue`	`string`	`''`	Selected date in `YYYY-MM-DD` format. Invalid or empty values initialize from today and are clamped by `min` / `max` when provided.
`visible`	`boolean`	`false`	Controls popup visibility via `v-model:visible`.
`popup`	`boolean`	`true`	Renders through the picker popup surface when enabled.
`title`	`string`	`'Select date'`	Toolbar title forwarded to `TxPicker`.
`min`	`string`	-	Earliest selectable date in `YYYY-MM-DD` format. Earlier year/month/day options are disabled or clamped.
`max`	`string`	-	Latest selectable date in `YYYY-MM-DD` format. Later year/month/day options are disabled or clamped.
`disabled`	`boolean`	`false`	Disables picker interaction.
`showToolbar`	`boolean`	`true`	Shows or hides the picker toolbar.
`confirmText`	`string`	`'Confirm'`	Confirm button label forwarded to `TxPicker`.
`cancelText`	`string`	`'Cancel'`	Cancel button label forwarded to `TxPicker`.
`closeOnClickMask`	`boolean`	`true`	Allows the popup mask to close the picker when clicked.

Events

Event	Params	Description
`update:modelValue`	`(value: string)`	Emitted with a formatted `YYYY-MM-DD` value when the picker columns change.
`change`	`(value: string)`	Mirrors picker value changes with the same formatted date.
`update:visible`	`(visible: boolean)`	Emitted when the inner picker requests a visibility change.
`confirm`	`(value: string)`	Emitted with the current formatted date when the user confirms.
`cancel`	-	Emitted when the picker cancel action fires.
`open`	-	Forwarded when the picker opens.
`close`	-	Forwarded when the picker closes.