• Overview

• The Datepicker plugin
  • Attributes
  • Download and installation
  • Example program
  • Customizing the visual appearance

• The Editgrid plugin
  • Attributes
  • Download and installation
  • Example program
  • Customizing the visual appearance

The datepicker displays a specified date or the current date in the representation of the current locale. It provides an integrated calendar to conveniently modify the date.

date : string, get/set

The date is set or returned in a format as specified by the format attribute (see below). By default (if the date is not set, or if it is set to the empty string), the datepicker displays the current date.

format : string, get/set

The format used to set or get the date. The format string is parsed for special letters which are replaced by the date components as documented below:

Format	Date Component	Example
yyyy	Year	2022
yy	Year	22
MM	Month in year	04 (April)
M	Month in year	4 (April)
dd	Day in month	01
d	Day in month	1

The default format is dd.MM.yyyy.

HP-UX, Linux

Download: webdlg2-datepicker.231129.tgz

Installation (as superuser):

cd /directory/in/web/server/document/hierarchy
tar xzf /path/to/webdlg2-datepicker.231129.tgz

Windows

Download: webdlg2-datepicker.231129.zip

Please unpack the webdlg2-datepicker.231129.zip contents into the web server document hierarchy.

The datepicker plugin example consists of the files:

webdlg-datepicker.js (JavaScript code)

webdlg-datepicker.min.js (JavaScript code, minified)

webdlg-datepicker.map (JavaScript source map)

webdlg-datepicker.css (CSS rules)

webdlg-datepicker.min.css (CSS rules, minified)

To use the plugin in your WEBDLG2 applications, configure an URI in the eloqwebd2.uri file for the directory containing the plugin files, for example:

[/plugin]
Path = /directory/in/web/server/document/hierarchy

This configuration associates the /plugin URI with the plugin directory in the file system. Now the application can be configured to load the plugin by setting PluginURL as shown below:

PluginURL = /plugin/webdlg-datepicker.min.js
PluginURL = /plugin/webdlg-datepicker.min.css

Alternatively, the plugin files may be integrated into the HTML documents. This is necessary when using an external web server.

For example:

<script async
        src="/path/to/webdlg-datepicker.min.js">
</script>
<link href="/path/to/webdlg-datepicker.min.css"
      rel="stylesheet" type="text/css">

As shown here, using the <script async> attribute is recommended to avoid that the script potentially delays loading the document (1).

An example program is available for download, consisting of the files Datepicker.PROG and Datepicker.dlg.

HP-UX, Linux

Download: datepicker-example.tgz

Windows

Download: datepicker-example.zip

To allow overriding the default color scheme, a CSS template is available for download: webdlg-datepicker-theme-colors.css

For details, please refer to the customizing the visual appearance document.

The grid consists of cells, organized in rows and columns, where a column may be specified as editable or readonly, which affects all cells in the column.

The Editgrid rule value is issued to the program when TAB or ENTER is pressed in an editable cell or when editing a cell has finished.

activeline : integer, get/set

activecolumn : integer, get/set

The 1-based activeline and activecolumn attributes specify the cell which has the keyboard focus.

If zero, no cell has the keyboard focus.

The cx/cy attributes are aliases for activecolumn/activeline (see below).

add : string, set

Adds a new row to the grid.

Columns are separated by the delimiter specified by the delim attribute.

The first column is the row header.

cell[][] : string, get/set

Gets or sets the content a the specified cell.

The cell is specified by the 1-based row and column index, for example:

DLG SET "Dialog.grid.cell[2][4]","Row 2 Column 4"

Column index 0 addresses the row header.

clear : integer or string, set

Deletes all rows in the grid. The argument is ignored.

colreadonly[] : integer, get/set

Read-only state of the column specified by the 1-based column index.

Zero: The column is editable.
Nonzero: The column is read-only.

The default value is zero (column is editable).

columns : integer, get/set

Number of columns, must be specified before setting the grid content.

colwidth[] : integer, get/set

Width of the column specified by the 1-based column index in Dialog raster character cell units.

The default column width is 5.

content : string, get/set

Gets or sets all rows at once.

Rows are separated by LF (ASCII 10), columns are separated by the delimiter specified by the delim attribute.

The first column of each row is the row header.

cx : integer, get/set

Alias for the activecolumn attribute (see above).

cy : integer, get/set

Alias for the activeline attribute (see above).

del[] : integer, set

Deletes the specified number of rows, starting with the 1-based row index.

delim : string, get/set

Column values are separated by this delimiter. By default, the TAB character (ASCII 9) is used.

header[] : string, get/set

Header of the column specified by the 1-based column index.
Column index 0 addresses the header for the row header column.

insert[] : string, set

Inserts one row at the specified 1-based row index.

Columns are separated by the delimiter specified by the delim attribute.

The first column is the row header.

line[] : string, get/set

Sets or gets the row specified by the 1-based row index.

Columns are separated by the delimiter specified by the delim attribute.

The first column is the row header.

HP-UX, Linux

Download: webdlg2-editgrid.231128.tgz

Installation (as superuser):

cd /directory/in/web/server/document/hierarchy
tar xzf /path/to/webdlg2-editgrid.231128.tgz

Windows

Download: webdlg2-editgrid.231128.zip

Please unpack the webdlg2-editgrid.231128.zip contents into the web server document hierarchy.

The editgrid plugin example consists of the files:

webdlg-editgrid.js (JavaScript code)

webdlg-editgrid.min.js (JavaScript code, minified)

webdlg-editgrid.map (JavaScript source map)

webdlg-editgrid.css (CSS rules)

webdlg-editgrid.min.css (CSS rules, minified)

To use the plugin in your WEBDLG2 applications, configure an URI in the eloqwebd2.uri file for the directory containing the plugin files, for example:

[/plugin]
Path = /directory/in/web/server/document/hierarchy

This configuration associates the /plugin URI with the plugin directory in the file system. Now the application can be configured to load the plugin by setting PluginURL as shown below:

PluginURL = /plugin/webdlg-editgrid.min.js
PluginURL = /plugin/webdlg-editgrid.min.css

Alternatively, the plugin files may be integrated into the HTML documents. This is necessary when using an external web server.

For example:

<script async
        src="/path/to/webdlg-editgrid.min.js">
</script>
<link href="/path/to/webdlg-editgrid.min.css"
      rel="stylesheet" type="text/css">

As shown here, using the <script async> attribute is recommended to avoid that the script potentially delays loading the document (1).

An example program is available for download, consisting of the files Editgrid.PROG and Editgrid.dlg.

HP-UX, Linux

Download: editgrid-example.tgz

Windows

Download: editgrid-example.zip

To allow overriding the default color scheme, a CSS template is available for download: webdlg-editgrid-theme-colors.css

For details, please refer to the customizing the visual appearance document.