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¶

Quick Ranges View¶

Time Zone View¶

Interface¶

Models¶

interface TimeZoneDateRange {
    from: Date;
    to: Date;
    isAllDay: boolean;
    timeZone: TimeZone;
}

interface ValidDateRange {
    min?: Date;
    max?: Date;
}

enum RelativeRange {
    Custom = 'Custom',
    Last60Min = 'Last60Min',
    Last24Hours = 'Last24Hours',
    Last7Days = 'Last7Days',
    Last30Days = 'Last30Days',
    Last90Days = 'Last90Days',
    Today = 'Today',
    Yesterday = 'Yesterday',
    PreviousWeek = 'PreviousWeek',
    PreviousMonth = 'PreviousMonth',
    PreviousQuarter = 'PreviousQuarter',
}

enum TimeZone {
    Local = 'Local',
    UTC = 'UTC',
}

Remarks¶

• The time range for a full day is defined as midnight to midnight, e.g. 31/01/2019 00:00.00 - 01/02/2019 00.00.00.
  This definition is aligned with the IoT Time Series Service or IoT Aggregate Service.

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()}

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