UTC Date Pack Plugin

Introduction

The UTC Date Pack Plugin provides a date picker form element and a date formatter that enables flexible date-saving functions, such as converting a date value to a custom time zone. This tool is essential when handling date and time inputs across different time zones in Joget DX 8.

Plugin information

This plugin includes:

• A UTC Date Picker for selecting dates and times.
• A UTC Date Formatter to standardize date formatting and conversion based on time zones.

Get Started

How to install

1. Download the plugin JAR file from the releases page.
2. Go to Settings > Manage Plugins > Upload Plugin.
3. Once uploaded, the plugin will be available in your Joget environment.

How to use it

1. In the form builder, drag and drop the UTC Date Picker element into your form.
   
2. Configure the properties of the UTC Date Picker based on your needs.

Configure UTC date picker properties

Fields to configure:

• Label: Element Label to be displayed to the end-user.
• ID: Element ID (By declaring as date, a corresponding database table column c_date will be created)
  See Form Element for more information about defining the ID and list of reserved IDs.
• Allow Manual Input: If checked, a user may key in the date directly rather than using the calendar picker.
• Type: New date picker property to define the field type as:
  • Date Only
  • Date and Time
  • Time Only

Advanced options

Data 

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 in the following #date.yyyy-MM-dd#.
• Data Format: The Data Format uses the Java date syntax. For example, the yyyy-MM-dd for 2019-10-23.
  See the Date Format Pattern Syntax documentation for a list of date formats.
• Using 24hr format: Checked for 24 Hours format. Unchecked for 12 Hours format.
• Store Date in UTC: Stores the date In UTC format.
• Show User Time Zone: Shows the time zone of the date and time.

Validation

Fields to configure:

• Validator: Attach a Validator plugin to validate the input value. See Form Validator.
  
  When will validation take place?
  Validation will occur whenever a form is submitted except when submitted as Save as Draft.
• Start Date Field ID: This option should be used with Set Current Date As.
• End Date Field ID: This option should be used with Set Current Date As.
• Set Current Date As:   
  • Minimum Date
  • Maximum Date

UI

Fields to configure:

• Display Format: The Display Format uses the jQuery date syntax. For example, the yy-M-dd displays as 2019-10-23.

  See JQuery Date Format.

  When this field is left empty, the following will be considered.

  1. If the current locale starts with zh, the format will be set as yy-mm-dd.
  2. If Using Locate Date Format is set in General Settings, date format based on the current user's locale will be used.
  3. 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, it must be a positive number. This indicates to Joget DX 8 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).

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

Workflow

Field to configure:

• Workflow Variable: If the form is part of a workflow process, upon saving the form (by clicking on the Save as Draft or Complete button), the value in this input field will be saved into the corresponding workflow variable named here.
  
  Using a non-existent Workflow Variable name
  You will get the following warning with the name printed out (e.g. status) in the server log if you attempt to map to a non-existent Workflow Variable.
  

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

Configure UTC date formatter properties

To Configure UTC Date Formatter, go to List Builder > Date.

Fields to configure:

• Data Date Format: Set to follow your Joget System Settings > System Date Format, for example, dd-MM-yyyy hh:mm aa.
  Use the Java date format. (Example: yyyy-MM-dd for 2011-06-11)
  See the Date Format Pattern Syntax documentation for a list of date formats.
• Display Date Format: Use Java date format. (Example: dd/MM/yyyy for 11/06/2011)

  See the Date Format Pattern Syntax documentation for a list of date formats.

  When this field is left empty, the following will be considered.

  1. If current locale starts with zh, the format will be set as yyyy-MM-dd.
  2. If Using Locate Date Format is set in General Settings, a date format based on the current user's locale will be used.
  3. Otherwise, it will use MM/dd/yyyy.
• Conversion Options: Display a list of options that will change the date format based on the option chosen.

  Available options:

  • change format
  • Value Stored in UTC, convert to current user's timezone
  • Value Stored in UTC, convert to custom timezone 
  • Value stored in server timezone, convert to UTC timezone
• Timezone: Components within this category are only visible when the value stored in UTC, convert to custom timezone option is chosen.

  Timezone options are dynamically populated through the List of Time Zones.

Expected outcome

When implemented, users will be able to select a date and time using the UTC Date Picker, and the selected values will be converted and stored based on the configured time zone settings.

Additionally, users can click the Now button to set the date and time to their current time zone.

Download sample app