Appfarm Documentation
Getting startedDocumentationCommunityAppfarm Create
  • Overview
  • Getting Started
    • What is Appfarm?
    • Key concepts
    • Quickstart
      • Speed intro
      • Step-by-step guide
    • Appfarm Showroom
    • FAQ
  • Appcademy
    • Learning paths
    • Appfarm Fundamentals
      • Intro Course
        • 1. Intro to No-Code and Appfarm
        • 2. Navigation in Appfarm Create
        • 3. What is Apps?
        • 4. Intro to UI Editor
        • 5. Data Model
        • 6. App Data
        • 7. Actions
        • 8. Tips and Tricks
        • 9. Intro to practical walkthrough
        • 10. Create a details view of a Project
        • 11. Create a Custom List
        • 12. Swipe and Delete
        • 13. Functionality for simple Create of Data
        • 14. Upload and Download Photos
        • 15. Input Dialog with Validation and Save
        • 16. Dashboard
        • 17. Summary
        • Quiz
      • User Interface Fundamentals
        • Container - Sectioning, Styling and Repeating
        • Conditional Styles
        • Motions
        • Responsive Design
        • Step-by-step workflow
        • Featured UI Components
        • Quiz
      • App Data Fundamentals
        • Data Source Filtering
        • App Variables and Runtime Properties
        • URL Parameters
        • Quiz
      • Actions & Logic Fundamentals
        • Event Handlers
        • Featured Action Nodes
        • Context Parameters
        • Quiz
      • Services Fundamentals
        • Introduction to Services
        • Setting up a Service
        • Scheduling a Service
      • Integration Fundamentals
        • The web request action node
        • Fetch data from an endpoint
        • Map data to a data source
        • Modify the response
        • Nested data mapping
        • Path parameters
        • Authentication
        • Send data to an endpoint
        • Quiz
      • User handling and permissions
        • Users and roles
        • Permissions
        • Creating users
        • Extending the User object class
        • Updating and deleting users
        • Unauthenticated access
        • Quiz
    • Appfarm Professional
      • User Interfaces
        • Featured UI Components
        • Concepts and Use Cases
      • Data Structures & Data Handling
        • Data Features
        • Search & Filters
        • Featured Action Nodes
        • GraphQL
      • Logic & Flow
        • Logical Concepts
        • Date and Time Handling
        • Featured Action Nodes
        • Exception Handling
      • Login & Configuration
        • Login and Authentication
        • Settings, Configuration and Languages
      • Security & Operations
        • Security and Permissions
        • Deployment
        • Schedules and Logs
        • Debugging and App Health
      • Performance & Optimization
        • Optimizing Performance
        • Enhancing Functionality
    • Appfarm Sales Representative
    • Appfarm Developer Forum
      • Session 1: Data Modeling in Appfarm Create
      • Session 2: App Data in Appfarm Create
      • Session 3: Services in Appfarm Create
      • Session 4: Optimizing Performance
    • Background
      • Databases
        • Data modeling 101
        • Database normalization
  • Library
    • UI components
      • Advanced bar chart
      • Advanced bubble chart
      • Advanced combined chart
      • Advanced gantt chart
      • Advanced heatmap chart
      • Advanced line/area chart
      • Advanced pie chart
      • Advanced scatter plot chart
      • Advanced solid gauge chart
      • Animated component
      • Avatar
      • Avatar group
      • Basic bar chart
      • Basic gauge chart
      • Basic line chart
      • Basic pie chart
      • Bottom navigation
      • Button
      • Checkbox
      • Chip group
      • Circular progress
      • Coded component
      • Container
      • Date & time picker
      • Drawable canvas
      • Floating action button
      • Icon
      • Icon button
      • Iframe
      • Image
      • Linear progress
      • List
      • Map
      • Menu list
      • Multi select
      • PDF reader
      • Popover
      • Radio buttons
      • Rich text editor
      • Rich text
      • Select
      • Slider
      • Speed dial
      • Switch
      • Table
      • Tabs
      • Text
      • Text edit
      • View container
      • Visibility group
    • Action nodes
      • Aggregate data
      • Advanced search
      • Auth operations
      • Block
      • Catch exception
      • Copy to clipboard
      • Create file archive
      • Create file object
      • Create object
      • Create user account
      • Delete objects
      • Delete user account
      • Duplicate objects
      • End execution
      • Exit block
      • Exit loop
      • Export data
      • Foreach
      • Generate document
      • If
      • Import data
      • Invalidate cache
      • Log in
      • Log to console
      • Log out
      • Next iteration
      • Navigate
      • Open/close popover
      • Open confirm dialog
      • Open print dialog
      • Open snackbar
      • Open Unsplash dialog
      • Open URL
      • Persist objects
      • Push notifications
      • Read objects
      • Request permissions
      • Run code
      • Run other action
      • Run service
      • Scan barcode/QR code
      • Send email
      • Send SMS
      • Set client language
      • Set data source attributes
      • Set selection
      • Set theme
      • Set user account image
      • Show install app prompt
      • Sleep
      • Sort objects
      • Throw exception
      • Toggle drawer
      • Update object
      • Update secret
      • Update user account
      • Web request
      • While
  • Reference
    • Appfarm Create
      • Appfarm Commander
      • Blue dots
      • Copy & Paste
      • Farmer's Market
      • Find references
      • Find usage
      • Keyboard shortcuts
      • Undo/Redo
      • User preferences
    • Platform concepts
      • Conditions
      • Data bindings
      • Date and time
      • Event handlers
      • Filters
      • Functions
      • Markdown
      • Objects
      • Operators
      • Value processor
    • Dashboard
    • Apps
      • UI
        • Views
          • Dialog
          • Drawer
        • Layout designer
        • Component properties
        • Shareable UI components
      • Data
        • App variables
        • Data sources
        • Calendar data sources
      • Actions
      • App settings
      • App size
      • App health
    • Services
      • Service Endpoints
      • Service settings
      • Service health
      • API explorer
    • Data model
      • Object classes
      • Object class properties
      • Enumerated types
      • GraphQL
        • Queries
        • Mutations
      • Data Extract API
      • Time series data
    • Operations
      • Deploy
      • Schedules
      • Logs
    • Resources
      • Themes
      • Files
      • Fonts
      • Internationalization
    • Configuration
      • Environments
      • Login
        • Custom auth providers
    • Security
      • Users
      • Service accounts
      • Roles
      • Secrets
      • Permissions
        • Conditional Permissions
    • Appfarm Client
      • Developer tools for Apps
      • Developer tools for Services
      • Warnings and errors
  • How to
    • Data modeling
      • Many-to-many relationships
      • Use naming conventions
      • Offline data handling
      • Data silos and White labelling
    • User interface
      • Manage a many-to-many relationship with a Chip group
      • Configure drag and drop
      • Build a drag-and-drop calendar
      • Design a responsive layout
      • Work with flexbox
      • Use Mapbox as a map layer
      • Understand charts
    • Logic and flow
      • Event Log Design
      • Configure advanced search
    • Themes and styling
      • Change the active theme
      • Add custom email templates
    • Enhance your app
      • Add deep links
      • Add keyboard shortcuts
      • Add link previews for social media
      • Apply SEO best practices
      • Change the active language
      • Generate a PDF from a Container
    • Integrations
      • Integrate with external systems
      • Integrate with OpenAI
      • Integrate with Google Analytics (GA4)
      • Configure a custom email account
      • Integrate with a payment provider
      • Integrate with Signicat
      • Integrate directly with an external database
      • Retrieve a Bearer token from Google Cloud
      • Fetch data from BigQuery
      • Retrieve access token from Microsoft Entra ID
    • Workflow automation
      • Update an OAuth 2.0 access token from a service
    • Authentication and access control
      • Add users and assign roles
      • Configure unauthenticated access
      • Implement third-party authentication
    • Security, testing and deployment
      • Add a custom domain
      • Install an app on a device
      • Get ready for Production
      • Optimize performance
      • Security checklist
      • Test and debug
    • Example apps
      • Create an Instagram clone
        • The end result
        • Designing the feed
        • Create new post
        • Add a like-button
        • Add comment-functionality
  • Solution administration
    • Subscription and billing
    • Dedicated tier benefits
    • Guide to GDPR
      • Key principles
      • How Appfarm protects personal data
      • How you can protect your clients’ data
      • Glossary
    • Appfarm and the EU AI Act
  • Policies
    • Appfarm Policies
    • Data Processors
    • Privacy Policy
