AppMaster.io
HomeStudioJobsSuggest Feature
  • What is AppMaster.io?
  • Getting Started
    • App Architecture
    • Quickstart
    • Best Practices
    • FAQ
  • Projects
    • Creating a Project
    • Project sharing
  • MODULES (INTEGRATIONS)
    • Modules
    • Setup
    • Modules List
      • Mobile applications
      • Authentication
        • Auth
        • Sign-in with Google
        • Sign-in with Facebook
        • Sign-in with LinkedIn
        • Sign-in with Apple
        • Google OAuth 2.0
      • Security & Data Validation
        • Crypto
        • Validators
        • IP Filter
      • Payments
        • Stripe
      • Maps & GIS
        • Universal Map
        • Cities and Countries
        • Google Maps
        • MapBox
      • Messengers
        • Telegram
        • Slack
        • Intercom Messenger
        • Discord
      • Video Conferencing & Webinars
        • Zoom API
      • Mailings, advertising
        • Intercom API
        • Google AdMob
        • SendPulse
        • GetResponse
        • Mail Chimp
        • SMS messaging
          • ClickSend
          • Telesign
          • MessageMedia
          • SMSto
          • Twilio
          • Nexmo
      • Email
        • Custom SMTP
          • Custom SMTP and Gmail
        • Gmail API
        • Email (SMTP Client)
      • Media files
        • Youtube Player
        • Image
      • Docs
        • Google Sheets
        • Google Drive
      • Date & Time
        • ICalendar
      • Data Storages
        • Amazon S3
        • OpenStack SWIFT
      • Language translators
        • Microsoft Translator
        • Google Translate
        • DeepL Translator
      • Special modules
        • Autodesk Partner API
      • File Archives
      • Google Indexing
      • Barcode Scanner
      • CloudConvert
  • Data Design
    • What are data models
    • Data Models Designer
      • Creating and modifying data models
      • Creating and modifying relations
      • System fields
    • Data types
    • Relation types
    • Auto-generation of data models
      • Virtual Data Models
      • Modules data models
      • List of generated models
        • Data Model User
        • Data Model User Session
  • Business Logic
    • Business Processes Editor
    • Best Practices for BP Separation
    • Blocks List
      • Logic
        • If-Else
        • For Each Loop
        • Loop
        • Break Loop
        • Switch
        • Set Variable
        • Raise Error
        • Comparison
        • Type Conversion
          • Date & Time to String: Format Guide
      • Functions
        • Math
          • Operators
          • Random Integer/Float
          • Round Up/Down
          • Mod
          • Is Even Number
          • Array Operations
        • String
          • Random String
          • Concat Strings
          • String Length
          • Has Substring
          • Hash
          • Is Valid Email
          • To Lower/Uppercase
          • Trim String
          • Replace String
          • Get Char at Position
          • Split String
          • Slice String
          • Validate String (Regex)
        • Boolean
          • Logic AND
          • Logic OR
          • Logic NOT
        • Array
          • Append Array
          • Prepend Array
          • Concat Array
          • Array Size
          • In Array
          • Random Element
          • Shuffle Array
          • Array Element
        • Date & Time
          • Make Date/Time/Date & Time/Time Span
          • Expand Date/Time/Date & Time/Time Span
          • Add/Subtract Time Span
          • Current Date & Time
          • Date & Time Difference
          • Delay
        • File
          • Get File
          • Create File
          • Read CSV File
          • Read XLSX File
          • Read XLS File
        • Miscellaneous
          • App Info
          • Write to Log
          • Get Request Header
          • Set Response Header
          • Get Request Body
      • Model Functions
        • Search
        • GetOne
        • Delete
        • Create
        • Patch
        • Update
        • Expand
        • Make
        • External API Requests Data Models
          • Make APIRequestName URL Params Model In
          • Make APIRequestName Body Model In
          • Make APIRequestName Headers Model In
          • Make APIRequestName Query Model In
          • Expand APIRequestName Headers Model Out
          • Expand APIRequestName Response Status Model Out
          • Expand APIRequestName Body Model Out
        • Virtual Data Models
          • Make Virtual Data Model
          • Expand Virtual Data Model
      • User-Created BPs
      • External API Requests
      • Variables
      • Models
      • Enums
      • Group Auth
        • Registration
        • Authentication
        • Authorization
        • Logout
        • Change Password
        • Restore Password
        • Add User to Group
        • Remove User from Group
        • Get Current User
        • Generate Auth Token
        • Hash Password
        • Probe Password
      • Group Crypto
      • Group Validators
        • Validate OGRNIP RU
        • Validate OGRN RU
        • Validate SNILS RU
        • Validate INN RU
        • Validate KPP RU
        • Validate BIK RU
        • Validate IIN KZ
        • Validate Bank Card Number (Luhn)
        • Validate KS RU
        • Validate RS RU
    • Global Variables
    • External API Requests
    • FAQ
  • Endpoints (API)
    • Endpoints Configuration
    • Middleware
      • Middleware: Token Auth
    • Access & Permissions
  • WEB APPS
    • Web Applications Designer
    • Working with Components
    • Signup and Login Forms
    • Workflow in web applications
    • Components list
      • Container
      • Button
      • Dropdown
      • Table
      • View
      • Tabs
      • Switch
      • Label
      • Image
      • Video
      • Chart
      • Form
      • Input (string)
      • Input (text)
      • Input (integer)
      • Input (float)
      • Input (email)
      • Input (password)
      • Input (phone)
      • RichText Editor
      • Time Span
      • Date Picker
      • Time picker
      • DateTime Picker
      • Select
      • Select (enum)
      • Relselect
  • MOBILE APPS
    • Mobile Applications Designer
    • Creating a Mobile App
    • Mobile Designer Interface
    • Working with Screens
    • Working with Widgets
    • Publishing a Mobile App
      • Testing in AppMaster.io Developer App
      • Publishing to Google Play
        • Create Google Developer Account
        • Create Firebase Project
        • Register Android App & Download Config File
        • Generate & Download Private Key
        • Generate APK/AAB File
        • Upload App for Testing
        • Set Up Google Play Store Listing
      • Publishing to App Store
        • Create Apple Developer Account
        • Create Apple Bundle ID
        • Create App in App Store Connect
        • Create App Store Connect API Key
        • Generate Build & Upload to TestFlight
        • Submit App to App Store
  • DEPLOYMENT
    • Deployments Configuration
    • AppMaster.io Cloud Services
    • Data Export
    • Logs
  • How-To
    • Import CSV/Excel File
    • Buttons Setup
    • User Interface Layout
