furo-ui5-date-time-picker

furo-ui5-date-time-picker #

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

Summary: furo data datetime picker field

Description #

The furo-ui5-date-time-picker component allows the user to bind a date string with IOS 8061 standard in RFC 3339 format likes “2017-01-15T01:30:15.01Z” to the ui5 date time picker and edit it.

you can define the formatPattern (e.g. ‘dd.MM.yyyy hh:mm aa’ ) to show the date according to format pattern. but the data in the payload will still be in format RFC 3339 (2017-01-15T01:30:15.01Z)

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 datetime, the change event is fired, which enables you to react on any date change.

You can bind a string, google.protobuf.Timestamp, int32, int64.

int32, int64 will be handled as unix timestamps (seconds since epoc) and can not be empty.

1
2
3

 <furo-ui5-date-time-picker
    fn-bind-data="--dao(FIELDNODE)">
 </furo-ui5-date-time-picker>

The 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 date, the change event is fired, which enables you to react on any date change.

supported meta and constraints #

  • readonly: true , set the element to readonly
  • placeholder:“some string” set the placeholder for the element
  • min:“1999-12-31” set the minDate for the element (use iso date in the constraint)
  • max:“1999-12-31” set the maxDate for the element (use iso date in the constraint)
  • pattern:“1999-12-31” 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
9

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

Attributes and Properties #

formatPattern #

default: ''



_previousValueState #

default: { state: 'None', message: '' }



_attributesFromFNA #

default: { readonly: undefined, placeholder: undefined, min: undefined, max: undefined, pattern: undefined, }



_constraintsFromFNA #

default: { required: undefined, }



_privilegedAttributes #

default: { readonly: null, placeholder: null, required: null, disabled: null, maxDate: null, minDate: null, formatPattern: null, }



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 #

_updateFNA #

_updateFNA(v `` ) ⟹ void

`` → fn–update-fna

  • v

onFnaFieldValueChanged #

onFnaFieldValueChanged(value `` ) ⟹ void

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

  • value

bindData #

bindData(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-data

Binds a FieldNode to the component.

Supported types: string, google.protobuf.Timestamp, int32, int64

  • fieldNode of type: string, google.protobuf.Timestamp, int32, int64

readAttributes #

readAttributes() ⟹ void

* → fn-read-attributes



onFnaFieldStateChanged #

onFnaFieldStateChanged(state `` ) ⟹ void

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

set the value state

  • state

onFnaFieldNodeBecameInvalid #

onFnaFieldNodeBecameInvalid(validity `` ) ⟹ void

`` → fn-on-fna-field-node-became-invalid

overwrite onFnaFieldNodeBecameInvalid function

  • validity