Class DatePicker

Component

A component in its simplest form.

Example

Component.create({
  tagName: "hr",
  cls: "special"
})

Hierarchy

Constructors

constructor

Properties

_cls? baseCls dataSet enableRangeSelect grid maxDate? menu minDate? monthEl months now parent? renderTo? renderedMonth? showWeekNbs stateId? tagName value withoutFooter? yearEl years

Accessors

attr cls disabled el flex height hidden html id itemContainerEl itemId items rendered resizable style tabIndex text title width

Methods

buildState cascade computeZIndex constrainValue findAncestor findAncestorByType findChild findChildByType findChildren findChildrenByType findItem findItemIndex fire focus getInsertBefore getState hasState hide internalRemove internalRender internalSetHidden isFocusable markSelected mask moveMonth nextSibling on onFirstListenerAdded previousSibling print refresh relayEvent remove render renderItem renderItems restoreState saveState setMonthClasses setValue setYearClases setupDraggability show un unmask uniqueID

Constructors

constructor

Properties

Protected Optional _cls

_cls?: string

Protected baseCls

baseCls: string = "datepicker"

A base class not configurable. cls can be used to add extra classes leaving this class alone

Readonly dataSet

dataSet: Record<string, any> = {}

Set arbitrary data on a component.

Should be used with caution as this data is not typed.

enableRangeSelect

enableRangeSelect: boolean = false

Protected grid

grid: HTMLElement

Optional maxDate

maxDate?: DateTime

Protected menu

menu: HTMLElement

Optional minDate

minDate?: DateTime

Protected monthEl

monthEl: HTMLButtonElement

Protected months

months: HTMLElement

Private now

now: DateTime

Optional parent

parent?: Component

When this item is added to a Component this is set to the parent Component

Optional renderTo

renderTo?: HTMLElement

Normally components are rendered to its parent component's element. But in some cases like menu's it's desired to render them to the root and position them absolute.

Private Optional renderedMonth

renderedMonth?: string

Used to determine if a refresh() is needed when new value is set.

showWeekNbs

showWeekNbs: boolean

Optional stateId

stateId?: string

ID used for storing state of the component in the State storage.

If stateId is given it will also be used as itemId

If not set then the component won't store it's state.

Readonly tagName

tagName: keyof HTMLElementTagNameMap = "div"

The tagname used for the root HTMLElement of this component

value

value: DateTime

Optional withoutFooter

withoutFooter?: boolean

Protected yearEl

yearEl: HTMLButtonElement

Protected years

years: HTMLElement

Accessors

attr

  • set attr(attr): void

  • Set attributes of the DOM element

    Parameters

    • attr: Record<string, string>

    Returns void

cls

  • set cls(cls): void

  • Class name to add to element

    Some common classes to add for layout:

    • hbox: Set's flex layout to horizontal boxes. Use flex: n to stretch columns
    • vbox: As above but vertical
    • fit: Fit the parent's size
    • scroll: Set's autoscroll: true
    • pad: Set common padding on the element
    • border-(top|bottom|left|right) to add a border

    Other:

    • goui-fade-in: The component will fade in when show() is used.
    • goui-fade-out: The component will fade out when hide is used.

    Parameters

    • cls: string

    Returns void

disabled

  • get disabled(): boolean

  • Returns boolean

  • set disabled(disabled): void

  • Disable component

    Parameters

    • disabled: boolean

    Returns void

el

flex

  • get flex(): string | number

  • CSS flex value

    Returns string | number

  • set flex(flex): void

  • CSS flex value

    Parameters

    • flex: string | number

    Returns void

height

  • get height(): number

  • Returns number

  • set height(height): void

  • The height in scalable pixels

    Parameters

    • height: number

    Returns void

    See

    width

hidden

html

  • get html(): string

  • Returns string

  • set html(html): void

  • Set the HTML contents of the component (innerHTML)

    Parameters

    • html: string

    Returns void

id

Protected itemContainerEl

  • get itemContainerEl(): HTMLElement

  • Returns HTMLElement

