@talenra/components documentation
  1. Components
  2. DateComponent

File

date/src/date/date.component.ts

Description

The Date component allows users to enter a date either through text input or by choosing from a calendar overlay. It provides an optional field to enter a time.

Example :
<talenra-form-field label="Simple date">
  <talenra-date formControlName="simpleDate"></talenra-date>
</talenra-form-field>

<talenra-form-field label="Date with time">
  <talenra-date formControlName="dateTime" showTime></talenra-date>
</talenra-form-field>

<talenra-form-field label="Date with filter">
  <talenra-date formControlName="dateTime" [dateFilterFn]="weekdaysFilter"></talenra-date>
</talenra-form-field>

Import

Example :
import { DateComponent } from '@talenra/components/date';

../../#date

Extends

FormFieldControlBaseComponent

Implements

OnInit AfterViewInit ControlValueAccessor FormFieldControl

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
providers { provide: DateInputPipe } DateComponent DateComponent
selector talenra-date
imports ClearButtonComponent ControlContainerComponent InputComponent TalenraDateDirective ReactiveFormsModule FormsModule IconComponent TalenraTimeDirective
styleUrls ./date.component.scss
templateUrl ./date.component.html

Index

Properties
Methods
Inputs
Accessors

Inputs

dateFilterFn
Type : DateFilterFn

Function to filter dates in the calendar overlay.

See DateFilterFn See firstDayOfMonthFilter See weekdaysFilter

Example :
<talenra-date [dateFilterFn]="weekdaysFilter" />
disabled
Type : boolean

Determines whether the control is disabled/enabled.

Example :
<talenra-date disabled />
isBirthDate
Type : boolean
Default value : false

Determines whether the date is a birth date. Enforces the date to be today or in the past.

Example :
<talenra-date isBirthDate />
showTime
Type : boolean
Default value : false

Determines whether the time input is shown.

Example :
<talenra-date showTime />
timeLabel
Type : string
Default value : ''

Label displayed for the time input (optional).

Example :
<talenra-date showTime timeLabel="Time HH:MM" />
calendarInitialDate
Type : Date | null
Default value : null

Date the calendar overlay opens with if the control has no value.

Example :
protected calendarInitialDate = new Date('2020-06-30');
Example :
<talenra-date [calendarInitialDate]="calendarInitialDate" />
calendarInitialMode
Type : TOverlayMode
Default value : OverlayMode.Day

Mode the calendar overlay opens with if the control has no value.

Example :
<talenra-date calendarInitialMode="year" />

See OverlayMode

Methods

Public focus
focus()

Set the focus to the date input.

Returns : void
showClearButton
showClearButton(item: "date" | "time")

Determines whether clear button is visible.

Parameters :
Name Type Optional
item "date" | "time" No
Returns : boolean

Properties

hasControlContainer
Type : unknown
Default value : true

Handle label, foucus etc. within the control, not in FormField

Accessors

disabled
getdisabled()

Determines whether the control is disabled/enabled.

Example :
<talenra-date disabled />
setdisabled(value: boolean)

Set the control's disabled state.

Parameters :
Name Type Optional
value boolean No
Returns : void

results matching ""

    No results matching ""