Category: JS Objects
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How to Find Difference Between Two Dates From Datepicker Widgets?

Issue

I want to know how to find the difference between two dates using Date Picker widgets on Appsmith. Can anyone show me how to do this using the moment library?

Resolution

You can calculate the difference between two dates in Appsmith using Date Picker widgets along with the moment.js library.  
 

Steps  

1. Add Widgets  
  - Drag and drop two Date Picker widgets (`DatePicker1` and `DatePicker2`).  
  - Optionally, set default dates or allow users to pick them dynamically.  

2. Add Display Widget
  - Add a Text widget (or any widget) to display the calculated difference.  

3. Use moment.js for Calculation
  - In the Text widget, write the following code:  
  {{ moment(DatePicker2.selectedDate).diff(DatePicker1.selectedDate, "days") }}

The diff() method calculates the difference between the two dates in days.

You can replace "days" with "hours", "months", or other supported units based on your requirement.

Example

If DatePicker1 is set to 2025-09-01 and DatePicker2 to 2025-09-22, the Text widget will display: 21

This shows there are 21 days between the two selected dates.