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

PreviewSources

Default

December, 2019
MonTueWedThuFriSatSun
25
26
27
28
29
30
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
31
1
2
3
4
5
Dec 12, 2019

Date-picker in popup

false

Date-picker in popup (separated toggle)

API

[class] UiDatePickerDemoModule

@NgModule

[class] UiDatePickerPopupComponent

@Component

Selector:'ui-date-picker-popup'

Members

SignatureDescription
@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

SignatureDescription
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)