TimeInput
TimeInput specifies an input field where the user can enter a time. It also has a popup with a Calendar that allows to pick a time.
Selector
smart-time-input
Properties
Events
Methods
Properties
animation"none" | "simple" | "advanced"
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default value
"advanced"Example
Set the animation property.
<smart-time-input animation='none'></smart-time-input>
Set the animation property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.animation = 'simple';
Get the animation property.
const timeinput = document.querySelector('smart-time-input');
let animation = timeinput.animation;
dateTimeFormatobject
Determines the format of the time displayed in the input. Accepts valid ECMAScript Internationalization API format. By default the date format is 'numeric'.
Default value
nullProperties
0any
Default value
null1any
Default value
null2any
Default value
null3any
Default value
null4any
Default value
null5any
Default value
null6any
Default value
null7any
Default value
null8any
Default value
null9any
Default value
null10any
Default value
null11any
Default value
null12any
Default value
null13any
Default value
null14any
Default value
null15any
Default value
null16any
Default value
null17any
Default value
null18any
Default value
null19any
Default value
null20any
Default value
null21any
Default value
null22any
Default value
null23any
Default value
null24any
Default value
null25any
Default value
null26any
Default value
null27any
Default value
null28any
Default value
null29any
Default value
null30any
Default value
null31any
Default value
null32any
Default value
null33any
Default value
null34any
Default value
null35any
Default value
null36any
Default value
null37any
Default value
nullExample
Set the dateTimeFormat property.
<smart-time-input date-time-format='{ hour: '2-digit', minute: '2-digit' }'></smart-time-input>
Set the dateTimeFormat property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.dateTimeFormat = { hour: 'numeric', minute: 'numeric' };
Get the dateTimeFormat property.
const timeinput = document.querySelector('smart-time-input');
let dateTimeFormat = timeinput.dateTimeFormat;
disabledboolean
Enables or disables the element.
Default value
falseExample
Set the disabled property.
<smart-time-input disabled></smart-time-input>
Set the disabled property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.disabled = false;
Get the disabled property.
const timeinput = document.querySelector('smart-time-input');
let disabled = timeinput.disabled;
dropDownButtonPosition"none" | "left" | "right"
Determines the position of the drop down button.
Default value
"right"Example
Set the dropDownButtonPosition property.
<smart-time-input drop-down-button-position='left'></smart-time-input>
Set the dropDownButtonPosition property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.dropDownButtonPosition = 'right';
Get the dropDownButtonPosition property.
const timeinput = document.querySelector('smart-time-input');
let dropDownButtonPosition = timeinput.dropDownButtonPosition;
dropDownHeightstring | number
Sets the height of the drop down. By default it's set to 'auto'.
Default value
autoExample
Set the dropDownHeight property.
<smart-time-input drop-down-height='300'></smart-time-input>
Set the dropDownHeight property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.dropDownHeight = 500;
Get the dropDownHeight property.
const timeinput = document.querySelector('smart-time-input');
let dropDownHeight = timeinput.dropDownHeight;
dropDownWidthstring | number
Sets the width of the drop down. By default it's set to an empty string. In this case the width of the drop down is controlled by a CSS variable.
Default value
""Example
Set the dropDownWidth property.
<smart-time-input drop-down-width='300'></smart-time-input>
Set the dropDownWidth property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.dropDownWidth = 500;
Get the dropDownWidth property.
const timeinput = document.querySelector('smart-time-input');
let dropDownWidth = timeinput.dropDownWidth;
inputPurposestring
Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.
Default value
"off"Example
Set the inputPurpose property.
<smart-time-input input-purpose='on'></smart-time-input>
Set the inputPurpose property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.inputPurpose = 'country';
Get the inputPurpose property.
const timeinput = document.querySelector('smart-time-input');
let inputPurpose = timeinput.inputPurpose;
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value
"en"Example
Set the locale property.
<smart-time-input locale='de'></smart-time-input>
Set the locale property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.locale = 'en';
Get the locale property.
const timeinput = document.querySelector('smart-time-input');
let locale = timeinput.locale;
localizeFormatFunctionfunction
Callback used to customize the format of the messages that are returned from the Localization Module.
Example
Set the localizeFormatFunction property.
<smart-time-input localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-time-input>
Set the localizeFormatFunction property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};
Get the localizeFormatFunction property.
const timeinput = document.querySelector('smart-time-input');
let localizeFormatFunction = timeinput.localizeFormatFunction;
messagesobject
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."
}
Example
Set the messages property.
<smart-time-input messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}'></smart-time-input>
Set the messages property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};
Get the messages property.
const timeinput = document.querySelector('smart-time-input');
let messages = timeinput.messages;
namestring
Sets or gets the name attribute for the element. Name is used when submiting data inside an HTML form.
Default value
""Example
Set the name property.
<smart-time-input name='dropdown'></smart-time-input>
Set the name property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.name = 'dropDown2';
Get the name property.
const timeinput = document.querySelector('smart-time-input');
let name = timeinput.name;
openedboolean
Determines whether the drop down is opened or not.
Default value
falseExample
Set the opened property.
<smart-time-input opened></smart-time-input>
Set the opened property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.opened = false;
Get the opened property.
const timeinput = document.querySelector('smart-time-input');
let opened = timeinput.opened;
placeholderstring
Determines the placeholder of the input.
Default value
""Example
Set the placeholder property.
<smart-time-input placeholder='Empty'></smart-time-input>
Set the placeholder property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.placeholder = 'Enter:';
Get the placeholder property.
const timeinput = document.querySelector('smart-time-input');
let placeholder = timeinput.placeholder;
readonlyboolean
Determines whether ot not the user can enter text inside the input. if dropDownButtonPosition is set to 'left' or 'right' then readonly determines whether the element acts as a ComboBox or a DropDownList if a dataSource is provided.
Default value
falseExample
Set the readonly property.
<smart-time-input readonly></smart-time-input>
Set the readonly property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.readonly = false;
Get the readonly property.
const timeinput = document.querySelector('smart-time-input');
let readonly = timeinput.readonly;
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default value
falseExample
Set the rightToLeft property.
<smart-time-input right-to-left></smart-time-input>
Set the rightToLeft property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.rightToLeft = true;
Get the rightToLeft property.
const timeinput = document.querySelector('smart-time-input');
let rightToLeft = timeinput.rightToLeft;
themestring
Determines the theme for the element. Themes define the look of the elements.
Default value
""Example
Set the theme property.
<smart-time-input theme='blue'></smart-time-input>
Set the theme property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.theme = 'red';
Get the theme property.
const timeinput = document.querySelector('smart-time-input');
let theme = timeinput.theme;
unfocusableboolean
If is set to true, the element cannot be focused.
Default value
falseExample
Set the unfocusable property.
<smart-time-input unfocusable></smart-time-input>
Set the unfocusable property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.unfocusable = false;
Get the unfocusable property.
const timeinput = document.querySelector('smart-time-input');
let unfocusable = timeinput.unfocusable;
valueany
Sets or gets the value of the element.
Default value
""Example
Set the value property.
<smart-time-input value='12:00'></smart-time-input>
Set the value property by using the HTML Element's instance.
const timeinput = document.querySelector('smart-time-input');
timeinput.value = 16:30;
Get the value property.
const timeinput = document.querySelector('smart-time-input');
let value = timeinput.value;
Events
changeCustomEvent
This event is triggered when the selection is changed.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onChange
Arguments
evCustomEvent
ev.detailObject
ev.detail.label - The label of the new selected item.
ev.detail.oldLabel - The label of the item that was previously selected before the event was triggered.
ev.detail.oldValue - The value of the item that was previously selected before the event was triggered.
ev.detail.value - The value of the new selected item.
Methods
isDefaultPrevented
Returns true if the event was prevented by any of its subscribers.
Returns
boolean true if the default action was prevented. Otherwise, returns false.
preventDefault
The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.
stopPropagation
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
Example
Set up the event handler of change event.
const timeinput = document.querySelector('smart-time-input'); timeinput.addEventListener('change', function (event) { const detail = event.detail, label = detail.label, oldLabel = detail.oldLabel, oldValue = detail.oldValue, value = detail.value; // event handling code goes here. })
Methods
close(): void
Closes the drop down.
Invoke the close method.
const timeinput = document.querySelector('smart-time-input'); timeinput.close();
Try a demo showcasing the close method.
open(): void
Opens the drop down.
Invoke the open method.
const timeinput = document.querySelector('smart-time-input'); timeinput.open();
Try a demo showcasing the open method.
getFormattedValue(): void
Returns the value in the desired format.
Invoke the getFormattedValue method.
const timeinput = document.querySelector('smart-time-input'); timeinput.getFormattedValue();
getValue(): void
Returns the value of the input.
Invoke the getValue method.
const timeinput = document.querySelector('smart-time-input'); timeinput.getValue();
select(): void
Selects the text inside the input or if it is readonly then the element is focused.
Invoke the select method.
const timeinput = document.querySelector('smart-time-input'); timeinput.select();
setValue( value: any[]): void
Sets the value of the input. Expects an array of 2 numbers for hours and minutes.
Arguments
valueany[]
The value to be set.
Invoke the setValue method.
const timeinput = document.querySelector('smart-time-input'); timeinput.setValue();