Skip to main content
All CollectionsIntegration
Date Manipulation with date-fns
Date Manipulation with date-fns

date-fns is a date utility library that provides a comprehensive toolset for manipulating JavaScript dates in a browser & Node.js.

Jacob Payne avatar
Written by Jacob Payne
Updated over 4 years ago

Working with JavaScript dates and times can quickly become challenging and date-fns provides over 140 functions for comparing, manipulating, and formatting dates and timestamps.

Installation

The best way to integrate third party JavaScript libraries into Fulcrum is via Data Events, however, you can also include the code in Calculation Expressions. Data Event code is evaluated immediately while calculation expressions are constantly evaluated as the form is filled out.

The date-fns library is available as an npm package, so make sure you've got Node.js installed, then from the command line run:

npm install date-fns

Since date-fns is modular, you can pick just the functions you need, or include the entire library with your form. We can use browserify and uglify-js to bundle up the modules for use in Fulcrum.

npm install browserify -g npm install uglify-js -g

Full Build

To bundle up all the functions, run the following command:

browserify -r 'date-fns' -s 'datefns' | uglifyjs > 'datefns.js' --mangle

Custom Build

To generate a custom build with a subset of functions, create a file called main.js in the root directory, in this include your required modules within a modules.exports statement:

module.exports = { subDays: require("date-fns/sub_days"), isBefore: require("date-fns/is_before") }; Copy

The example above defines a custom build that includes the subDays and isBefore modules. Run the following command to bundle these modules into a custom build:

browserify 'main.js' -s 'datefns' | uglifyjs > 'datefns-custom.js' --mangle

Copy into Fulcrum

You can now copy and paste the code in the datefns.js or datefns-custom.js files into your form's data events code editor and define a global datefns variable by including the following immediately below the code you just pasted:

datefns = module.exports; Copy

You now have access to datefns throughout your data events and calculation scripts. You can also download a full build of the date-fns library (v2.7.0) ready for use with Fulcrum here.

Examples

We now have access to the datefns helper functions for comparing, manipulating, and formatting dates and times. The examples below assume all the date-fns modules are available in a full build.

Subtract Days

Subtract 10 days from a Fulcrum date field with subDays.

// date: Thu Nov 07 2019 00:00:00 GMT-0500 (Eastern Standard Time) var result = datefns.subDays($date, 10); SETRESULT(result); // result: Mon Oct 28 2019 00:00:00 GMT-0400 (Eastern Daylight Time) Copy

Difference In Days

Get the number of full days between the given dates with differenceInDays. In this example we will combine Fulcrum date and time fields to use full timestamps.

// Example input // date 1: Thu Nov 07 2019 00:00:00 GMT-0500 (Eastern Standard Time) 01:00 // date 2: Thu Nov 14 2019 00:00:00 GMT-0500 (Eastern Standard Time) 23:00 var result = datefns.differenceInDays( DATEVALUE($date_1, $time_1), DATEVALUE($date_2, $time_2) ); SETRESULT(ABS(result)); // result is wrapped in the ABS() function to always give us a positive number. // result = 7 Copy

Time Within Interval

Is the given time within a interval of predefined times, using isWithinInterval? In this example we don't care about dates but want to check if the value of a Fulcrum time field ($time) is between 8:00 AM and 1:30 PM.

// begin: Thu Nov 07 2019 08:00:00 GMT-0500 (Eastern Standard Time) // stop: Thu Nov 07 2019 13:30:00 GMT-0500 (Eastern Standard Time) // time: Thu Nov 07 2019 08:00:00 GMT-0500 (Eastern Standard Time) var date = new Date(); var begin = DATEVALUE(date, "08:00"); var stop = DATEVALUE(date, "13:30"); var time = DATEVALUE(date, $time_1); var result = datefns.isWithinInterval(time, { start: begin, end: stop }); SETRESULT(result); // result: true Copy

Format Date

Return a formatted date string in the given format with format. The format function takes format codes based on Unicode Technical Standard #35.

// date: Thu Nov 07 2019 00:00:00 GMT-0500 (Eastern Standard Time) var result = datefns.format($date_1, "P"); SETRESULT(result); // result: 11/07/2019 Copy

Time Between Dates

Return the distance between the given dates in words with formatDistance.

// date 1: Wed Nov 06 2019 00:00:00 GMT-0500 (Eastern Standard Time) // date 2: Mon Nov 11 2019 00:00:00 GMT-0500 (Eastern Standard Time) var result = datefns.formatDistance($date_1, $date_2); SETRESULT(result); // result: 5 days Copy

Get Max Date from Repeatable Records

Return the max date from an array using max.

// dates: (3) // [ // Thu Nov 07 2019 00:00:00 GMT-0500 (Eastern Standard Time), // Wed Nov 13 2019 00:00:00 GMT-0500 (Eastern Standard Time), // Wed Nov 27 2019 00:00:00 GMT-0500 (Eastern Standard Time) // ] var dates = REPEATABLEVALUES($my_cool_dates, 'repeatable_date') var maxDate = datefns.max(dates) SETRESULT(maxDate) // result: Wed Nov 27 2019 00:00:00 GMT-0500 (Eastern Standard Time) } Copy

Next Steps

If this all sounds great but you don't have the technical capabilities or development resources to get up and running on your own, our Professional Services team can help with all your scripting needs!

Did this answer your question?