Update date field on change

Try it out!

Scenario

You're building an app and you want to set a project length in days, and then dynamically calculate start and end dates.

---

Steps

1. Add component: Form
2. In the Settings Panel set Schema to 'Jobs'
3. Add component: Container
4. In the Settings Panel set Direction to 'Row'

5. Add component: Number Field
6. Manually enter 'Direction' into the Field name and set Label to 'Days of work'
7. Set Default value to 7
8. Configure validation:
   1. Add Rule: Min value 'Value' 1 Cannot be less than one day!
   2. Add Rule: Max value 'Value' 365 Cannot be more than 365 days!
   3. Save

9. Add component: Date Picker
10. In the Settings Panel select 'Works Start' from the Field dropdown
11. Set Label to 'Works Start'
12. Untick Show time

13. Duplicate the Date Picker
14. Replace 'Start' with 'End' in the Field and Label settings

👍

Time to make the field values dynamically update!

15. In the Settings Panel under On change: Define actions

    1. Validate Form - make sure to select the form in the dropdown

    2. Update Field Value

       1. select the Form from the dropdown
       2. select 'Set value' as the Type
       3. select 'Works Start' as the Field
       4. click the lightning bolt icon, and click on the JavaScript tab. Provide the following:
       JavaScript

       //Source: https://stackoverflow.com/questions/563406/how-to-add-days-to-date
       Date.prototype.subtractDays = function(days) {
           var date = new Date(this.valueOf());
           date.setDate(date.getDate() - days);
           return date;
       }
       
       return new Date($("Field Value")).subtractDays($("Jobs Form.Fields.Duration"));
       

📘

The Validate Form action will prevent the Update Field Value from firing if there's any validation errors.

The special $("Field Value") binding is used to indicate that the On change value should be used, and not the value before the change.

Also note that you may need to replace the $("Jobs Form.Fields.Duration") binding to match your form name.

16. Select the Works Start Date Picker. Under On change: Define actions

    1. Validate Form - make sure to select the form in the dropdown
    2. Update Field Value - similar to before, but this time we are setting the value of the 'Works End' field, and will add days instead of subtracting:
    JavaScript

    //Source: https://stackoverflow.com/questions/563406/how-to-add-days-to-date
    Date.prototype.addDays = function(days) {
        var date = new Date(this.valueOf());
        date.setDate(date.getDate() + days);
        return date;
    }
    
    return new Date($("Field Value")).addDays($("Jobs Form.Fields.Duration"));
    

17. Finally click on the Number Field. Under On change: Define actions

    1. Validate Form - make sure to select the form in the dropdown

    2. Continue if / Stop if - 'Stop if' {{ Jobs Form.Fields.Works Start }} 'Equals' ""

    3. Update Field Value:

       1. select the Form from the dropdown
       2. select 'Set value' as the Type
       3. select 'Works End' as the Field
       4. click the lightning bolt icon, and click on the JavaScript tab. Provide the following:
       JavaScript

       //Source: https://stackoverflow.com/questions/563406/how-to-add-days-to-date
       Date.prototype.addDays = function(days) {
           var date = new Date(this.valueOf());
           date.setDate(date.getDate() + days);
           return date;
       }
       
       return new Date($("Form.Fields.Works Start")).addDays($("Field Value"));
       

📘

In this case we first check that the number of days is a valid number.

Next we use the Stop if action to make sure a 'Works Start' date has been chosen, because we need to know the start date in order to calculate the end date.

---

App export

Downloads may take a few seconds.