In this post, I’ll summarize the key points of the video and point out the sections of the 45 minute tutorial. Also in this video, we examine a few ways to spread this integration to any part of your custom app. It’s the first time we’ve talked about this specifically, but I’ll bring it up in a future video.
Here’s the file if you want to follow along and build a FileMaker Date Range Picker.
The video is 45 minutes. I walk through how to set it up, make a few mistakes along the way, but fix those in time. Here’s the breakdown:
- 00:00–Intro and integration
- 20:41–The Callback function: Sending the dates to FileMaker
- 31:30–Setting up Options: changing how the date picker functions.
- 38:57–Using in FileMaker: strategies for spreading the integration to many parts
- 44:57–The Finishing Touches: Causing the picker to appear when the window loads
src in: ?dnt=1
src gen: https://player.vimeo.com/video/288404734?dnt=1Actual comparison
src gen: https://player.vimeo.com/video/288404734
Setting up the FileMaker date range picker
We also set up the layout to be accommodating for us to enter and edit the libraries.
This integration came with a bunch of interesting little points that we may not have addressed before.
- We built an input text box in the web viewer, and we added a font-awesome icon just to the right of the input box.
- The JQuery function $ (it really is a function) applies a date picker method to the input text box.
- That date picker method: datepicker() is something the author of the library built for us. It is somewhere in the DatePicker library. We don’t have to worry about it. He’s tested it many times. It works very well. It’s like us calling a script from a separate file. We don’t have to understand it, we can just use it.
- There are many options, and we could spend hours configuring this widget to our needs (for fun, not because we have to build each option).
- What’s cool about the options is that one line of code: “showdropdowns: true” is all it takes to add a month and year dropdown that updates the calendar to the widget. Or this one: “timePicker: true” draws and adds the time-picker functionality. Wow.
- the Moment.js library handles date and time formatting for me. I don’t have to do any conversion of the dates when they’re brought into FileMaker. This is a great library I wish I could use more in everyday FileMaker work.
I’m only human
Throughout this video, I made a few mistakes. Here is a rundown of what I did, which happen to be the common errors anyone could make:
- I forgot a comma in between object properties.
- I would sometimes forget the closing parenthesis or bracket. This vexed me a few times. I mention in the video that it is best practice to write the opening and closing brackets or parentheses at the same time before filling in the function or options. You are wise to get the hamburger buns before putting in the meat and toppings.
- The order in which the libraries loads matters. In this case, the JQuery library needs to be loaded before the DatePicker library. And both of these are required for the actual function to work.
- The Substitute Function in FileMaker is case-sensitive. “**JQuery**” is not the same as “**jQuery**”. So placeholder text and the text inside the substitute function must be the same.
Applying the FileMaker date range picker anywhere
We also briefly touched two ways to allow this to be used anywhere in your custom app. Since we’re dealing with fields in a table, we either have to establish a relationship or load the data into global variables or fields with global storage (global fields). I built this both ways. As FileMaker developers, we can understand the pros and cons of each way, but I’ll bring that up in a future video.
This is a good and simple widget. It is powerful and easy enough to use in any custom app. Give it a try. If nothing else, it’s good practice.
Download the files that I used and see how satisfying it is to build a fully-functional FileMaker date range picker widget. I’ll continue demonstrating integrations from my DevCon 2018 session. And if you haven’t yet, please join our FM/JS Slack channel.