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 mno-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.
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
Variants
outlined (default), filled and underlined — the same three field styles as <mono-input>. Pick a color to see the variant and color combine: outlined = colored border, filled = colored tint, underlined = colored underline.
underlined focuses with a soft glow under the line rather than a ring around the field — tune it with --mono-date-underline-glow (default 0 5px 6px -6px).
Vue SFC
Colors
Every built-in color (primary / secondary / success / danger / warning / info) tints the field's resting border, focus ring and calendar accent — identical to the other form-control palettes.
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.
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); an explicit --mono-date-primary override wins over the color prop. Re-skin globally via the --theme-* tokens.
| Variable | Default | Controls |
|---|---|---|
--mono-date-primary | --theme-primary | Field focus + calendar accent (set by color) |
--mono-date-primary-rgb | primary rgb | Focus ring / calendar accent (as r, g, b) |
--mono-date-underline-glow | 0 5px 6px -6px | Underlined focus glow geometry |
--mono-date-text | --theme-text | Field text color |
--mono-date-muted | text 55% | Placeholder / icon color |
--mono-date-border | --theme-border | Field border color |
--mono-date-surface | --theme-surface | Field background |
--mono-date-danger | --theme-danger | Error-state color |
--mono-date-success | --theme-success | Success-state color |
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' | — | — |
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 | 'invisible' | 'none' | — | How it hides when `visible` is `false`. Defaults to `'none'`. |