Appearance
Date
A rich date / datetime / time picker built on flatpickr. Set type to date (default), datetime, or time. The common flatpickr options are exposed as named props, and the options prop passes through any other flatpickr option — so the picker is completely featured.
model-value is the formatted string (flatpickr's dateStr); the change event also carries the raw Date[] in detail.dates. It shares mono-input's look: sizes, colors, variants, validation, clearable, cssClass, and the width/height sizing props.
The field is Basecoat's .input-group with a leading icon (see Theme and Input); the calendar is flatpickr restyled in Basecoat's popover idiom — a --popover surface with a 1px --foreground/10 ring and an md shadow, --accent for hover / today / the range middle, --primary (or the color prop's role token) for the selected day. Dark mode is built in, calendar included.
Basic
Default date picker with label, placeholder, and value binding.
Vue SFC
Sizes
The size prop scales the field from xs to xxl — the same scale as the other form controls, defaulting to md.
Vue SFC
Colors
Pick a colour and every variant takes it. Every built-in color sets the focus ring and the calendar's selected-day accent; a resting field is always on --input, like the other ported controls. primary focuses with --ring and selects with --primary.
outlined (default), filled and underlined — the same three field styles as <mono-input>. The variant and the colour combine: outlined = coloured border, filled = coloured tint, underlined = coloured underline. filled is luma's field (transparent border on an --input/50 surface) and underlined is sera's (square, bottom edge only, no ring).
Vue SFC
States
disabled (no open, no selection), readonly (display only), and required (a * next to the label).
Vue SFC
Validation
validation-state — error or success (mono-date has no warning/invalid state) — with a validation-message. The error / success booleans + error-message / success-message work too. error is Basecoat's aria-invalid treatment: a permanent --destructive border and /20 ring, the label turns --destructive, the message carries role="alert".
Vue SFC
Clearable
With clearable, a clear (✕) button appears whenever a date is selected.
Vue SFC
Datetime
type="datetime" adds a time picker beside the calendar.
Vue SFC
Time
type="time" is a time-only picker (no calendar). time-24hr switches to 24-hour mode.
Vue SFC
Range
mode="range" lets the user pick a start and end date.
Vue SFC
Inline
inline renders the calendar always-visible, without a popup.
Vue SFC
Typeable
typeable lets the user type into the field. mono-date live-parses as you type — the calendar navigates to the value and auto-selects it once a complete date (in dateFormat) is entered.
Vue SFC
Options passthrough
Pass any flatpickr option via the options prop (here: week numbers, a custom dateFormat, and minDate).
Vue SFC
Customized
The cssClass prop appends a class to each field part (root / label / field / native / message).
Vue SFC
CSS Variables
Vue SFC
Themed through --mono-date-* custom properties (they inherit and pierce the shadow boundary; the element copies the accent onto the body-level calendar as --cal-accent); an explicit --mono-date-primary override wins over the color prop. The field takes the same knobs as input, renamed --mono-date-*; re-skin globally via the tokens or switch flavor.
| Variable | Default | Controls |
|---|---|---|
--mono-date-primary (+ --mono-date-primary-foreground) | --ring / --primary-foreground (set by color) | The accent: focus ring, and the calendar's selected day through --mono-date-calendar-accent |
--mono-date-ring-color (alias --mono-date-focus-color) / -ring-width / -ring-alpha | the accent / --mono-ring-width / --mono-ring-alpha | Focus ring |
--mono-date-border-color (aliases --mono-date-border, --mono-date-rest-border) / --mono-date-side-border-color | --input / = border | Resting border; the three non-bottom edges |
--mono-date-bg (alias --mono-date-surface) / --mono-date-shadow | --mono-mode-surface / --mono-shadow-xs | Field surface and shadow |
--mono-date-radius / -radius-<size>, --mono-date-height-<size>, --mono-date-padding-x(-<size>), --mono-date-padding-y, --mono-date-font-<size>, --mono-date-line-height(-<size>), --mono-date-gap | as input | Geometry and text |
--mono-date-affix-padding / -affix-gap / -affix-icon-size | 2 / 1.5 / 4 × --mono-spacing | The leading icon's inset, its gap to the text, its size |
--mono-date-clear-radius, --mono-date-disabled-bg, --mono-date-readonly-bg, --mono-date-filled-bg, --mono-date-outline-*, --mono-date-label-*, --mono-date-message-* | as input | Clear button, state surfaces, variant knobs, label, message |
--mono-date-color (alias --mono-date-text), --mono-date-placeholder, --mono-date-muted | --foreground, --muted-foreground, --muted-foreground | Text, placeholder, icon / message ink |
--mono-date-danger / --mono-date-success | --destructive / --success | Validation colours |
--mono-date-calendar-bg / -color / -radius / -shadow / -ring / -day-radius | --popover / --popover-foreground / --mono-radius-md / --mono-shadow-md / 1px --foreground/10 / --mono-radius-md | The calendar frame and its day cells |
Deprecated and honoured as no-ops until 2.0: --mono-date-primary-rgb, --mono-date-underline-glow, --mono-date-soft, the per-colour filled tints.
Types
Import
import { DateProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
type | 'date' | 'datetime' | 'time' | — | Picker mode: `date` (default), `datetime`, or `time`. |
modelValue | string | — | Selected value as a formatted string (two-way bound). |
value | string | — | — |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | — | Visual size / color / variant (mirror mono-input). |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark' | — | — |
variant | 'underlined' | 'outlined' | 'filled' | — | — |
label | string | — | Field label + helper / validation messaging. |
placeholder | string | — | — |
helperText | string | — | — |
validationState | 'success' | 'default' | 'error' | — | — |
validationMessage | string | — | — |
error | boolean | — | — |
errorMessage | string | — | — |
success | boolean | — | — |
successMessage | string | — | — |
disabled | boolean | — | State flags. |
readonly | boolean | — | — |
required | boolean | — | — |
clearable | boolean | — | — |
ariaLabelText | string | — | — |
dateFormat | string | — | Output/parsing format, e.g. `"Y-m-d"`, `"d M Y"`, `"H:i"`. |
altInput | boolean | — | Show a second, human-readable input while submitting `dateFormat`. |
altFormat | string | — | — |
typeable | boolean | — | Let the user type into the input directly. Beyond flatpickr's Enter/blur parsing, mono-date live-parses as you type: the calendar navigates to the value and auto-selects it once a complete date (matching `dateFormat`) is entered. Best used without `altInput`. |
clickOpens | boolean | — | Open the calendar on input click (default true). |
defaultDate | string | number | Date | (string | number | Date)[] | — | — |
minDate | string | number | Date | — | — |
maxDate | string | number | Date | — | — |
disable | DateLimit<DateOption>[] | — | Dates to disable (values, ranges, or predicate fns). |
enable | DateLimit<DateOption>[] | — | Whitelist of selectable dates (everything else disabled). |
mode | 'single' | 'multiple' | 'range' | — | — |
enableSeconds | boolean | — | — |
time24hr | boolean | — | 24-hour time (flatpickr `time_24hr`). |
hourIncrement | number | — | — |
minuteIncrement | number | — | — |
defaultHour | number | — | — |
defaultMinute | number | — | — |
inline | boolean | — | Render the calendar inline (always visible). |
weekNumbers | boolean | — | — |
monthSelectorType | 'static' | 'dropdown' | — | — |
shorthandCurrentMonth | boolean | — | — |
position | 'auto' | 'above' | 'below' | 'auto left' | 'auto center' | 'auto right' | 'above left' | 'above center' | 'above right' | 'below left' | 'below center' | 'below right' | (self: Instance, customElement: HTMLElement | undefined) => void | — | — |
ariaDateFormat | string | — | — |
locale | 'default' | 'ar' | 'at' | 'az' | 'be' | 'bg' | 'bn' | 'bs' | 'ca' | 'cat' | 'ckb' | 'cs' | 'cy' | 'da' | 'de' | 'en' | 'eo' | 'es' | 'et' | 'fa' | 'fi' | 'fo' | 'fr' | 'gr' | 'he' | 'hi' | 'hr' | 'hu' | 'hy' | 'id' | 'is' | 'it' | 'ja' | 'ka' | 'ko' | 'km' | 'kz' | 'lt' | 'lv' | 'mk' | 'mn' | 'ms' | 'my' | 'nl' | 'nn' | 'no' | 'pa' | 'pl' | 'pt' | 'ro' | 'ru' | 'si' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'th' | 'tr' | 'uk' | 'vn' | 'zh' | 'uz' | 'uz_latn' | 'zh_tw' | Partial<CustomLocale> | — | flatpickr locale key or object. |
options | Partial<Partial<BaseOptions>> | — | Escape hatch — any other flatpickr option, merged into the config. Lets you use the full flatpickr feature set beyond the named props above. |
width | string | number | — | Explicit sizing (CSS string or number → px). Use `width="100%"` for full width. |
height | string | number | — | — |
minWidth | string | number | — | — |
maxWidth | string | number | — | — |
minHeight | string | number | — | — |
maxHeight | string | number | — | — |
cssClass | DateCssClass | — | Per-part class overrides. |
visible | boolean | — | Whether the control is shown. Defaults to `true`. |
visibleType | 'none' | 'invisible' | — | How it hides when `visible` is `false`. Defaults to `'none'`. |