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

Props

autofocusboolean = false

clearableboolean = false

clearToNullboolean = false

disabledboolean = false

disablePopoverboolean = false

displayWeekNumberboolean = false

donetypingnumber = 0

forceLabelFloatingboolean = false

hideDisabledboolean = false

inheritValidationStateboolean = undefined

labelstring = undefined

maxDateUndef<Date> = undefined

minDateUndef<Date> = undefined

modelValueT = undefined

multipleDate[] = () => []

multipleLabelColorOrion.ColorExtendedAndGreys = 'default'

prefixFontIconstring = undefined

prefixIconOrion.Icon = undefined

preserveTimeboolean = false

rangeUndef<Orion.DateRange> = undefined

readonlyboolean = false

requiredboolean = false

selectOnFocusboolean = false

sizeOrion.Size = 'md'

suffixFontIconstring = undefined

suffixIconOrion.Icon = undefined

timeboolean = false

typeOrion.DatepickerType = 'date'

validationstring | ((val: any) => boolean) | Orion.Validator.Rule | Orion.Validation.Rule | boolean = undefined

validationErrorMessagestring = undefined

valueDisplayFormatFunction = undefined

Events

focus

FocusEvent

blur

FocusEvent

input

VModelType

change

VModelType

update:modelValue

VModelType

clear

No payload

update:range

Nil<Orion.DateRange>

update:multiple

Date[]

Slots

multipleDisplay

datas: Date[]

close: (date: Date) => void

popper

No bindings

PublicInstance

hasBeenFocus

() => boolean

isFocus

() => boolean

focus

() => void

blur

Lodash.debounce

clear

() => void

setHasBeenFocus

(value: boolean) => void

isValid

() => boolean

_input

() => HTMLInputElement | undefined