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
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
Types
Import
import { DateProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
type | 'date' | 'datetime' | 'time' | 'date' | Picker mode: `date` (default), `datetime`, or `time`. |
modelValue | string | '' | Selected value as a formatted string (two-way bound). |
value | string | — | — |
size | 'sm' | 'md' | 'lg' | 'md' | Visual size / color / variant (mirror mono-input). |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | — |
variant | 'underlined' | 'outlined' | 'filled' | 'outlined' | — |
label | string | — | Field label + helper / validation messaging. |
placeholder | string | — | — |
helperText | string | — | — |
validationState | 'success' | 'default' | 'error' | — | — |
validationMessage | string | — | — |
error | boolean | false | — |
errorMessage | string | — | — |
success | boolean | false | — |
successMessage | string | — | — |
disabled | boolean | false | State flags. |
readonly | boolean | false | — |
required | boolean | false | — |
clearable | boolean | false | — |
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. |