Datetime

Overview of the Datetime Component

DatetimeWrapper

The DatetimeWrapper component is used to present an interface that makes it easy for users to select dates and times.

Every new DatetimeWrapper component is created with a default label and the current time value.

Properties

🚧

Important Note!

This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.

The DatetimeWrapper component has the following properties and has two child components: Datetime and Label.

Property Name

Property Description

Item Wrapped

If set to true, the component will be included in the Item with additional properties

Show Label

If set to true, the component will have label.

Lines

How the bottom border should be displayed on the item. Possible values are; Full, Inset, None.

Reorder

Reorder properties:

  • *Type-ContentorWrapper**. If**Wrapper** is used, the item will be wrapped into a reorder tag.
  • *Icon- custom icon forReorderwith a typeContent**. Click the**Default icon** button to select the needed icon.
  • *Slot- position inside the item:StartorEnd**.
  • *SVG Icon- used to select ansvg file. This path will be added as the src attribute. Click the Changebutton to select the uploaded image fromMedia Manager**.

Datetime

The Datetime component has the following common properties:

Property Name

Property Description

View

Select from two options:

  • *Inline** - opens an inline calendar;
  • *Open in modal**- opens the modal with a calendar and a label. To get access to editing the label, theItem Wrapperproperty should be set to**True** (default).

Name

The name of the control, which is submitted with the form data.

Value

The value of the datetime as a valid ISO 8601 datetime string.
Click the Calendar icon to set the needed value.

Presentation

The value values are:

  • *date**,date-time,month,month-year,time,time-date,**year**.

Placeholder

The text to display when there's no date selected yet. Default set to Select date.

Placeholder I18n

If set to True then use the Placeholder property for internationalization.

Format

Format options JSON object.
Example:
{"year": "2-digit", "month": "2-digit", "day": "2-digit"}. See the details here.

Readonly

If set to True, the value can not be modified. The default is set to False.

Min

The minimum datetime allowed. Click the Calendar icon to set the needed value.

Max

The maximum datetime allowed. Click the Calendar icon to set the needed value.

Buttons

Add a picker to the datetime. Picker properties: are:

  • *Def. Buttons- selectTrueto show the defaultCancelandDone** buttons.
  • *Clear Button- selectTrueto showClear** button.
  • *Done Text- the text to display on the picker'sDone** button.
  • *Cancel Text- the text to display on the picker'sCancel** button.
  • *Clear Text- the text to display on the picker'sClear** button.

Values

Comma-separated values used to create the list of selectable years, months, days, hours and minutes.

Localization

  • *Locale name** - enter the locale name. For example en-US OR en-GB OR ja-JP etc.
    OR variable for example: {{myLocale}}.
  • *Hour Cycle- select from*Default,12 hours, or24 hours**. IfDefaultis selected then the**Locale** value will be used.
  • *First Day**- click to select the first day of the week:Sunday,Monday,Tuesday,Wednesday,Thursday,**Friday, or ***Saturday***.

Slot

Position inside another component: Start or End. Defaults are set to «».

Multiple

If set to True, multiple dates can be selected.

[(ngModel)]

Angular directive for data binding.

(ionChange)

The event emitted when the value has changed.

Styles Properties

Under the Styles tab, Datetime components can be styled with the following attributes to look like in a specific way:

Property NameProperty Description
Calendar ColorSelect CSS color of a datetime from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom.
Text ColorSelect CSS color of a datetime placeholder from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.

ItemLabel

The ItemLabel component has the following common properties:

Property NameProperty Description
Truncate TextSet to True (default) to truncate label text if it is too long.
PositionThe position determines where and how the label behaves inside an item.

Styles Properties

Under the Styles tab, ItemLabel components can be styled with the following attributes to look like in a specific way:

Property NameProperty Description
Font SizeEnter font size in px, %, em, vh, and vw.
Font WeightSet the weight (or boldness) of the font: Normal or Bold.

Using Datetime as a Form Control

If included in a Form component, Datetime becomes a Form Control:

Note that the property Name should be specified. By default, the Name property is set as the Component name property. Change it to your name if it is necessary.

To use variables as the control's data, the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value. It replaces the value that is set by the Initial Value property.

The component can get additional properties (Control ID and Control options) that allow checking the validity, changing updating strategy, etc. These properties can be used if the Native Validation property is disabled for the Form component.
Read more about validation in the Form section.

🚧

Note!

The component can't be used with array iteration data for creating a dynamic form structure. If you need to create such kind of structure, follow these recommendations

Visit the Ionic documentation to read more about datetime.