furo-ui5-time-picker

furo-ui5-time-picker #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-time-picker.js';
exports FuroUi5TimePicker js
mixes FieldNodeAdapter

Summary: furo data time picker field

Description #

The furo-ui5-time-picker component allows the user to bind a field of type google.type.TimeOfDay. Represents a time of day. The date and time zone are either not significant or are specified elsewhere.

https://sap.github.io/ui5-webcomponents/playground/components/TimePicker/

Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see UTS #35: Unicode Locale Data Markup Language.

For example, if the format-pattern is “hh:mm:ss”, a valid value string is “11:42:35” and the same is displayed in the input.

The text field can be editable or read-only (readonly property), and it can be enabled or disabled (enabled property). To visualize semantic states, such as “error” or “warning”, the valueState property is provided. When the user makes changes to the time, the change event is fired, which enables you to react on any time change.

You can bind a string or google.type.TimeOfDay ( https://github.com/googleapis/googleapis/blob/master/google/type/timeofday.proto).

1
2
3

 <furo-ui5-time-picker
    fn-bind-data="--data(*.start_time)">
 </furo-ui5-time-picker>

supported meta and constraints #

  • readonly: true , set the element to readonly
  • placeholder:“some string” set the placeholder for the element
  • min:“11:42:35” set the minDate for the element (use iso date in the constraint)
  • max:“23:59:59” set the maxDate for the element (use iso date in the constraint)
  • pattern:“HH:mm:ss” set the pattern for the element

The constraint required will mark the element as required

Methods #

bind-data(fieldNode) Bind a entity field. You can use the entity even when no data was received.

When you use at-object-ready from a furo-data-object which emits a EntityNode, just bind the field with –entity(*.fields.fieldname)

Example # 

1
2
3
4
5
6
7
8

<furo-ui5-time-picker
  fn-bind-data="--dataObject(*.furo_data_time_input)"
></furo-ui5-time-picker>
<furo-ui5-time-picker
  value-state="Information"
  fn-bind-data="--dataObject(*.furo_data_time_input)"
></furo-ui5-time-picker>
</furo-form-layouter>

Attributes and Properties #

formatPattern #

default: ''



Events #

furo-value-changed #

at-furo-value-changed → String

Fires the field value when it changes in ISO 8601 format.

change #

at-change → ``

Fired when the input operation has finished by pressing Enter or on focusout.

Methods #

onFnaFieldValueChanged #

onFnaFieldValueChanged(value `` ) ⟹ void

`` → fn-on-fna-field-value-changed

FieldNodeAdapter callback function to handle changes on the model.

  • value

readAttributes #

readAttributes() ⟹ void

* → fn-read-attributes

Reads the attributes which are set on the component dom. those attributes can be set. value-state, value-state-message, icon, placeholder, required,readonly,disabled

Use this after manual or scripted update of the attributes.



onFnaFieldStateChanged #

onFnaFieldStateChanged(state `` ) ⟹ void

`` → fn-on-fna-field-state-changed

set the value state

  • state