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

vModelNil<Date> = undefined

rangeNil<Orion.DateRange> = undefined

multipleNil<Date[]> = undefined

Props

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

typeany = 'date'

validationany = undefined

validationErrorMessagestring = undefined

valueDisplayFormat(val: Date) => string = undefined

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

sharedState

() => {
	hasBeenFocus: boolean;
	isFocus: boolean;
	isAutoFilled: boolean;
}