Skip to content

MindSphere Web Components
Date Time Range Picker

The Date Time Range Picker allows users to select a date/time range. Time ranges can be defined by start and end times in UTC or local time, or using quick ranges.

Example

The following pictures show the different tabs of the Date Time Range Picker.

Calender View

DateTimeRange-Picker

Quick Ranges View

DateTimeRange-Picker

Time Zone View

DateTimeRange-Picker

Interface

Selector

1
<mdsp-date-time-range-picker></mdsp-date-time-range-picker>

Properties

Name Type Corresponding attribute Default Description Allowed Values
allDay boolean all-day Ignores timestamps if true.
context string context Configures the context of the component. See also here.
dateRange IDateRange Specifies the date range using from, to and isAllDay, refer to IDateRange model.
errorNotification boolean error-notification Enables error control if an error is thrown. This can be used for debug purposes.

For productive use, the error event should be caught and handled in the application. See also here.
fromDate Date Specifies the start date of the selected range.
locale string locale Specifies the locale in which the component is displayed.
The locales en and de are provided by default.
See also here.
localeManager LocaleManager Returns a LocaleManager object.

This can be used to add locales or to get the locale settings. See also here.
rightAligned boolean right-aligned Specifies if the component is used right-aligned in the application.
The component will open to the left side if set to true.
toDate Date Specifies the end date of the selected range.

Events

Name Type Description
dateRangeChanged EventEmitter<IDateRange> Triggered when the selected date range changes.
connected EventEmitter<any> Triggered after the component is created, initialized and appended to the DOM tree.
error EventEmitter<MdspUiError> Triggered when an error occurs in the component or while accessing APIs. See also here.

Models

IDateRange
1
2
3
4
5
interface IDateRange {
    from: Date;
    to: Date;
    isAllDay: boolean;
}

Remarks

Roles

  • This component does not require a specific role.

Snippets

Configure the alignment parameter of the Date Time Range Picker based on its position. If the Date Time Range Picker is right-aligned as shown below, it unfolds to the left side.

1
<mdsp-date-time-range-picker from-date="2019-01-07T00:00:00.000Z" to-date="2019-01-09T23:59:00.000Z" error-notification="true" right-aligned="true"></mdsp-date-time-range-picker>

Any questions left?

Ask the community


Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.