The Travel Time Picker Component
Description
Description
You may encounter the word configurator somewhere in the code or docs. That was the old name of the travel time picker. To keep the developers sane, the renaming process is handled step by step and some code parts may still need to contain the word configurator.
Meta
| Maintainer | picr-developmentb2c-tuicom@tui.com |
|---|---|
| Locales |
en-GB, de-DE, sv-SE
|
Usage
Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.
<script src="https://api.tui.com/ml/travel-time-picker/ui/" async defer></script>
Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component.
Remember to replace VALUE with actual valid values for the given attribute.
<div class="tui-component tui-component-tui-travel-time-picker"
data-search-scenario="VALUE"
data-hotel-identifier="VALUE"
data-configuration="VALUE"
data-locale-decimals="VALUE"
data-locale-decimal-separator="VALUE"
data-locale-thousands-separator="VALUE"
data-locale-currency="VALUE"
data-locale-show-currency-symbol="VALUE"
data-locale-date="VALUE"
data-locale-shortdate="VALUE"
data-locale-time="VALUE"
data-locale-datetime="VALUE">
</div>
ATTENTION: This is a legacy component. The tag name must be set as class name (as in the example above), and attributes must be prefixed with data-.
Read more about using components ›
Attributes
This component can be configured with the following attributes:
| Name | Description | Allowed Values | Default | Required |
|---|---|---|---|---|
configurator |
Has no value. It is used for AngularJS to find an entry point (basically it's an angular directive) to start with an instance of the travel time picker. |
no | ||
autostart |
This needs to be set to "true" if the travel time picker shall automatically start after loading. In all other cases the travel time picker will be initialized but has to be started by firing the init event to the travel time picker see Readme. |
true, false
|
false |
no |
search-scenario |
Put your search scenario (all the thing needed for the search on YOUR page) as a base64 encoded string here |
yes | ||
hotel-identifier |
The identifier for a specific hotel on YOUR page. |
yes | ||
configuration |
There are sets of named configuration for the travel time picker. Choose one from the config file, for example "modal" for the travel time picker inside a modal dialog. A configuration describes what features are used in which order and what place within the travel time picker. |
yes | ||
locale-decimals |
-1 turns feature off (shows NO decimal-separator AND no fraction). 0 shows decimal-separator but NO fraction. 1...4 shows decimal-separator AND fraction with specified number |
yes | ||
locale-decimal-separator |
Should be a one-character but can be more than one (e.g.: ,- ). Placed between integral and fractional part of a money object. |
yes | ||
locale-thousands-separator |
Should be a one-character but can be more than one. |
yes | ||
locale-currency |
This is used to retrieve the currency symbol from the localization file (common.currencySymbol.[data-locale-currency]). |
yes | ||
locale-show-currency-symbol |
If true for any money object the currency symbol will be shown ($ for USD and so on) |
yes | ||
locale-date |
Formats all dates. E.g. dd.MM.yyyy (24.12.1974) for Germany or M/d/yyyy (12/24/1974) for US. |
yes | ||
locale-shortdate |
Formats all short dates. E.g. dd.MM (24.12) for Germany or M/d (12/24) for US. |
yes | ||
locale-time |
Formats all times. E.g. HH:mm (23:59). |
yes | ||
locale-datetime |
Formats all date plus time strings. E.g. 'M d, y h:mm:ss a' for en_US locale (e.g. 12 24, 1974 12:59:59 PM) |
yes |