Basic-Widgets
basic.checkbox basic.color basic.flip basic.glue basic.icon basic.input basic.listview basic.offset basic.print basic.roundslider basic.select basic.shutter basic.slider basic.stateswitch basic.symbol basic.tank basic.trigger basic.windowbasic.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, datetime, datetimeflip: 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, datetime, datetimeflip: 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', 'datetime', 'datetimeflip', 'time', 'timeflip', 'duration', 'durationflip' (optional, default: text)
min
lowest allowed value (optional)
- date, dateflip, datetime & datetimeflip: Number of days before today
- time & timeflip: Format is 24hr clock - e.g. '18:31:27'
- duration & durationflip: in seconds
- date, dateflip, datetime & datetimeflip: 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, datetime & datetimeflip: Number of days after today
- time, timeflip: Format is 24hr clock - e.g. '18:31:27'
- duration & durationflip: in seconds
- date, dateflip, datetime & datetimeflip: 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 and datetime 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.text', 'textarea') }}
{{ 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') }}
{{ basic.input('', 'bath.datetime', 'datetime') }}
{{ basic.input('', 'bath.datetime', 'datetimeflip') }}
You entered: ---
{{ basic.input('', 'bath.date2', 'date', '', '', '', '%Y-%m-%d') }}
{{ basic.input('', 'bath.datetime2', 'datetime', '', '', '', '%d.%m.%Y / %k:%M:%S') }}
You entered: ---
Be aware that the input field shows the standard format defined by the language settings while the item contains the value formatted with the specified format.
Be aware that the input field shows the standard format defined by the language settings while the item contains the value formatted with the specified format.
You entered: ---
Be aware that the datetime input field is not switched to the language settings by the JTSage datebox plugin. It shows "yyyy-mm-ddThh:mm:ss" by default. If a format string is specified smartVISU switches the item and the input field to the specified format.
Be aware that the datetime input field is not switched to the language settings by the JTSage datebox plugin. It shows "yyyy-mm-ddThh:mm:ss" by default. If a format string is specified smartVISU switches the item and the input field to the specified format.
Author: Stefan Widmer
Inspired by Michael Würtenberger, date/time control uses JTSageDateBox
Inspired by Michael Würtenberger, date/time control uses JTSageDateBox
