ErgoTechWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
===== DateButton =====

com.ergotech.vib.graphics.DateButton

==== Image Examples ====

| {{:mistudio:graphics:more_layout:buttons_inputs:pasted:20260627-122544.gif?40|DateButton in the graphics palette}} | {{:mistudio:graphics:more_layout:buttons_inputs:pasted:20260627-122649.png?200|DateButton graphic example}} |
| //DateButton in the graphics palette.// | //DateButton graphic example.// |

==== Overview ====

The DateButton graphic is a More Layout button control used to select a calendar date or date/time value.

When the DateButton is pressed, it opens a calendar popup so the user can select a date. The selected date is displayed on the DateButton and sent through the output.

The displayed date format is controlled by the **Date Format** property.

==== Common Uses ====

  * Selecting a date
  * Selecting a date/time value
  * Sending date text into application logic
  * Providing date input for queries or filters
  * Creating date selection controls on an application screen

==== Input Behavior ====

DateButton can be updated from an input connection.

The **updateDisplayedValue** port updates the displayed DateButton value from logic, a data source, or another component.

When a Value Object is used to update the DateButton, its timestamp is used for the displayed date/time value.

==== Output Behavior ====

DateButton sends the selected date or date/time text through **PrimaryOutPort**.

The output is a string value based on the selected date and the configured **Date Format**.

==== DateButton-Specific Behavior ====

DateButton is designed for date selection behavior.

DateButton-specific settings include:

  * **Name** Sets the name of the DateButton graphic.
  * **Bezel** Sets the DateButton bezel style.
  * **Date Format** Sets the format used for the displayed and output date/time text.
  * **Font** Controls the font used on the DateButton.
  * **Foreground** Sets the foreground color.
  * **Style** Controls whether the DateButton uses date or date/time selection.
  * **Bad Qual. Indicator** Controls the indicator used when bad quality data is received.
  * **Warning Qual. Indicator** Controls the indicator used when warning or transitional quality data is received.
  * **Bezel Color** Sets the outside bezel color.
  * **Bezel Inside Color** Sets the inside bezel color.
  * **Bezel Thickness** Sets the thickness of the bezel.
  * **Cursor** Sets the cursor shown when the pointer is over the DateButton.
  * **Enabled** Controls whether the user can interact with the DateButton.
  * **Rotation** Sets the DateButton rotation.
  * **Visible** Controls whether the DateButton is shown.

==== Calendar Popup Behavior ====

When the DateButton is pressed, a calendar popup opens for date selection.

The popup is modal, so it must be closed before the user can continue interacting with the application screen.

The **Style** property controls whether the selection is date-only or date/time.

==== Logic Ports ====

In the Logic Editor, DateButton includes these default ports:

  * **PrimaryOutPort**
  * **updateDisplayedValue**

The **PrimaryOutPort** sends the selected date or date/time text.

The **updateDisplayedValue** port updates the displayed DateButton value from another source.

==== Notes ====

Use DateButton when users need to select a date or date/time value from the application screen.

Use the **Date Format** property to control how the selected date is displayed and sent.

For general button behavior, see [[mistudio:design_editor:more_layout:buttons_inputs:button|Button]].

For general graphic behavior, see [[mistudio:design_editor:active_graphic|Active Graphic]].

==== Related Pages ====

  * [[mistudio:design_editor:start|MIStudio Design Editor]]
  * [[mistudio:design_editor:more_layout:start|More Layout]]
  * [[mistudio:design_editor:more_layout:buttons_inputs:start|Buttons and Input Controls]]
  * [[mistudio:design_editor:more_layout:buttons_inputs:button|Button]]
  * [[mistudio:design_editor:more_layout:buttons_inputs:indicatorbutton|IndicatorButton]]
  * [[mistudio:design_editor:active_graphic|Active Graphic]]