Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Datepicker

Datepicker is a set of components and directives for choosing dates through an input and a calendar overlay. Use input[ngsDatepicker], ngs-datepicker, and usually ngs-datepicker-toggle for a single date. Use ngs-date-range-input with ngs-date-range-picker when the user must choose a start and end date.

Use it for date fields in forms, date filters, deadlines, birth dates, publish dates, schedules, reporting, invoice dates, and order dates. The form value is a date object handled by the configured DateAdapter, not a date format preference. Do not use it to choose a date display format, choose only a time, render a static event calendar, build a scheduler, or format an existing date.

Datepicker

PropTypeDefault
startAt
The date to open the calendar to initially.
D | nullnull
calendarHeaderComponent
Custom component to be used as the header for the calendar.
Type<any> | nullnull
quickPresets
The presets to show in the datepicker.
DatepickerPreset<D>[][]
showQuickPresets
Whether to show the quick presets.
booleanfalse

DateRangePicker

PropTypeDefault
startAt
The date to open the calendar to initially.
D | nullnull
calendarHeaderComponent
Custom component to be used as the header for the calendar.
Type<any> | nullnull
quickPresets
The presets to show in the datepicker.
DatepickerPreset<D>[] | nullnull
showQuickPresets
Whether to show the quick presets.
booleanfalse

DatepickerInput

PropTypeDefault
ngsDatepicker
The datepicker that this input is associated with.
Datepicker<D>-

DatepickerToggle

PropTypeDefault
for
The datepicker that this toggle is associated with.
Datepicker<D> | DateRangePicker<D>-