TimeEditField

 

TimeEditField is used to display and input time in order to facilitate input.

 

TimeEditField inserted in a GridPanel as seen in Lycia Form Designer:

 

Form XML code:

 

<TimeEditField visible="true" identifier="f1">

 

Theme element filter XML code:

 

<ElementFilter ElementName="TimeEditField">

   ...

</ElementFilter>

 

CSS element selector code:

 

qx-aum-time-edit-field

.qx-aum-time-edit-field .qx-text ↓

 

Associated 4gl syntax:

DISPLAY 

INPUT ↓

 

Most commonly used form properties:

dataType

defaultValue

autonext

maxLength

textPicture

isPasswordMask

 

Inheritance diagram:

 

 

Associated ui methods:

Create

ForName

 

Influence and behavior:

 

 

 

 

To add a time edit field to your form,

 

Step 1

Choose a TimeEditField from the widgets palette by left-clicking its icon:

 

 

Step 2

Select the place in the form where you want to put a TimeEditField (in the screenshot below, we choose a cell in a Grid panel):

 

 

Step 3

Left-click the selected spot (cell or sector) to place a TimeEditField there:

 

 

 

The time edit field is now added to your form, and you can see it in the Structure view.

 

 

 

 

 

 

 

There are two ways to enter time to the TimeEditField at runtime:

→ to set time by means of the up and down arrows : Each arrow click changes time by 1 hour, minute, or second (depending on the place of the cursor):

 

 

 

 

→ to type in the time from the keyboard:

 

 

Besides hours, minutes, and seconds, time edit field must hold the day period (AM or PM). The day period can also be changed by clicking up or down arrows or from the keyboard:

 

 

is used to remove the entered time value at runtime:

 

 

 

 

 

 

 

 

Here you can find out how to input data to time edit fields  using the INPUT statement, e.g.:

 

INPUT BY NAME f1 WITHOUT DEFAULTS

 

With input to a TimeEditField, the widget data type as well as the data type of the receiving variable must correspond to the field purpose, i.e. be DATETIME HOUR TO SECOND:

 

DEFINE f1 DATETIME HOUR TO SECOND

 

 

 

 

 

You can change appearance properties of a TimeEditField in Lycia Form Designer. However, we recommend applying appearance properties via user themes and css.

 

To apply a property to time edit fields, set their values in the user theme, directly or using filters.

In the example below, we change the color, weight, and slope of the text font for a time edit field in input with a Pseudo-Class filter.

 

property applied

in the user theme

 

theme XML code

<StyleSheet xmlns="http://querix.com">

  <ElementFilter ElementName="TimeEditField">

    <StyleSheet>

      <DoStyleAction>

        <SetProperty>

          <PropertyPath>

            <PropertyName>ForeColor</PropertyName>

          </PropertyPath>

          <PropertyValue type="CustomizedColor" RedColor="139" GreenColor="0" BlueColor="0" Alpha="255" />

        </SetProperty>

      </DoStyleAction>

      <DoStyleAction>

        <SetProperty>

          <PropertyPath>

            <PropertyName>Font</PropertyName>

            <PropertyName>Bold</PropertyName>

          </PropertyPath>

          <PropertyValue />

        </SetProperty>

      </DoStyleAction>

      <WithPseudoClassFilter PseudoClassName="Input">

        <StyleSheet>

          <DoStyleAction>

            <SetProperty>

              <PropertyPath>

                <PropertyName>ForeColor</PropertyName>

              </PropertyPath>

              <PropertyValue type="CustomizedColor" RedColor="0" GreenColor="128" BlueColor="0" Alpha="255" />

            </SetProperty>

          </DoStyleAction>

          <DoStyleAction>

            <SetProperty>

              <PropertyPath>

                <PropertyName>Font</PropertyName>

                <PropertyName>Italic</PropertyName>

              </PropertyPath>

              <PropertyValue />

            </SetProperty>

          </DoStyleAction>

          <DoStyleAction>

            <SetProperty>

              <PropertyPath>

                <PropertyName>Font</PropertyName>

                <PropertyName>Bold</PropertyName>

              </PropertyPath>

            </SetProperty>

          </DoStyleAction>

        </StyleSheet>

      </WithPseudoClassFilter>

    </StyleSheet>

  </ElementFilter>

</StyleSheet>

 

runtime appearance

 

In the example below, we use css to change the text style of the button:

 

.qx-aum-time-edit-field .qx-text {

    padding: 2px;

    padding: 5px 10px;

    color: white !important;

    font: bold 14px "Calibri","Helvetica Neue", Sans-Serif;

}

 

 

Related articles:

DATETIME