Class: cWebDatePicker

cObject
---cWebObject
------cWebBaseUIObject
---------cWebBaseDEOServer
------------cWebBaseControl
---------------cWebBaseDEO
------------------cWebDatePicker

The cWebDatePicker class is a (non-popup) calendar control allowing year, month and date selection.

The cWebDateForm class is a web single line edit control with integrated date selection via a popup calendar.

A date picker is ideal for data graphically displaying and selecting date values (peDataType = typeDate). The calendar displays a single month in a rectangular calendar format allowing selection of year, month and date. Setting or getting the value (psValue) of a date picker will set or get the selected date that is shown in the calendar.



A date picker can be used with or without a data binding. When used with a data binding, the date picker provides automatic support to display and allow changing data from a database table.column. When used without a data binding, you will use the class interface to read or write the control value.

Sample

Object oCustomerView is a cWebView
    Object oCustomer_DD is a Customer_DataDictionary
    End_Object

    Set Main_DD to oCustomer_DD
    Set Server to oCustomer_DD
    
    Object oOrder_Date is a cWebDatePicker
        Entry_Item Order.Order_Date
        Set psLabel to "Order Date:"
    End_Object
End_Object

The above sample demonstrates a cWebView with a data dictionary object (DDO) and a cWebDatePicker object with a data binding to the Order table, Order_Date column.

Object oStartDate is a cWebDatePicker
    Set piColumnSpan to 3
    Set psLabel to "Start Date:"
    Set pbServerOnChange to True

    Procedure OnChange String sNewValue String sOldValue
        Forward Send OnChange sNewValue sOldValue
        Send ShowInfoBox to ghoWebApp ("The Date Is: " + sNewValue)
    End_Procedure
End_Object

The above sample demonstrates a cWebDatePicker object without a data binding. Whenever the user selects a new date, the OnChange event is fired and the date value is displayed in an Info Box. Note that pbServerOnChange is set to true to ensure that the OnChange event is sent to the server.

Object Name

The Web Framework uniquely identifies each web object via a combination of the object hierarchy (object nesting), and object name. This means that web object names must be unique within their parent (i.e. each sibling web object must have a unique name).

Object Placement

Date picker controls must be placed within a web container (e.g. cWebPanel, cWebView or cWebModalDialog).

Date picker controls may not be nested inside other web controls. You may not mix web panels and web controls as sibling objects.

Data Binding

Date picker objects support a data binding to display values from a database Table.Column. When the control has a data binding, it will display the column value of the current record in the binding table. Changes entered into the control will update the table.column value in the correct way according to data dictionary data binding rules. You should only bind this control to a table.column with a 'date' data format.

Use the Entry_Item command to set a data binding.

Sample

Entry_Item Customer.Name

Entry_Item expressions, e.g. (Order.Order_Date + 30) are not supported in web object data bindings. Use the OnSetCalculatedValue to define a data binding expression.

The data binding table.column must map to a data dictionary object in the server data dictionary object structure. Refer to the Data Dictionary Guide for more information.
A data binding provides data-aware behaviors that include:
Finding, clearing, saving, and deleting records
Change verification (save, delete, and data-loss verifications)
A data binding also automatically provides the control's tooltip, control focus rules, control blur rules, and much more. These settings may also be controlled manually by setting properties.

Accessing the Control Value

The date picker control can be used without a data binding by accessing the control's value.

The psValue property allows you to get or set the current 'value' of the date picker control.

An event is triggered whenever the control value changes. This event can be handled on the server by writing DataFlex code. It can also be handled on the client (browser) by writing JavaScript code. Writing a server-side DataFlex handler is the simplest way to handle change events.

Set pbServerOnChange to true to instruct the client to send the OnChange event to the server object whenever the control value is changed. Write an OnChange event handler in your date picker object to perform some action when the control value changes.

To write a client-side change event handler using JavaScript, set the psClientOnChange property to the name of the JavaScript function that will execute when the control value changes.

If the control has a data dictionary server but does not have a data binding, then a special event (OnSetCalculatedValue) is triggered for the date picker whenever a find or clear operation is performed on the data dictionary object. Write an OnSetCalculatedValue event handler in your date picker object to generate a 'calculated' value for the control for each record in the server data dictionary object's table.

Display Options

Set pbShowToday to determine whether the default date will be today's date according to the client's current system date (i.e. the current date on the client machine).

Set pbShowWeekNr and piStartWeekAt to modify the popup calendar appearance.

Size and Location

Web controls are positioned by HTML flow layout (left to right, top to bottom). The relative position of the control in this flow is determined by the location of the object declaration in your code.

In addition to the flow layout, each web container is divided into a fixed number of equal-width columns (piColumnCount). Child controls are aligned to these columns to determine their horizontal position and width.

Set piColumnIndex to position a date picker control in a particular column of the parent container.

Set piColumnSpan to determine the width of the date picker control i.e., the number of columns occupied by the control. The actual width is determined by the number of columns and the width of the parent container.

Date picker controls have a has a pre-determined height plus a maximum and minimum width that is determined by the web application's CSS theme (psTheme).

Label Support

By default a portion of the control's width is reserved to display a descriptive label. By default, the label is displayed to the left of the control and consumes approximately 120px of the total width.

Set psLabel to the text string you want to display as a label.

Set peLabelAlign to position the label text to the left, right or center of the space allocated to the control's label (alignLeft, alignRight, alignCenter).

Set peLabelPosition to change the position of the space allocated to the control's label. By default, the label is positioned to the left of the control (lpLeft). The label can also be positioned above or to the right of the control (lpTop, lpRight).

Set piLabelOffset to change the amount of space that is consumed by the control's label. By default, the label consumes approximately 120px.

The label's text color is determined by the web application's CSS theme (psTheme). Set psLabelColor to directly override the label's CSS themed color.

Set pbShowLabel to false to hide the label and remove space used the control's label. By default, pbShowLabel is true.

Drag and Drop Support

This control can be used as a valid drop target by registering it as such in a cWebDragDropHelper object.

The supported actions for this control are:
- C_WebDropOnControl

This allows the control to accept data dragged from elsewhere in the control (if configured that way) and can also be used to accept files when registered within a cWebDragDropFileHelper.

Color

The colors used by a date control are determined by the web application's CSS theme (psTheme). You can define additional or replacement CSS styles in your web application's application.css file. Set psCSSClass to the CSS class name you would like to be applied to a date picker control.

cWebDateForm | Styling Web Applications