Numbers and dates

The number and date criteria collect a quantity (numeric), a day (date), a period (date-range), a time of day (time) or a day from the list the server allows (filtered-calendar). Below are the real criteria of the AWE React client: pick a type, change its attributes and the XML below follows. Try them, too: they are real fields.

Live preview

LightDark

Controls

Component

Label

Placeholder

Icon

∅No iconusermailsearchcalendar

Size

DefaultSmallLarge

Unit

Slider

Required

Read only

XML

<criteria id="demo" component="numeric" label="Field" unit="EUR" />

Attributes

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
component	Component	numericdatedate-rangetimefiltered-calendar
label	Label	text
placeholder	Placeholder	text
icon	Icon	lucide:userlucide:maillucide:searchlucide:calendar
size	Size	smlg
unit	Unit	text
show-slider	Slider	true / false
presets	Presets	text
time-format	Time format	HH:mmHH:mm:sshh:mm ahh:mm:ss a
validation	Required	true / false
readonly	Read only	true / false

Events and actions

Action (type)	What it does
reset	Empties the value of the criterion.
restore	Puts back the initial value of the criterion.
validate	Runs the validation of the criterion (required, formats) and shows its error.
set-invalid	Marks the criterion as invalid with the message of the action.
set-valid	Clears the validation error of the criterion.
copy-criterion-value-clipboard	Copies the value of the criterion to the clipboard.

Full reference

• Full documentation of this component
• XSD reference of the element

The attributes shared by every criterion (label, placeholder, icon, size, validation) are in the criteria overview. A date-range sends two parameters, id.from and id.to, and its presets add one button per code that fills the range from today. The days a filtered-calendar allows come from a query of the server (here a static list of Mondays and Thursdays), and the others are disabled.

Recipes

Common fields, rendered by the same components.

Number with a slider

show-slider adds a slider under the input and number-format sets its range and step.

<criteria id="discount" component="numeric" label="Discount" show-slider="true"
          number-format="{min: 0, max: 100, step: 5, aSign: ' %', pSign: 's'}" value="20" />

Period with quick presets

Each code of presets is a button: 1M is one month back from today, YTD is the year to date and ALL clears both dates.

<criteria id="period" component="date-range" label="Period" presets="1M,3M,YTD,ALL" />

Time with a 12-hour clock

time-format chooses how the time is shown. The value sent to the server is always a 24-hour time.

<criteria id="start" component="time" label="Start time" time-format="hh:mm a" />

Events and actions

A criterion has no event of its own to listen to: every change of its value checks the dependencies whose dependency-element names it, and pressing Enter in a text field runs the submit button of its window. The actions that work on criteria:

Action	Description
reset	Empties the value of the criterion
restore	Puts back the initial value of the criterion
validate	Runs the validation of the criterion and shows its error
set-invalid	Marks the criterion as invalid with the message of the action
set-valid	Clears the validation error of the criterion
copy-criterion-value-clipboard	Copies the value of the criterion to the clipboard

More

• Criteria overview: the attributes every criterion shares and the other families of inputs.
• Full documentation of the criteria: every type, attribute, validation and example.
• XSD reference of the criteria element.