Powered by GitBook
On this page
  • Settings
  • Value
  • Error
  • Label
  • Placeholder
  • Helper Text
  • Type
  • Min Date
  • Max Date
  • Auto Focus
  • Tab Index
  • Appearance
  • Event Handlers

Was this helpful?

Export as PDF
  1. Library
  2. UI components

Date & time picker

PreviousContainerNextDrawable canvas

Last updated 9 months ago

Was this helpful?

The UI component Date & Time Picker allows the user to easily input data of type Datetime. You can bind this UI component to a property, which can allow you to persist this user input to the database.

You can see an example setup of the Date & Time Picker in the UI Components App in our ! You can try the component, as well as access the setup in Appfarm Create. If you do not have access, you can register .

Settings

Here are some of the properties in Appfarm Create which are custom for a Date & Time Picker:

Value

The data source property or variable that the user input is bound to. This can be an App Variable, a Runtime Only Object Class property, or a Database Connected Object Class property. The data type of this property must be Datetime.

If validation of the input is important, it is recommended to use an App Variable or a Runtime Only Object Class property here, so that input validation can be performed before persisting input to the database.

Error

Define an event where the component will enter an error state. This can be through binding to a Data Source Property, setting up a , or a . This can be used to alert the user of a required field when filling in a form or to alert the user that some of their input data is not correct.

