Quad Design Widgets
quad.mixed quad.symbol quad.print quad.rtr quad.dimmer quad.color quad.shutter quad.blind quad.playercontrol quad.stateswitch quad.select quad.inputquad.input
Displays an input field
Parameters
{{ quad.input(id, item, type, min, max, step, place1, place2, linetext, columntext, column_order) }}
id
unique id for this widget (optional)
item
an item, sent values are:
- date & dateflip: Date object resp. ISO 8601 - e.g. '2017-11-29T23:00:00.000Z'
- time & timeflip: String with 24hr clock - e.g. '18:31:27'
- duration & durationflip: Number of seconds
- any other: Entered value
- date & dateflip: Date object resp. ISO 8601 - e.g. '2017-11-29T23:00:00.000Z'
- time & timeflip: String with 24hr clock - e.g. '18:31:27'
- duration & durationflip: Number of seconds
- any other: Entered value
type
'text', 'number', 'date', 'dateflip', 'datecal', 'dateslide', 'time', 'timeflip', 'duration', 'durationflip' (optional, default: text)
min
lowest allowed value (optional)
- date & dateflip: Number of days before today
- time & timeflip: Format is 24hr clock - e.g. '18:31:27'
- duration & durationflip: in seconds
- date & dateflip: Number of days before today
- time & timeflip: Format is 24hr clock - e.g. '18:31:27'
- duration & durationflip: in seconds
max
greatest allowed value (optional)
- date & dateflip: Number of days after today
- time, timeflip: Format is 24hr clock - e.g. '18:31:27'
- duration & durationflip: in seconds
- date & dateflip: Number of days after today
- time, timeflip: Format is 24hr clock - e.g. '18:31:27'
- duration & durationflip: in seconds
step
step between two values (optional, no effect on date/time types)
place1
placeholder attributes for future features, etc.
place2
placeholder attributes for future features, etc.
linetext
text for the whole line (optional)
columntext
(array with) text for each column (optional)
column_order
array with numbers from 1 to 5: Reorder elements to your liking (esp. relevant for smartphones as 5 columns might be too much)
* to reverse the complete order, use [5, 4, 3, 2, 1], to reverse the last two, use [1, 2, 3, 5, 4], etc.
* to reverse the complete order, use [5, 4, 3, 2, 1], to reverse the last two, use [1, 2, 3, 5, 4], etc.
Example
Single input{{ quad.input('', 'input', '', '', '', '', '', '', 'Single Input') }}
-
Single Input
{{ quad.input('', ['input1', 'input2'], ['durationflip', 'date'], ['', '5'], ['', '10'], '', '', '', 'Multi Input', ['1', '2']) }}
-
Multi Input12
Author: Stefan Widmer
Inspired by Michael Würtenberger, date/time control uses JTSageDateBox
Inspired by Michael Würtenberger, date/time control uses JTSageDateBox
