@anguless/angulux/datepicker

datepicker

1 declarations5 demos

import

import { DatePickerModule } from '@anguless/angulux/datepicker';

Basic

Two-way binding to a Date is all a plain date field needs.

<agl-datePicker [(ngModel)]="date" />

Icon and button bar

showIcon adds a trigger button; showButtonBar adds Today and Clear.

<agl-datePicker [(ngModel)]="date" [showIcon]="true" [showButtonBar]="true" />

Inline

An inline picker is always visible instead of opening in an overlay.

Su	Mo	Tu	We	Th	Fr	Sa
30	31	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	1	2	3

<agl-datePicker [(ngModel)]="date" [inline]="true" />

Range

In range mode the bound value is an array of two dates.

<agl-datePicker [(ngModel)]="dates" selectionMode="range" [readonlyInput]="true" />

Time

showTime adds a time section; hourFormat switches between 12 and 24 hours.

<agl-datePicker [(ngModel)]="date" [showTime]="true" hourFormat="24" />

API

Generated from the committed corpus, which check:corpus holds to the built library.

DatePicker

componentagl-datePicker, agl-datepicker, agl-date-picker

DatePicker is a form component to work with dates.

Input	Type	Default	Description
iconDisplay	'input' \| 'button'	not documented
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the component.
inputStyle	{ [klass: string]: any } \| null \| undefined	not documented	Inline style of the input field.
inputId	string \| undefined	not documented	Identifier of the focus input to match a label defined for the component.
inputStyleClass	string \| undefined	not documented	Style class of the input field.
placeholder	string \| undefined	not documented	Placeholder text for the input.
ariaLabelledBy	string \| undefined	not documented	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
ariaLabel	string \| undefined	not documented	Defines a string that labels the input for accessibility.
iconAriaLabel	string \| undefined	not documented	Defines a string that labels the icon button for accessibility.
dateFormat	string \| undefined	not documented	Format of the date which can also be defined at locale settings.
multipleSeparator	string	not documented	Separator for multiple selection mode.
rangeSeparator	string	not documented	Separator for joining start and end dates on range selection mode.
inline	boolean	not documented	When enabled, displays the datepicker as inline. Default is false for popup mode.
showOtherMonths	boolean	not documented	Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
selectOtherMonths	boolean \| undefined	not documented	Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
showIcon	boolean \| undefined	not documented	When enabled, displays a button with icon next to input.
icon	string \| undefined	not documented	Icon of the datepicker button.
readonlyInput	boolean \| undefined	not documented	When specified, prevents entering the date manually with keyboard.
shortYearCutoff	any	not documented	The cutoff year for determining the century for a date.
hourFormat	string	not documented	Specifies 12 or 24 hour format.
timeOnly	boolean \| undefined	not documented	Whether to display timepicker only.
stepHour	number	not documented	Hours to change per step.
stepMinute	number	not documented	Minutes to change per step.
stepSecond	number	not documented	Seconds to change per step.
showSeconds	boolean	not documented	Whether to show the seconds in time picker.
showOnFocus	boolean	not documented	When disabled, datepicker will not be visible with input focus.
showWeek	boolean	not documented	When enabled, datepicker will show week numbers.
startWeekFromFirstDayOfYear	boolean	not documented	When enabled, datepicker will start week numbers from first day of the year.
showClear	boolean	not documented	When enabled, a clear icon is displayed to clear the value.
dataType	string	not documented	Type of the value to write back to ngModel, default is date and alternative is string.
selectionMode	'single' \| 'multiple' \| 'range' \| undefined	not documented	Defines the quantity of the selection, valid values are "single", "multiple" and "range".
maxDateCount	number \| undefined	not documented	Maximum number of selectable dates in multiple mode.
showButtonBar	boolean \| undefined	not documented	Whether to display today and clear buttons at the footer
todayButtonStyleClass	string \| undefined	not documented	Style class of the today button.
clearButtonStyleClass	string \| undefined	not documented	Style class of the clear button.
autofocus	boolean \| undefined	not documented	When present, it specifies that the component should automatically get focus on load.
autoZIndex	boolean	not documented	Whether to automatically manage layering.
baseZIndex	number	not documented	Base zIndex value to use in layering.
panelStyleClass	string \| undefined	not documented	Style class of the datetimepicker container element.
panelStyle	any	not documented	Inline style of the datetimepicker container element.
keepInvalid	boolean	not documented	Keep invalid value when input blur.
hideOnDateTimeSelect	boolean	not documented	Whether to hide the overlay on date selection.
touchUI	boolean \| undefined	not documented	When enabled, datepicker overlay is displayed as optimized for touch devices.
timeSeparator	string	not documented	Separator of time selector.
focusTrap	boolean	not documented	When enabled, can only focus on elements inside the datepicker.
showTransitionOptions deprecated — since v21.0.0, use `motionOptions` instead.	string	not documented	Transition options of the show animation.
hideTransitionOptions deprecated — since v21.0.0, use `motionOptions` instead.	string	not documented	Transition options of the hide animation.
tabindex	number \| undefined	not documented	Index of the element in tabbing order.
minDate	Date \| undefined \| null	not documented	The minimum selectable date.
maxDate	Date \| undefined \| null	not documented	The maximum selectable date.
disabledDates	Date[]	not documented	Array with dates that should be disabled (not selectable).
disabledDays	number[]	not documented	Array with weekday numbers that should be disabled (not selectable).
showTime	boolean	not documented	Whether to display timepicker.
responsiveOptions	DatePickerResponsiveOptions[]	not documented	An array of options for responsive design.
numberOfMonths	number	not documented	Number of months to display.
firstDayOfWeek	number	not documented	Defines the first of the week for various date calculations.
view	DatePickerTypeView	not documented	Type of view to display, valid values are "date" for datepicker and "month" for month picker.
defaultDate	Date \| null	not documented	Set the date to highlight on first opening if the field is blank.
appendTo	HTMLElement \| ElementRef \| TemplateRef<any> \| 'self' \| 'body' \| null \| undefined \| any	'self'	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
motionOptions	MotionOptions \| undefined	not documented	The motion options.

Output	Type	Description
onFocus	EventEmitter<Event>	Callback to invoke on focus of input field.
onBlur	EventEmitter<Event>	Callback to invoke on blur of input field.
onClose	EventEmitter<HTMLElement>	Callback to invoke when date panel closed.
onSelect	EventEmitter<Date>	Callback to invoke on date select.
onClear	EventEmitter<any>	Callback to invoke when input field cleared.
onInput	EventEmitter<any>	Callback to invoke when input field is being typed.
onTodayClick	EventEmitter<Date>	Callback to invoke when today button is clicked.
onClearClick	EventEmitter<any>	Callback to invoke when clear button is clicked.
onMonthChange	EventEmitter<DatePickerMonthChangeEvent>	Callback to invoke when a month is changed using the navigators.
onYearChange	EventEmitter<DatePickerYearChangeEvent>	Callback to invoke when a year is changed using the navigators.
onClickOutside	EventEmitter<any>	Callback to invoke when clicked outside of the date panel.
onShow	EventEmitter<HTMLElement>	Callback to invoke when datepicker panel is shown.

Template slot	Description
<ng-template #date>	Custom template for date cells.
<ng-template #header>	Custom template for header section.
<ng-template #footer>	Custom template for footer section.
<ng-template #disabledDate>	Custom template for disabled date cells.
<ng-template #decade>	Custom template for decade view.
<ng-template #previousicon>	Custom template for previous month icon.
<ng-template #nexticon>	Custom template for next month icon.
<ng-template #triggericon>	Custom template for trigger icon.
<ng-template #clearicon>	Custom template for clear icon.
<ng-template #decrementicon>	Custom template for decrement icon.
<ng-template #incrementicon>	Custom template for increment icon.
<ng-template #inputicon>	Custom template for input icon.
<ng-template #buttonbar>	Custom template for button bar.

Inherited from BaseInput

inherited

Input	Type	Default	Description
fluid		false	Spans 100% width of the container when enabled.
variant	'filled' \| 'outlined' \| undefined	'outlined'	Specifies the input variant of the component.
size	'large' \| 'small' \| undefined	undefined	Specifies the size of the component.
inputSize	number \| null \| undefined	undefined	Specifies the visible width of the input element in characters.
pattern	string \| null \| undefined	undefined	Specifies the value must match the pattern. A list of regular expressions — what Signal Forms binds through `[formField]` — is ignored, because the form validates those itself.
min	number \| null \| undefined	undefined	The value must be greater than or equal to the value. A numeric string is read as a number; anything else that is not a finite number, such as the `Date` limit of a date field, is ignored.
max	number \| null \| undefined	undefined	The value must be less than or equal to the value. A numeric string is read as a number; anything else that is not a finite number, such as the `Date` limit of a date field, is ignored.
step	number \| null \| undefined	undefined	Unless the step is set to the any literal, the value must be min + an integral multiple of the step.
minlength	number \| null \| undefined	undefined	The number of characters (code points) must not be less than the value of the attribute, if non-empty.
maxlength	number \| null \| undefined	undefined	The number of characters (code points) must not exceed the value of the attribute.

Inherited from BaseEditableHolder

inherited

Input	Type	Default	Description
required		false	There must be a value (if set). Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` is required when that control carries `Validators.required` or `Validators.requiredTrue`.
invalid		false	When present, it specifies that the component should have invalid state style. Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` shows the state of that control once it is touched or dirty.
touched	boolean \| undefined	undefined	Whether the user has visited the control. Once this or `dirty` is set, the invalid state style waits for interaction: it appears when the control is touched or dirty. Signal Forms' `[formField]` sets both, so an untouched required field is not shown as invalid. Leave both unset and `invalid` alone decides.
dirty	boolean \| undefined	undefined	Whether the user has changed the value. See `touched`.
disabled		false	When present, it specifies that the component should have disabled state style.
name	string \| undefined	undefined	When present, it specifies that the name of the input.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.