OrionDatepicker

Usage

<o-datepicker> displays a configurable datepicker to select a date, a date range or a week, as the demo below.

The time can also be displayed and set. Take a look at the playground.

DatepickerType DatepickerDate DatepickerDisplay DatepickerPlayground

VModels

Name
vModelNil<Date> = undefined
rangeNil<Orion.DateRange> = undefined
multipleNil<Date[]> = undefined

Props

Name
autofocusboolean = undefined
clearableboolean = undefined
clearToNullboolean = undefined
disabledboolean = undefined
disablePopoverboolean = undefined
displayWeekNumberboolean = undefined
donetypingnumber = undefined
forceLabelFloatingboolean = undefined
hideDisabledboolean = undefined
inheritValidationStateboolean = undefined
labelstring = undefined
maxDateDate = undefined
minDateDate = undefined
multipleLabelColorOrion.ColorExtendedAndGreys = 'default'
placeholderstring = undefined
prefixFontIconstring = undefined
prefixIconOrion.Icon = undefined
preserveTimeboolean = undefined
readonlyboolean = undefined
requiredboolean = undefined
selectOnFocusboolean = undefined
sizeOrion.Size = 'md'
suffixFontIconstring = undefined
suffixIconOrion.Icon = undefined
timeboolean = undefined
type"date" | "range" | "week" | "multiple" | "month" = 'date'
validationstring | ((val: any) => boolean) | Orion.Validator.Rule | Orion.Validation.Rule | boolean = undefined
validationErrorMessagestring = undefined
valueDisplayFormat(val: Nil<Date> | Nil<Orion.DateRange>) => string = undefined

Events

Name
Payload type
focus
FocusEvent
blur
FocusEvent
input
T
change
T
clear

Slots

Name
Bindings
multipleDisplay
datas: Date[]
close: (date: Date) => void
popper
No bindings

PublicInstance

Name
Type
hasBeenFocus
() => boolean
isFocus
() => boolean
focus
() => void
blur
Lodash.debounce
clear
() => void
setHasBeenFocus
(value: boolean) => void
isValid
() => boolean
_input
() => HTMLInputElement | undefined
sharedState
() => { hasBeenFocus: boolean; isFocus: boolean; isAutoFilled: boolean; }