Using Date Formatter, Date Filter and Date Range Filter

Introduction

In this article, you'll learn how to configure the Form element's Date Picker, Date Formatter, Date Filter, and Date Range Filter in Joget to ensure consistent date formatting and sorting. By following this guide, you'll be able to standardize the display format of dates across your application and correctly sort records based on date values.

How does it work?

This configuration ensures that all date-related elements follow a consistent format, dd-MM-yyyy which helps display and sort dates accurately. The Date Picker allows users to select dates in a user-friendly format. When the form is submitted, dates are stored in a standardized format (yyyy-MM-dd), and the Date Formatter adjusts how dates are displayed in lists. The Date Filter and Date Range Filter are also configured to match this format, allowing for effective date-based filtering.

Here’s how you set it up:

Based on the configurations above on Date Picker, when one picks a date, (e.g. June 2, 2016), it will display 02-06-2016 to the user. This is because the Display Format is set to dd-mm-yy.

When the form is submitted, it will be stored as 2016-06-02 because the Data Format is set to yyyy-MM-dd.

When one view the records submitted in a List, the date value shown will be based on the Data Format set earlier. Therefore, to make the date to show in our desired format, we will need to make use of the Date Formatter with the configurations as shown in the figure above.

Sorting based on this date column will work as sorting is based on data format, yyyy-MM-dd.

Likewise, in order to use any filter (i.e., Date Range Filter) in relation to the date picker's form element, one should also configure the Display Format and Data Format according to the format first set in Date Picker itself, as shown in the figure above.

Video tutorial

Watch our video tutorial to see a step-by-step demonstration of configuring date elements in Joget:

Related documentation

For more information on date configuration and related elements, refer to these resources:

• Date Picker
• Date Formatter
• Date Range Filter
• Date Filter

Download sample app