Basic-Widgets
basic.checkbox basic.color basic.flip basic.glue basic.icon basic.input basic.listview basic.offset basic.print basic.select basic.shutter basic.slider basic.roundslider basic.stateswitch basic.symbol basic.tank basic.trigger basic.window basic.shifterbasic.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