itemId

  • get itemId(): string

  • Component item ID that can be used to lookup the Component inside a Component with Component.findItem() and Component.findItemIndex();

    if stateId is given it will also be used as itemId

    Returns string

  • set itemId(itemId): void

  • Parameters

    • itemId: string

    Returns void

items

rendered

  • get rendered(): boolean

  • Check if the component has been rendered and added to the DOM tree

    Returns boolean

resizable

  • get resizable(): boolean

  • Returns boolean

  • set resizable(resizable): void

  • Make it resizable

    Parameters

    • resizable: boolean

    Returns void

style

  • get style(): Partial<CSSStyleDeclaration>

  • Returns Partial<CSSStyleDeclaration>

  • set style(style): void

  • Set inline style

    Parameters

    • style: Partial<CSSStyleDeclaration>

    Returns void

tabIndex

  • get tabIndex(): number

  • Returns number

  • set tabIndex(tabIndex): void

  • The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).

    Parameters

    • tabIndex: number

    Returns void

text

title

width

  • get width(): number

  • Returns number

  • set width(width): void

  • Set the width in scalable pixels

    The width is applied in rem units divided by 10. Because the font-size of the html element has a font-size of 62.5% this is equals the amount of pixels, but it can be scaled easily for different themes.

    Parameters

    • width: number

    Returns void

Methods

Protected buildState

cascade

  • Cascade down the component hierarchy

    Parameters

    • fn: ((comp) => boolean | void)

      When the function returns false then the cascading will be stopped. The current Component will be finished!

        • (comp): boolean | void

        • Parameters

          Returns boolean | void

    Returns DatePicker

computeZIndex

Private constrainValue

findAncestor

  • Find ancestor

    The method traverses the Component's ancestors (heading toward the document root) until it finds one where the given function returns true.

    Parameters

    • fn: ((cmp) => boolean | void)

      When the function returns true the item will be returned. Otherwise it will move up to the next parent.

        • (cmp): boolean | void

        • Parameters

          Returns boolean | void

    Returns undefined | Component

findAncestorByType

  • Find parent by instance type of the parent

    Type Parameters

    Parameters

    • cls: T

    Returns undefined | InstanceType<T>

    Example

    const form = textField.findAncestorByType(Form);

findChild

findChildByType

  • Find child by instance type of the parent

    Type Parameters

    Parameters

    • cls: ClassTypeOf<T>

    Returns undefined | T

    Example

    const form = textField.findAncestorByType(Form);

findChildren

findChildrenByType

findItem

findItemIndex

fire

focus

Protected getInsertBefore

Protected getState

Protected hasState

hide

  • Hide this component

    This sets the "hidden" attribute on the DOM element which set's CSS display:none. You can change this to fade with css class "goui-fade-in" and "goui-fade-out"

    If you want to override this function, please override internalSetHidden instead so the beforeshow and show event fire at the right time.

    Returns boolean

Protected internalRemove

Protected internalRender

Protected internalSetHidden

isFocusable

Private markSelected

mask

  • Mask the component to disable user interaction It creates an absolute positioned Mask component. This component should have a non-static position style for this to work.

    Parameters

    • delay: number = 300

    Returns void

moveMonth

nextSibling

on

Protected onFirstListenerAdded

previousSibling

print

refresh

Protected relayEvent

remove

render

  • Render the component

    Parameters

    • Optional parentEl: Node

      The element this componennt will render into

    • Optional insertBefore: Node

      If given, the element will be inserted before this child

    Returns HTMLElement

Protected renderItem

Protected renderItems

Protected restoreState

Protected saveState

  • Protected

    Call save start when something relevant to the state changes. Implement buildState() to save relevant state properties and restore it in restoreState()

    stateId must be set on components to be stateful

    Returns void

Private setMonthClasses

setValue

Private setYearClases

Private setupDraggability

show

  • Show the component

    If you want to override this function, please override internalSetHidden instead so the beforeshow and show event fire at the right time.

    Returns boolean

un

unmask

Static uniqueID

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc