Skip to content

SiDateRangeFilterComponent documentation

selector
si-date-range-filter

Input Properties

NameTypeDefaultDescription
advancedLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.ADVANCED:Advanced`label for the "advanced" switch
afterLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.AFTER:After`label for the "After" toggle
applyLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.APPLY:Apply`label for the "apply" switch
basicMode
("input" | "calendar")'calendar'Determines whether to show input fields or a date-range calendar in basic mode. When time selection is enabled, this has no effect and input fields are always shown.
beforeLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.BEFORE:Before`label for the "Before" toggle
dateLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.DATE:Date`label for "Date" field / radio button
datepickerConfig
DatepickerInputConfigBase configuration on how the dates should be displayed, parts of it may be overwritten internally.
datePlaceholder
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.DATE_PLACEHOLDER:Select date`Placeholder for date fields
enableTimeSelection
booleanfalseDetermines if time is selectable or only dates
fromLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.FROM:From`label for the "Reference point" title
hideAdvancedMode
booleanfalseHides the advanced mode if input allows
nowLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.NOW:Now`label for the "Now" checkbox
presetLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.PRESETS:Presets`label for the "search" input
presetList
DateRangePreset[]List of preset time ranges. When not present or empty, the preset section won't show
presetSearch
booleantrueDetermines if there's a search field for the preset list
previewLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.PREVIEW:Preview`label for the "Preview" title
range
Required		DateRangeFilterThe filter range object
rangeLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.RANGE:Range`label for the "Range" title
refLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.REF_POINT:Reference point`label for the "Reference point" title
reverseInputFields
booleanfalseReverses the order of the from/to fields
searchLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.SEARCH:Search`label for the "search" input
showApplyButton
booleanfalseDetermines whether to show the 'Apply' button
todayLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.TODAY:Today`label for the "Today" checkbox
toLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.TO:To`label for the "Reference point" title
unitLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.UNIT:Unit`label for the "Unit" select
valueLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.VALUE:Value`label for the "value" number input
withinLabel
TranslatableString$localize`:@@SI_DATE_RANGE_FILTER.WITHIN:Within`label for the "Within" toggle

Output Properties

NameTypeDescription
applyClicked
voidEvent fired when the apply button has been clicked
rangeChange
DateRangeFilterThe filter range object

Types Documentation

(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
extends DatepickerConfig
Properties
Similar to dateTimeFormat , but used when only a date is displayed (e.g. when showTime === false or disabledTime === true ). Only numeric date formats are supported.
dateFormat?: string
A custom date/time format according the Angular date pipe (see https://angular.dev/api/common/DatePipe ). Only numeric date formats are supported. The format is used to render the time of a date-time criterion. If not specified, mediumTime is used if the showSeconds flag is true, otherwise shortTime as default. For the date-only case, 'shortDate' is used.
dateTimeFormat?: string
Defines the time is disabled when visible. Will also be updated on user change. Default is false .
disabledTime?: boolean from disabledTime
Text or translation key for the disabled disable time. Default is Ignore time .
disabledTimeText?: TranslatableString from disabledTimeText
Options to turn on date range selection.
enableDateRange?: boolean from enableDateRange
Text or translation key for the enabled disable time. Default is Consider time .
enabledTimeText?: TranslatableString from enabledTimeText
Consider time with minDate and maxDate
enableTimeValidation?: boolean from enableTimeValidation
Option to use two months view for date range picking.
enableTwoMonthDateRange?: boolean from enableTwoMonthDateRange
endTimeLabel?: string from endTimeLabel
hideLabels?: boolean from hideLabels
Configuration for hiding week numbers. Default is false .
hideWeekNumbers?: boolean from hideWeekNumbers
hoursAriaLabel?: string from hoursAriaLabel
hoursLabel?: string from hoursLabel
hoursPlaceholder?: string from hoursPlaceholder
Hides disable time switch in the timepicker part and includes mandatory the time in the picker.
mandatoryTime?: boolean from mandatoryTime
Maximal (latest) selectable date.
maxDate?: Date from maxDate
meridians?: string[] from meridians
meridiansAriaLabel?: string from meridiansAriaLabel
meridiansLabel?: string from meridiansLabel
millisecondsAriaLabel?: string from millisecondsAriaLabel
millisecondsLabel?: string from millisecondsLabel
millisecondsPlaceholder?: string from millisecondsPlaceholder
Minimal (earliest) selectable date.
minDate?: Date from minDate
minutesAriaLabel?: string from minutesAriaLabel
minutesLabel?: string from minutesLabel
minutesPlaceholder?: string from minutesPlaceholder
Only month and year are selectable.
onlyMonthSelection?: boolean from onlyMonthSelection
secondsAriaLabel?: string from secondsAriaLabel
secondsLabel?: string from secondsLabel
secondsPlaceholder?: string from secondsPlaceholder
Defines the timepicker milliseconds visibility . Default is false .
showMilliseconds?: boolean from showMilliseconds
Defines the timepicker minutes visibility. Default is true .
showMinutes?: boolean from showMinutes
Defines the timepicker seconds visibility . Default is false .
showSeconds?: boolean from showSeconds
Defines the timepicker visibility. Default is false .
showTime?: boolean from showTime
startTimeLabel?: string from startTimeLabel
Text or translation key for today button title. Default is Today .
todayText?: TranslatableString from todayText
Defines the starting day of the week. Default is monday .
weekStartDay?: WeekStart from weekStartDay
(DateRangePresetOffset | DateRangePresetCustom)
Properties
point1: (Date | "now")
point2: (number | Date)
range?: ("after" | "before" | "within")
Translatable
import
Properties
Defines the time is disabled when visible. Will also be updated on user change. Default is false .
disabledTime?: boolean
Text or translation key for the disabled disable time. Default is Ignore time .
disabledTimeText?: TranslatableString
Options to turn on date range selection.
enableDateRange?: boolean
Text or translation key for the enabled disable time. Default is Consider time .
enabledTimeText?: TranslatableString
Consider time with minDate and maxDate
enableTimeValidation?: boolean
Option to use two months view for date range picking.
enableTwoMonthDateRange?: boolean
endTimeLabel?: string
hideLabels?: boolean
Configuration for hiding week numbers. Default is false .
hideWeekNumbers?: boolean
hoursAriaLabel?: string
hoursLabel?: string
hoursPlaceholder?: string
Hides disable time switch in the timepicker part and includes mandatory the time in the picker.
mandatoryTime?: boolean
Maximal (latest) selectable date.
maxDate?: Date
meridians?: string[]
meridiansAriaLabel?: string
meridiansLabel?: string
millisecondsAriaLabel?: string
millisecondsLabel?: string
millisecondsPlaceholder?: string
Minimal (earliest) selectable date.
minDate?: Date
minutesAriaLabel?: string
minutesLabel?: string
minutesPlaceholder?: string
Only month and year are selectable.
onlyMonthSelection?: boolean
secondsAriaLabel?: string
secondsLabel?: string
secondsPlaceholder?: string
Defines the timepicker milliseconds visibility . Default is false .
showMilliseconds?: boolean
Defines the timepicker minutes visibility. Default is true .
showMinutes?: boolean
Defines the timepicker seconds visibility . Default is false .
showSeconds?: boolean
Defines the timepicker visibility. Default is false .
showTime?: boolean
startTimeLabel?: string
Text or translation key for today button title. Default is Today .
todayText?: TranslatableString
Defines the starting day of the week. Default is monday .
weekStartDay?: WeekStart
Simple DateRangeFilter preset based on offset from now
Properties
translation key for label
label: TranslatableString
offset from current in milliseconds
offset: number
type?: "offset"
Advanced DateRageFilter preset with custom calculation
Properties
calculation custom calculation function
calculate: (self: DateRangePresetCustom, currentRange: DateRangeFilter) => DateRangeFilter
translation key for label
label: TranslatableString
Whether this should show only when time support is enabled
timeOnly?: boolean
type: "custom"
("monday" | "saturday" | "sunday" | undefined)

Except where otherwise noted, content on this site is licensed under MIT License.