DatePicker¶

Calendar with Time Selection & Presets¶

The DatePicker is a full calendar widget with time spinners, range selection, preset system, and JSON-based localization. It provides ergonomic date/time entry for industrial reporting, trend analysis, and log filtering.

Key Features¶

Date Range Selection¶

Two-click anchor/end selection with visual highlighting of the entire range. The operator clicks the start date, then the end date — all days between are highlighted.

Time Spinners¶

Custom TimeSpinner sub-component with auto-repeat mechanism (50ms interval) for fast, ergonomic time entry. Hold the arrow to rapidly increment hours or minutes.

Preset System¶

One-click presets for common ranges: Yesterday, Today, This Week, Last Month, Last 6 Months — instantly applying both start and end dates with times.

JSON Localization¶

Month names, weekday names, and preset labels loaded per language via JSON configuration. Switch between Italian, English, or any custom language at runtime.

Main Properties¶

Property	Type	Description
`SelectionMode`	`enum`	Single date or range selection
`StartDate`	`QDate`	Selected start date
`EndDate`	`QDate`	Selected end date
`StartTime`	`QString`	Start time (HH:MM format)
`EndTime`	`QString`	End time (HH:MM format)
`ShowTimeInputs`	`bool`	Display time spinners
`ShowPresets`	`bool`	Display preset buttons
`ShowWeekNumbers`	`bool`	Display ISO week numbers
`FirstDayOfWeek`	`enum`	Monday or Sunday as first day
`CellWidth`	`int`	Day cell width
`CellHeight`	`int`	Day cell height
`CellSpacing`	`int`	Gap between day cells
`BorderRadius`	`int`	Calendar corner radius
`Padding`	`int`	Internal padding
`Color_DaySelected`	`QVariant`	Selected day background
`Color_DayInRange`	`QVariant`	Range highlight color
`Color_DayToday`	`QVariant`	Today indicator color
`MonthNames`	`QString`	JSON array of localized month names
`WeekdayNames`	`QString`	JSON array of localized weekday names

Note: This widget exposes 47 configurable properties. The table above covers only a selection — dozens more are available for fine-tuned control over colors, fonts, padding, animations, and behavior.

Usage Example in WinCC OA¶

XML Configuration (extended properties)¶

<extended>
  <prop name="Padding" type="INT">8</prop>
  <prop name="BorderWidth" type="INT">0</prop>
  <prop name="BorderRadius" type="INT">10</prop>
  <prop name="CellHeight" type="INT">38</prop>
  <prop name="CellSpacing" type="INT">2</prop>
  <prop name="ButtonHeight" type="INT">20</prop>
  <prop name="ShowTimeInputs" type="BOOL">True</prop>
  <prop name="ShowPresets" type="BOOL">True</prop>
  <prop name="Font_Header" type="FONT">-1,12,-1,5,700,0,0,0,0,0,0,0,0,0,Inter</prop>
  <prop name="Font_Days" type="FONT">-1,11,-1,5,400,0,0,0,0,0,0,0,0,0,Inter</prop>
  <prop name="Font_Buttons" type="FONT">-1,10,-1,5,500,0,0,0,0,0,0,0,0,0,Inter</prop>
  <script name="dateRangeSelected">dateRangeSelected(string start, string end)</script>
  <script name="timeRangeChanged">timeRangeChanged(string start, string end)</script>
</extended>

CTRL Initialization Script¶

main()
{
  // Set Italian localization
  string months = "[\"Gennaio\",\"Febbraio\",\"Marzo\",\"Aprile\",\"Maggio\",\"Giugno\","
                  "\"Luglio\",\"Agosto\",\"Settembre\",\"Ottobre\",\"Novembre\",\"Dicembre\"]";
  EWO.MonthNames = months;

  string days = "[\"Lun\",\"Mar\",\"Mer\",\"Gio\",\"Ven\",\"Sab\",\"Dom\"]";
  EWO.WeekdayNames = days;

  // Default to last 7 days
  EWO.StartDate = getCurrentTime() - 7 * 86400;
  EWO.EndDate = getCurrentTime();
}

Available Signals¶

Signal	Parameters	Description
`dateRangeSelected`	`start`, `end`	Date range fully selected
`startDateChanged`	`date`	Start date modified
`endDateChanged`	`date`	End date modified
`dayClicked`	`date`	Single day clicked
`timeRangeChanged`	`start`, `end`	Time inputs changed
`startTimeChanged`	`time`	Start time modified
`endTimeChanged`	`time`	End time modified
`monthChanged`	`month`, `year`	Calendar navigated to new month
`presetApplied`	`preset`	Preset button clicked
`selectionCleared`	—	Selection reset