Module: Editor

Version: 4.0.1 +

User: Developer

Object Type: Output Object

Child of:

- WebPage

- WebPanel



A DateBox object provides output on a website. A Datebox is used as a special input field for dates. There are different ways to submit a date into the DateBox. The date can be entered directly in the desired date format, or the date can be selected by scrolling with the mouse or arrow buttons. Next to that you can open the calender-functionality, where you can choose the desired date in a calender. You can scroll through the months and years, and then choose the desired day.

The advantage of the DateBox is that you don't have to create a date format for the input field. When scrolling through dates, invalid input is not possible. When entering a date manually, the DateBox will display a warning icon and a red border to indicate that the input is not a valid date.



A postback is an action taken by an interactive webpage, when the entire page and its contents are sent to the server for processing some (submitted) information and then, the server posts the same page back to the browser. Possible values of the AutoPostBack property are 'True' or 'False'. If the value is 'True', then the input of the DateBox will be used directly in the calculation after selecting it. If the value is 'False', then the input will not directly be processed.


The property Culture indicates in which language format the date should be displayed. You can find a list of available Cultures here.

DebugLogMode (from version 4.1)

Indicates the level of detail of debug information that is logged during runtime of the website to the trace, a logfile, a database etc. The possible values are:

  • None: no debug information is logged
  • Simple: only basic information is given
  • Extended: in addition to the information in the Simple mode the values of all the properties of the object are shown


Possible values are 'True' or 'False'. If the value is 'False', then the object can not be used within the application.


Possible values are 'True' or 'False'. If the value is 'True' then it is possible to click on the year and month displayed in the calendar-functionality. When clicked, a pop-up opens with a faster way to scroll through the years and months using the arrow-buttons.


Possible values are 'True' or 'False'. If the value is 'False', then the object can only be used within the document where it is created. If the value is 'True', then also from other Futurama documents can be referred to this object. This means that changes in the object also affect the document in which is referred to this object. If the value is 'True' and you attempt to move or delete the object, a warning will be given. To limit these warnings to a minimum it is recommended to set IsPublic to 'True' only when necessary.


In the property PopupButtonTooltipText a text can be entered that is shown as a tooltip when the cursor is placed above the PopupButton of the DateBox. Default text is empty.


Possible values are 'True' or 'False'. If the value is 'True' then there's a button displayed next to the input-field. When clicked, a pop-up opens with the calendar-functionality.


Possible values are 'True' or 'False'. If the value is 'True' then the calender functionality can be opened by clicking in the input field.


In the property Tooltip a text can be entered that is shown in the application when a cursor is moved across the input field of the DateBox. In this way information about the usage of the DateBox can be given to the user.


Here you should select the UserVariable that gets its value by the DateBox. The UserVariable must have the Type 'Date', and the properties Min and Max of the UserVariable need to be entered. These values decide what the end values of the DateBox are.


Possible values are 'True' or 'False'. If the value is 'True', the object will be rendered and therefore displayed in your application. If the value is 'False', the object will not be rendered.


The name of the object as it is shown in the source of the website. By default the XmlName is equal to the name given in the property (Name) with spaces replaced by underscores, but you are free to change it.


The name of the object.


Here a comment can be entered. For example a short description of the object.


The unique identification number of the object. This number is automatically generated by Futurama on the moment of creation. This number can be used when searching for a certain object in the Find Window.


In this property you can create a reference to a WebPanel. When the Button is then clicked on in the application, ónly this WebPanel will be refreshed. The rest of the page will not be changed. When the property is left empty, the WebPage will be refreshed as a whole


Here the CssClass can be entered. In the stylesheet you can define the style elements that belong to this class.


A DateBox object is rendered in different parts that hold their own standard layout. It is possible however to change these using CSS. The classname entered in the CssClass property is used in different places within the HTMLCode. For example, when you enter the CssClass 'YourDateBox', the DateBox object will hold elements that have the following classes:

  • YourDateBox_DateInput: The input field of the DateBox.
  • YourDateBox_Calender: The month calender of the DateBox 
  • YourDateBox_CalenderTitle: The upper bar of the DateBox, with the arrow buttons

These elements all are styled already, but you can overrule this standard layout bu adding '!important' to these automatically generated classes. For example, when you want to have a different background-color for the calender title, you can add the following CSS to your stylesheet:

background-color: red !important;

The DateBox as a whole consists of a basic DIV element with the classname you entered in the CssClass property. Within the DIV element there's a table element that represents the input field and the PopupButton, and the calender functionality if opened.

Beware that the rendering of objects depends on the DocType selected for your Futurama Document. The rendering mentioned above is based on the DocType XHTML_1_0. If your using the old DocType HMTL4_Transitional, please consult the Document page for further information.

Related Topics

- Futurama Objects: The Atlas chapter that describes all Futurama objects. See the Output-section for a description of the type of objects this object belongs to.

- UserVariable


Updated: 2012-08-09