@switch (theme) { @case (SiteThemeId.MicroFocus2017) {
@if (date) { }
} @default {
@if (date) { }
} }
showTime
showTimezone
showSeconds
showMeridian
showSpinners
showNowBtn

The ux-date-range-picker component can be used to select a date range. It can be displayed as a standalone component or within a popover.

The following options can be used to configure the appearance and behavior of the component.

The selected start date to be displayed in the component. The selected end date to be displayed in the component. Will set the start timezone. If not specified the local timezone will be used. Will set the end timezone. If not specified the local timezone will be used. Defines the list of available timezones. The DateTimePickerTimezone interface specifies that each timezone should be an object with a name property that represents the timezone, eg. GMT+2, and an offset property that represents the number of minutes relative to GMT the timezone is. The earliest selectable date. Note that the time component is relevant, so set the time to 00:00:00 unless a specific minimum time is required. The latest selectable date. Note that the time component is relevant, so set the time to 23:59:59 unless a specific maximum time is required. Defines whether or not the time picker should be visible. Defines whether or not the time picker should allow the user to choose a timezone. Defines whether or not the time picker should allow the user to specify seconds. Defines whether or not the time picker should show an AM/PM button, or time should be represented in 24hr format instead. Defines whether or not the time picker should allow the user to select the time using spinners. Defines whether or not the show now button is visible. If defined will override the weekday names displayed. Defines the labels to show in the meridian (AM/PM) selector. Defines the names of the months. Defines the short names of each month. Defines the text to be displayed in the button used to set the selected time to the current time. Defines the day of the week that should appear in the first column. WeekDay is an enumeration available in @angular/common. Defines the title to display above the start picker. Defines the title to display above the end picker. Defines a function which returns a string indicating the duration of the selected range. Defines the aria label of the now button. Defines the aria-live announcement when a date in the start picker is focused. Defines the aria-live announcement when a date in the end picker is focused. Allows formatting of the start/end date strings. The pre-defined date formats can be found at Date Pipe format options. Allows formatting of the start/end time strings. The pre-defined time formats can be found at Date Pipe format options. Emits an event when the start date is changed. Emits an event when the end date is changed. Emits an event when the start timezone changes. Emits an event when the end timezone changes.

The following code can be used to create the example above: