website logo
👥 Community🎯 Samples on GitHub🚦System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Examples Overview
Setting up your solution
Jig Types
Components
Datasource
Actions
Preview
Widgets
Expressions
Aggregation
Boolean
Comparison Operators
Date & Time
Path Operators
Functional Programming
Jigx Variables
Predicate Queries
String
Docs powered by
Archbee
Components
form

date-picker

7min

The component can select specific dates or hours based on the selected type (date, time, or datetime).

Date Picker
Date Picker


Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.



The core structure includes: instanceId and label

Other options:

instanceId - The unique identifier for the actual entity field

format - The format of your date/time:

  • LT - 3:28 PM
  • LL - March 3, 2022
  • L - 03/03/2022
  • HH:mm - 15:28
  • and many more described in detail in our Builder

mode - Set to value time when selecting the time; - When setting the date, the mode is not necessary

maximum and minimum - By using these you can set the range of date/ time (UTC time)

Maximum and Minimum on Android work only for date mode because TimePicker does not support this.

For more information about the setting of the date format/ time zone please refer to Expressions.

Examples and code snippets 

Date picker for selecting a specific date

Date Picker
Date picker


Here is an example of the date-picker where you can select a specific date.

Example:

See the full example using static data in GitHub.

date-picker (static)
|
children:
  - type: component.form
    options:
      children:
        - type: component.date-picker
          instanceId: date
          options:
            label: Select a date
            format: L


Date picker for selecting time

Time selector
Time selector


Here is an example of the date-picker where you can select a specific date.

Example:

See the full example using static data in GitHub.

date-picker (static)
|
children:
  - type: component.form
    options:
      children:
        - type: component.date-picker
          instanceId: time
          options:
            label: Select a time
            mode: time
            format: HH:mm


See also

  • Developer reference
  • Related examples (GitHub)



Updated 13 Jul 2023
Did this page help you?
PREVIOUS
checkbox
NEXT
signature-field
Docs powered by
Archbee
TABLE OF CONTENTS
Configuration options
Examples and code snippets
Date picker for selecting a specific date
Date picker for selecting time
See also
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service