Posted by Getting Started
Dates and times in JavaScript can be a lengthy and tedious process to deal with. Introducing a Moment.js client library to your repertoire of tools will make comparisons and other tough date tasks easy.
You can either include Moment.js in your own library, build a new one from the git code or if you’d like a pre-made ClientLib including Moment, you can download and install the package from here:
https://downloads.files.forms.life/files/Moment.js-ClientLib-2.26.0.zip
Usage
Once installed, you will find the Moment client library under /etc/clientlibs/momentjs2260 with the category defined as “momentjs2260”.
Once the client library is installed, open the Adaptive Form that you wish to add date manipulation features to. Open the Adaptive form container and enter “momentjs2260” into the Client Library Category. If you need to add multiple libraries, these can be separated by a comma.
After adding the client library, be sure to preview your form and ensure that the library is present in your network view in your browser debugger. If you don’t see the library, ensure that the package is properly installed and that the Client Library Category you entered in the Adaptive Form is the same as the “categories” name in the properties of your client library.
To use the moment features on a form field date you first have to create a moment object. You can do this by taking the value of a date field and creating a moment object with the format declaration. Date objects in Adaptive Forms are stored in a YYYY-MM-DD ISO format. In the code below we create a JavaScript variable named “v_Moment” with a moment object from an Adaptive Form date field named “startDate”.
From that point forward you have a moment object that features all of the methods of the moment class. For the complete list, see the official Moment.js docs here: https://momentjs.com/docs/.
var v_Moment = moment(startDate.value, 'YYYY-MM-DD');
if(v_Moment.isValid()){
var v_increasedDate = v_Moment.add(addNumberOf.value,'day');
this.value = v_increasedDate.format('YYYY-MM-DD');
}In this example we’re creating a moment object, then another that is equal to the same date plus another set number of days using the “.add” method. We surround the code with a check to see if the date is currently a valid date with the “.isValid” method.
To return a moment object back to an Adaptive Form date format, we use the format feature to provide us with the required ISO date format: “.format(‘YYYY-MM-DD’)”.
In the form sample, I’ve provided a few examples of the most common use cases:
- Take an existing date and add a number of days to it
- Display the day of the week selected
- Display a full string version of a selected date
- Compare the date selected with another date showing whether or not it is greater than or less than.
Each of these examples really only requires close to a single line of code compared to the much lengthier version of the code that it would take to do with from-scratch JavaScript.
Moment.js client library with forms sample: https://downloads.files.forms.life/files/Moment.js-ClientLib-2.26.0-and-Adaptive-Form-Sample.zip
Forms.life 