Web Components for Insights Hub and Industrial IoT - Date Time Range Picker - Developer Documentation
Skip to content

Web Components for Insights Hub and Industrial IoT
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

Models

TimeZoneDateRange
interface TimeZoneDateRange {
    from: Date;
    to: Date;
    isAllDay: boolean;
    timeZone: TimeZone;
}
ValidDateRange
interface ValidDateRange {
    min?: Date;
    max?: Date;
}
RelativeRange
enum RelativeRange {
    Custom = 'Custom',
    Last60Min = 'Last60Min',
    Last24Hours = 'Last24Hours',
    Last7Days = 'Last7Days',
    Last30Days = 'Last30Days',
    Last90Days = 'Last90Days',
    Today = 'Today',
    Yesterday = 'Yesterday',
    PreviousWeek = 'PreviousWeek',
    PreviousMonth = 'PreviousMonth',
    PreviousQuarter = 'PreviousQuarter',
}
TimeZone
enum TimeZone {
    Local = 'Local',
    UTC = 'UTC',
}

Remarks

Roles

  • This component does not require a specific role.

Snippets

Open to different directions

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.

<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>

Limit selectable range

For limiting the selectable date range, e.g. to prohibit selecting a future date, the validDateRange-property can be applied.

// disable future dates
dateTimeRangePicker.validDateRange = {max: new Date()}

DateTimeRange-Picker


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


Last update: April 13, 2023