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.

The NgStarter Angular Datepicker component lets you let users choose a concrete date or date range through an input connected to a calendar overlay. Use input[ngsDatepicker], ngs-datepicker, and usually ngs-datepicker-toggle for single date fields in forms, filters, deadlines, birth dates, publish dates, schedules, reporting, invoices, and order dates. It includes examples for Basic Datepicker, Datepicker With Custom Icon, Datepicker With Custom Header, and Datepicker Action Buttons.

Basic Datepicker

Use Datepicker when a form needs one concrete date. The input is connected to a calendar overlay and writes a date object through the configured DateAdapter.

Choose a date

MM/DD/YYYY

Datepicker With Custom Icon

Choose a date

MM/DD/YYYY

Datepicker With Custom Header

Custom calendar header

MM/DD/YYYY

Datepicker Action Buttons

Choose a date

MM/DD/YYYY

Basic Date Range Picker

Use Date Range Picker when users need to choose a start and end date together, such as report periods, order filters, booking windows, or analytics ranges.

Enter a date range

–

MM/DD/YYYY – MM/DD/YYYY

Date Range Picker With Quick Presets

Quick presets are useful for common ranges like today, last 7 days, last 30 days, or custom reporting periods.

Enter a date range with presets

–

Date range with custom presets

–