Platform: Date Picker Component Technical Design

Date Picker

Summary

The DatePicker is an input component for selecting a date or date range.

See Fundamental NGX:Core implementation of Date Picker.

Example

<fdp-date-picker
  [(ngModel)]="startDate"
  [type]="'single'"
  [format]="MM/dd/yyyy"
  [compact]="true"
  [state]="'valid'"
  [disabled]="true"
  >
</fdp-date-picker>

Design

Property Bindings

type: 'single' | 'range'

Sets date picker type. Choices are 'single' for picking a single date, or 'range' for picking a date range.

placeholder: string

The placeholder text for date picker.

format: string

The date format for display of date. For format string syntax see https://angular.io/api/common/DatePipe

locale: string

The locale for date picker. This property along with format will set the display of date strings in the date picker.

compact: boolean

Whether to show date picker in "compact" mode or not.

state: 'invalid' | 'valid' | 'warning' | 'information'

The state of the date picker. Setting this will change the color of the date picker border.

disabled: boolean

Sets the date picker to 'disabled'.

selectedDate: FdDate

The current date selected when date picker dropdown is displayed.

selectedDateRange: FdRangeDate

The current date range selected when date picker dropdown is displayed.

activeView: FdCalendarView

Active view shown; one of 'day', 'month', 'year'.

startingDayOfWeek: DaysOfWeek

The day of week which is displayed first in date picker.

useValidation: boolean

Toggles validation of date picker input.

dateInputLabel: string

Aria label for date picker input.

displayCalendarToggleLabel: string

Aria label for calendar toggle button.

allowNull: boolean

Whether or not to allow 'null' values for date picker.

placement: Placement

The placement of the popover. It can be one of: top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end.

Notes