furo-ui5-date-picker

furo-ui5-date-picker #

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

Summary: bindable datepicker field

Description #

The furo-ui5-date-picker component allows the user to bind an date object like google.type.Date or a date string with ISO 8061 format like “2020-12-31” to the ui5 datepicker and edit it.

It supports all features from the SAP ui5 DatePicker element.

You can define the formatPattern (e.g. ‘dd.MM.yyyy’ ) to show the date according to format pattern.

You can bind a string, furo.type.Date or google.type.Date.

1
2
3

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

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 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

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

Attributes and Properties #

formatPattern #

default: ''

The format pattern for the date.

Events #

furo-value-changed #

at-furo-value-changed → Date

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

change #

at-change → Date

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

Methods #

bindData #

bindData(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-data

Binds a FieldNode to the component.

Supported types: string, furo.type.Date, google.type.Date

  • fieldNode of type: string, furo.type.Date, google.type.Date

readAttributes #

readAttributes() ⟹ void

* → fn-read-attributes

Reads the attributes which are set on the component dom. Attributes that can be se are value-state, placeholder, required,readonly,disabled max-date, min-date, format-pattern, 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