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. This setup standardizes how dates are displayed (dd-MM-yyyy) and stored (yyyy-MM-dd), enabling accurate sorting and effective date-based filtering across your application.

How does it work?

1. From the Form, select the Date Picker element and set the Display Format to dd-mm-yy.
   
2. When the form is submitted, it will be stored as 2016-06-02 because the Data Format is set to yyyy-MM-dd.
3. On the List, set the Formatter to Date and configure as follows:
   • Display Date Format: dd-mm-yyyy
     
4. Sorting based on this date column will work as sorting is based on the data format, yyyy-MM-dd.
5. In order to use any filter (i.e., Date Range Filter) in relation to the date picker's form element, configure the Display Format and Data Format according to the format first set in the Date Picker itself, as shown in the figure below.
   

Expected Outcome

After completing this configuration, dates will be displayed in a consistent dd-MM-yyyy format for users, stored in yyyy-MM-dd for accuracy, and will support correct sorting and filtering across forms and lists.

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