Other properties listed below, such as Min Date and Max Date, can help with input validation too.

Label

This is text that tells the user what the Date & Time Picker will be used for. This could be a preferred delivery date and time for an order, for instance. Labels are always visible to the user.

Placeholder

This is a piece of text that appears whenever the user input (value property) is blank.

Helper Text

This serves a similar function to Placeholder Text, but it is always visible regardless of the user's input. It appears directly underneath the Date & Time Picker. This can be used to give the user slightly more guidance than a Placeholder property might, as it is constantly visible.

Type

Three types of Date & Time Picker are available:

  • Date: The user can input a date only

  • Time: The user can input a time only

  • Date & Time: The user can choose both a date and a time

Note that even if you choose type Time, at Datetime datatype will be saved. Using Time as type will only edit the time-part of the Datetime. If the property is null or undefined when a new Time is entered, the date-part of the value property will be set to Today.

It is also possible to have two Date & Time Pickers in the same view, both connected to the same value property: One with Type Date, and the other with Type Time. These will update the date-part and the time-part of the same property independently.

You app has a form for registering a new event. You want to have a date for the event, and the start time. See screenshot below.

In this example, you may have 1 object class property Event.Start (Datetime data type). Both the Event Date and Start Time will be bound to this property. When the user selects an Event Date, only the bold part below will be altered. When the user selects a Start Time, only the italic part will be entered (the seconds and millesecondspart will be left untouched or set to Now if the Datetime was null or undefined previously)

2023-10-12T12:25:19.557Z

Min Date

This property is not available for the Time type. This allows the developer to choose the earliest possible date that the user can choose from. Inputs earlier than this date will not be enabled.

Max Date

This property is not available for the Time type. This allows the developer to choose the latest possible date that the user can choose from. Inputs later than this date will not be enabled. A common use for this property is to bind Max Date to today's date, so users cannot pick a value in the future.

Auto Focus

When selected, this component will gain focus automatically when the screen is rendered.

Tab Index

Users can use the Tab key to navigate between inputs and components on a screen. This property tells Appfarm Create which index to bind to the current Date & Time Picker. This value should only be given when you want to override the default tab index. Using a tab index of -1 will remove the component from the tab index.

Appearance

Variant

Appfarm Create provides three different variants of the Date & Time Picker component. These are all available to view in the Appfarm Showroom.

  • Standard

  • Outlined

  • Filled

Disable Underline

When selected, the component will not have the bottom border line filled in.

Margin

Three choices are available for this property. These define the margin style between this component and other UI components on the screen.

  • Normal

  • Dense

  • None

Inline

When enabled, the input component will appear directly on screen instead of in a separate dialog. This is best explained with an example, which is available in the Appfarm Showroom.

Only Calendar

This is only available when Inline is enabled. Not available for the Time type. This will show the calendar only, instead of showing additional input information above the calendar. This is also best explained with an example, which is also available in the Appfarm Showroom.

Week Numbers

Not available for the Time type. Calendars will show the relevant week numbers next to dates when this property is enabled.

Event Handlers

Event Handlers can detect a specific event occurring in Appfarm Create and can link these events to actions. One Event Handler is available for the Date & Time Picker component:

On Value Change: This Event Handler will run an action when a change is detected in the data source bound to the component. For example, if you only want to show projects with a due date after a given date which can be input by the user, an action which reads the projects data source could be linked to this Event Handler.

Note that if you want to e.g. modify the seconds-part or the date-part when using the Time picker, you can add an On Value Changed event handler, with an action that updates the same property using a

If you want to learn more about how Date and Time is stored, and how time zones are handles, you may read more .

Showroom
here
Condition
JavaScript function
here
Function and the momentjs library.