Visualization Element ‘Date picker’

Symbol:

Tag: Date/time control elements

This element is a calendar that displays the current date. A user can click a tag to select a date, which is saved to a variable. In addition, it can customize the time interval that the calendar displays. Clicking the calendar header changes the year. Clicking the arrows in the calendar header changes the month.

Language-dependent texts of the element

This element contains language-dependent texts that are managed in the System text list. This deals with the names of the month and the days of the week written out completely or abbreviated. When a date picker is added to a visualization, CODESYS generates the text list automatically below the POUs view. The IDs correspond to the default text and therefore English terms. The text list makes it possible to translate these texts.

Example

System text list

ID	Standard
Apr	Apr
April	April

Element properties

Element name	Example: DueDateCalendar
Element type	Date picker

Element property ‘Position’

The position defines the location and size of the element in the visualization window. These are based on the Cartesian coordinate system. The origin is located at the upper left corner of the window. The positive horizontal x-axis runs to the right. The positive vertical y-axis runs downwards.

X	X coordinate of the upper left corner of the element Specified in pixels. Example: 10.
Y	Y coordinate of the upper left corner of the element Specified in pixels. Example: 10.
Width	Specified in pixels. Example: 150
Height	Specified in pixels. Example: 30

Note

You can also change the values by dragging the box symbols ( ) to other positions in the editor.

See also

• Positioning Elements, Adapting Size and Layer

Variable	Input variable (DATE). Contains the date that a user selects in the date picker. Example: PLC_PRG.dtDueDate
Clock design	From style: All settings are preconfigured according to the style. Explicit: The property Design settings appears. Here you can customize the calendar.

Design settings

Requirement: This property is visible only if the Design property is set to Explicit.

The values of the property can be predefined in the style. Then they are available in the drop-down list.

Calendar header

Design of the header
Font	Style font or user-defined font
	Style color or user-defined color
Font color
Arrows
Arrow color	Style color or user-defined color
Color of printed arrow
Background
Draw background	From style: The style defines whether and how a background is drawn. Yes: The background is filled with the color in the Background color property. No: The background is not filled with a color.
Fill color	Style color or user-defined color

Main display area

Design of the main display area
Today	Design of today
Font	Style font or user-defined font
Font color	Style color or user-defined color
Draw background	From style: The style defines whether and which background is drawn. Yes: The background is filled with the color in the Background color property. No: The background is not filled with a color.
Background color	Style color or user-defined color. Used if Yes is selected in Draw background.
Show frame	From style: The style defines whether and how a frame is drawn. Yes: The frame is displayed with the following properties. No: A frame is not displayed.
Frame color	Used if Yes is selected in Show frame.
Rectangle type
Line width

Main display area

Selected day	Design of the selected day
Font	Style font or user-defined font
Font color	Style color or user-defined color
Draw background	From style: The style defines whether and how a background is drawn. Yes: The background is filled with the color in the Background color property. No: The background is not filled with a color.
Background color	Style color or user-defined color
Show frame	From style: The style defines whether and how a background is drawn. Yes: The frame is displayed with the following properties. No: A frame is not displayed.
Frame color	Used if Yes is selected in Show frame.
Rectangle type
Line width

Main display area

Current month	Design of the current month
Font	Style font or user-defined font
Font color	Style color or user-defined color
Draw background	From style: The style defines whether and how a background is drawn. Yes: The background is filled with the color in the Background color property. No: The background is not filled with a color.
Background color
Show frame	From style: The style defines whether and how a frame is drawn. Yes: The frame is displayed with the following properties. No: A frame is not displayed.
Frame color	Used if Yes is selected in Show frame.
Rectangle type
Line width

Main display area

Other months	Design of the previous and subsequent months
Font	Style font or user-defined font
Font color	Style color or user-defined color
Show other month	Design of the previous and subsequent months
Draw background	From style: The style defines whether and how a background is drawn. Yes: The background is filled with the color in the Background color property. No: The background is not filled with a color.
Background color
Show frame	From style: The style defines whether and how a frame is drawn. Yes: The frame is displayed with the following properties. No: A frame is not displayed.
Frame color	Used if Yes is selected in Show frame.
Rectangle type
Line width

Main display area

Day of week heading	Design of the heading with the days of the week
Font	Style font or user-defined font
Font color	Style color or user-defined color
Draw background	From style: The background is filled with the style color From style. The style defines whether and how a background is drawn. Yes: The background is filled with the color in the Background color property. No: The background is not filled with a color.
Background color
Show frame	From style: The style defines whether and how a frame is drawn. Yes: The frame is displayed with the following properties. No: A frame is not displayed.
Frame color	Used if Yes is selected in Show frame.
Rectangle type
Line width
Display separator line	From style: The style defines whether and how a separator line is drawn. Yes: Display with the following properties. No: A separator line is not displayed.
Color of the separator line	Used if Yes is selected in Display separator line.
Weight of separator line

Main display area

Background	Design of the calendar days
Draw background	From style: The style defines whether and how a background is drawn. Yes: The background is filled with the color in the Fill color property and framed in the Frame color. No: The background is not filled with a color.
Fill color	Style color or user-defined color
Frame color

Element property ‘Display type’

Rows	Number of month calendars per row (preset: 1)
Columns	Number of month calendars per column (preset: 1)

Element property ‘State variables’

Invisible	Variable (BOOL). Toggles the visibility of the element. TRUE: The element is not visible at runtime.
Deactivate inputs	Variable (BOOL). Deactivates the user input. TRUE: Input from a visualization user have no effect, even when access permissions are granted in the user management.

See also

• Designing Visualizations with Elements