Date Picker

The Date Picker extends the capability of a normal text field by incorporating a date picker library, allowing users to select dates easily. This feature can be configured for various date and time formats and is useful for ensuring consistent date input in forms.

How does it work?

You can use the existing built-in App Expenses Claims to see how the Date Picker works. Follow these steps:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click on the pencil icon on the Expenses Claim to open the App Composer.
   
3. Click Expense Approval Entry to be directed to the Form Builder.
   
4. Click the Date Picker element on the canvas to open the Date Picker properties.
   
5. Click Preview and click on the Date Picker to see it in action.

Configure data picker

Configuring the Date Picker involves setting labels, IDs, input options, and display formats to ensure the element behaves as expected and provides the necessary date input functionalities.
Fields to configure:

• Label: Element label to be displayed to the end-user.
• ID: Element ID. By declaring it as a date, a corresponding database table column c_date will be created. See Form Element for more information about defining the ID and a list of reserved IDs.
• Allow Manual Input: The user can enter the date if checked manually rather than using the calendar picker.
• Field Type: Defines the field type as:
  • Date Only
  • Date and Time
  • Date and Time Stored in UTC
  • Time Only

Advanced options

Advanced options provide additional settings for data handling, validation, and display formatting, enhancing the functionality and usability of the Date Picker.

Data

The Data section includes default values and date format settings to ensure the field is pre-populated and displayed correctly.

Fields to configure:

• Default Value: 

  Default Value when there's no existing value found/selected.

  The hash variable is accepted here. For example, you may key the following

  #date.dd-MM-yyyy#

  Date Format
  Date format defined here should follow Data Format.
• Data Format: The date format should follow the Java date syntax. For example, yyyy-MM-dd displays as 2019-10-23. See the reference jQuery Date Format.

Validation

Validation settings ensure the input meets specific criteria before the form is submitted.

Fields to configure:

• Validator: Attach a Validator plugin to validate the input value. See Form Validator.
  
  When will validation takes place?
  Validation will take place whenever a form is submitted except when it is submitted as Save as Draft.
• Start Date Field ID: Used with Set Current Date As.
• End Date Field ID: Used with Set Current Date As.
• Set Current Date As: Options include Minimum Date and Maximum Date.

UI

UI settings configure the display and interaction aspects of the Date Picker.

Fields to configure:

• Placeholder: The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.
• Display Format: The display format uses the jQuery date syntax. For example, yy-M-dd displays as 2019-10-23. See jquery-dateFormat.
  When this field is left empty:
  • If the current locale starts with zh, the format will be yy-mm-dd.
  • If Using Locale Date Format is set in General Settings, the date format will be used based on the current user's locale.
  • Otherwise, it will use M/dd/yy.
• Date Picker Year Range: Range of years to be shown.
  

  In essence, the value left of the colon ":" must be a negative number and on the right must be a positive number. It indicates to Joget Workflow how many years earlier and how many years forward to display in the year select box based on the selected year.

  A value of c-0:c+0 is also valid; this indicates to the user that he cannot change the year value (it will default to the current system year).

  For example, c-10:c+10 shows 10 years before and after the current year. 2000:2020 shows specific year range.
• Readonly: Determines if the element is editable.
• Display field as Label when readonly?: Displays the value of the element as plain text when the element is set to Readonly.

Workflow

Workflow settings integrate the Date Picker with workflow processes, allowing values to be saved and used within workflow variables.

Field to configure:

• Workflow Variable: If the form is part of a workflow process, upon saving the form by clicking Save as Draft or Complete, the value in this input field will be saved into the corresponding workflow variable named in this field.

context attribute status does not exist in process context - adding new attributes to the process context is not allowed

Date formatting based on Locale

To set the Date Picker to display the date format based on the user locale automatically, follow these steps:

1. In System Settings:
   • Tick the checkbox Using Locale Date Format.
   • Leave the System Date Format field blank.
   • Tick the checkbox Enable User Locale Selection.
   • Enter the locales allowed in the User Locale Options field (e.g., de,en_US).
   • Save the System Settings.
2. In Form Builder > Date Picker, leave the Display Format property blank.
3. The user logs in, sets their locale in My Profile, and the Date Picker field will show the date format as per their locale.

Display date time based on coordinated universal time (UTC)

To generate the date time from the data hash variable based on UTC, add the parameter -Duser.timezone=UTC in the JAVA_OPTS variable in the Joget startup script/batch file:

set JAVA_OPTS=-Xmx2048M -Dwflow.home=./wflow/ -javaagent:./wflow/aspectjweaver-1.8.5.jar -Duser.timezone=UTC -javaagent:./wflow/glowroot/glowroot.jar