ui-date-picker

Generation

ng g @ngx-kit/collection:ui-date-picker [name]

README

Date picker component with without 3rd party libs dependency (works with native js Date).

Supports focus-trap in popup and keyboard navigation.

Hammerjs

Add Hammer.JS for proper working.

Demo

Preview

Sources

Default

June, 2020

Jun 6, 2020

Mon	Tue	Wed	Thu	Fri	Sat	Sun
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5

Date-picker in popup

false

Date-picker in popup (separated toggle)

API

[class] UiDatePickerDemoModule

@NgModule

[class] UiDatePickerPopupComponent

@Component

Selector:'ui-date-picker-popup'

Members

Signature	Description
`@Input() anchor: KitAnchor \| HTMLElement`
`@Input() toggle: KitOverlayToggleDirective`

[class] UiDatePickerModule

@NgModule

Exports:

[
    KitAnchorModule,
    KitOutsideClickModule,
    KitOverlayModule,
    KitInputDateModule,
    UiDatePickerComponent,
    UiDatePickerPopupComponent,
  ]

[class] UiDatePickerComponent

@Component

Selector:'ui-date-picker'

Members

Signature	Description
`datesGrid: Observable<KitDatePickerGrid>`
`monthCursor: Observable<Date \| null>`
`weekdays: Date[] = []`
`modMonth(modifier: number)`
`modYear(modifier: number)`
`registerOnChange(fn: any)`
`registerOnTouched(fn: any)`
`setDate(date: Date)`
`setDisabledState(isDisabled: boolean)`
`writeValue(rawValue: any)`