Powered by GitBook
On this page
  • Look&Feel Settings
  • Workflow triggers
  • Component Actions
  • Timepicker Get Properties
  • Timepicker Set Properties
  • Timepicker Update Properties
  • Timepicker Validate
  • Usage example

Was this helpful?

  1. WEB APPS
  2. Components list

Time picker

Allows to select the timestamp.

PreviousDate PickerNextDateTime Picker

Last updated 3 years ago

Was this helpful?

Look&Feel Settings

Label (not mandatory) to be used to show the component's label.

Placeholder (not mandatory) to be used to show the component's placeholder.

Name (mandatory) - name of the component.

Tooltip (not mandatory) - tooltip string.

Min (mandatory) - minimum timestamp value [unix formatted] to start from. Is set to 0 by default.

Max (mandatory) - maximum timestamp value [unix formatted] which can be selected. Equivavalent to the moment of creation by default.

Step (not mandatory) - selection step value.

Required (mandatory) - marks if the selection required or not. Is set to false by default.

Allow clear (mandatory) - allows clear on selection. Is set to false by default.

Disabled (mandatory) - makes the component disabled if turned on. Is turned off by default.

Visible (mandatory) - makes the component visible if turned on. Enabled by default.

Workflow triggers

  • onChange - fires when the dropdown option is changed.

  • onFocus - fires when the Select component is being focused on.

  • onBlur - fires when the Select component is blurred.

  • onCreate - fires when the component is created.

  • onShow - fires when the component is shown.

  • onHide - fires when the component is hidden.

  • onDestroy - fires when the component is shown.

  • onEnterKey - fires when the Enter key is pressed.

Component Actions

Timepicker Get Properties

Gets the component's properties.

Input parameters:

  • Component Id [string] - component's identifier;

Output parameters:

  • Label [string] - component's label;

  • Placeholder [string] - component's placeholder;

  • Allow Clear [boolean] - allows clear the selection if true;

  • Disable [boolean] - disables component if true;

  • Tooltip [string] - tooltip string;

  • Required [boolean] - shows required mark if true;

  • Debounce (ms) [integer] - delay to validate the value;

  • Min [datetime] - minimum timestamp value [unix formatted] to start from;

  • Max [datetime] - maximum timestamp value [unix formatted] which can be selected;

  • Value [datetime] - selected timestamp value [unix formatted];

  • Validate Icon [boolean] - icon to be shown on validate the value;

  • Validate Status [Status type] - status to be shown on validate the value;

  • Validate Message [string] - message to be shown on validate the value;

Timepicker Set Properties

Sets the component's properties.

Input parameters:

  • Component Id [string] - component's identifier;

  • Label [string] - component's label;

  • Placeholder [string] - component's placeholder;

  • Allow Clear [boolean] - allows clear the selection if true;

  • Disable [boolean] - disables component if true;

  • Tooltip [string] - tooltip string;

  • Required [boolean] - shows required mark if true;

  • Debounce (ms) [integer] - delay to validate the value;

  • Min [datetime] - minimum timestamp value [unix formatted] to start from;

  • Max [datetime] - maximum timestamp value [unix formatted] which can be selected;

  • Value [datetime] - selected timestamp value [unix formatted];

  • Validate Icon [boolean] - icon to be shown on validate the value;

  • Validate Status [Status type] - status to be shown on validate the value;

  • Validate Message [string] - message to be shown on validate the value;

Timepicker Update Properties

Updates component's properties.

Input parameters:

  • Component Id [string] - component's identifier;

  • Label [string] - component's label;

  • Placeholder [string] - component's placeholder;

  • Allow Clear [boolean] - allows clear the selection if true;

  • Disable [boolean] - disables component if true;

  • Tooltip [string] - tooltip string;

  • Required [boolean] - shows required mark if true;

  • Debounce (ms) [integer] - delay to validate the value;

  • Min [datetime] - minimum timestamp value [unix formatted] to start from;

  • Max [datetime] - maximum timestamp value [unix formatted] which can be selected;

  • Value [datetime] - selected timestamp value [unix formatted];

  • Validate Icon [boolean] - icon to be shown on validate the value;

  • Validate Status [Status type] - status to be shown on validate the value;

  • Validate Message [string] - message to be shown on validate the value;

Timepicker Validate

Validates the selected timestamp value from the DateTime Picker component.

Input parameters:

  • Component Id [string] - component's identifier;

Output parameters:

  • Success [boolean] - validation result;

  • Error [string] - error message;

Usage example

To parse the selected time and gets all its composites, the following logic should be used

  • Drag the Timepicker Get Properties block and drop it into the canvas. Component ID has to be specified in order to get the value from the Time Picker component

  • The selected value can be divided into some minor parts, like seconds, minutes etc. Expand time has to be used.