Basic-Widgets
basic.checkbox basic.color basic.flip basic.glue basic.icon basic.input basic.listview basic.offset basic.print basic.select basic.shifter basic.shutter basic.slider basic.stateswitch basic.symbol basic.tank basic.trigger basic.button basic.dual basic.colordisc basic.float basic.formula basic.rgb basic.multistate basic.switch basic.text basic.valuebasic.input
Displays an input field
Parameters
{{ basic.input(id, item, type, min, max, step, format) }}
id
unique id for this widget (optional)
item
an item, sent values are:
- date, dateflip, datecal, dateslide: Date object resp. ISO 8601 - e.g. '2017-11-29T23:00:00.000Z' in UTC time (if no string format specified)
- time & timeflip: String with 24hr clock - e.g. '18:31:27' - format for time is taken from language file
- duration & durationflip: Number of seconds
- any other: Entered value
- date, dateflip, datecal, dateslide: Date object resp. ISO 8601 - e.g. '2017-11-29T23:00:00.000Z' in UTC time (if no string format specified)
- time & timeflip: String with 24hr clock - e.g. '18:31:27' - format for time is taken from language file
- 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
highest 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)
format
string format for date only (optional)
- empty: default format for date will be standard date object (see above)
- with given format option, the date will be converted to a string, e.g. '%d.%m.%Y' represents DD.MM.YYYY.
For options see https://jtsage.dev/DateBox/doc/3-3-output/
- to globally change time format for timeboxes, use the override method of JTSage in your visu.js:
jQuery.extend(jQuery.jtsage.datebox.prototype.options, {overrideTimeOutput: "%H:%M", overrideTimeFieldOrder: ["h","i"] })
- empty: default format for date will be standard date object (see above)
- with given format option, the date will be converted to a string, e.g. '%d.%m.%Y' represents DD.MM.YYYY.
For options see https://jtsage.dev/DateBox/doc/3-3-output/
- to globally change time format for timeboxes, use the override method of JTSage in your visu.js:
jQuery.extend(jQuery.jtsage.datebox.prototype.options, {overrideTimeOutput: "%H:%M", overrideTimeFieldOrder: ["h","i"] })
Example
{{ basic.input('', 'bath.text') }}
{{ basic.input('', 'bath.text', 'number') }}
{{ basic.input('', 'bath.date', 'date') }}
{{ basic.input('', 'bath.date', 'dateflip') }}
{{ basic.input('', 'bath.date', 'datecal') }}
{{ basic.input('', 'bath.date', 'dateslide') }}
{{ basic.input('', 'bath.time', 'time') }}
{{ basic.input('', 'bath.time', 'timeflip') }}
{{ basic.input('', 'bath.duration', 'duration') }}
{{ basic.input('', 'bath.duration', 'durationflip') }}
You entered: ---
{{ basic.input('', 'bath.date2', 'date', '', '', '', '%Y-%m-%d') }}
You entered: ---
Author:Stefan Widmer
Inspired by Michael Würtenberger, date/time control uses JTSageDateBox
Inspired by Michael Würtenberger, date/time control uses JTSageDateBox
