Jump to content

Adding a Custom Date Picker into a Caspio Form

Recommended Posts


In my application, I'd like users to be able to select multiple dates and times within one of my Caspio forms. The problem is that Caspio does not have this functionality, so I'm on my own. I turned to the Internet and found this awesome date picker that will allow me to do exactly that, but the problem lies in integrating it into my Caspio form. Basically I need an input in my form like this:

<input type='text' class='datepicker-here' data-language='en' />

The problem is it's not that easy to do in Caspio. What I've decided to do is just have a "dates" text field in the Caspio form, and then use Javascript in the footer to target it like this:

const showTimesInput = document.getElementById("InsertRecordshow_times");
showTimesInput.className = "datepicker-here";

This isn't exactly working though. I've linked the Javascript and CSS files from the date selector library at the top of my HTML file, and then I've embedded the Caspio script in the body of my HTML file. It seems as if the Javascript in the footer of the Caspio form does not have access to the linked Javascript and CSS files in my HTML file. I believe this because if I repeat this process soley in my HTML file (create an input with the id "InsertRecordshow_times", target it, and change the className) it works perfectly and I get my desired date picker. So why won't it work in the Caspio footer, I wonder?

So I turn to you the community. What's the best way to go about adding this custom date picker to my Caspio form?



Link to comment
Share on other sites

  • 4 weeks later...

Hello @vincentamato

To implement this customization, you need to use the files of the Air Datepicker and the jQuery libraries.
You need to upload them to your Application as APP parameters and then use within the script.

Please find the print screen attached:


Here are the files:

jQuery file - https://code.jquery.com/jquery-3.4.1.min.js

Then you need to insert the following code within your datapage:

<link href="[@app:DatepickerCSS/]" rel="stylesheet" type="text/css">
<script src="[@app:jQuery/]"></script>
<script src="[@app:DatepickerJS/]"></script>

<script type="text/javascript">
document.addEventListener('DataPageReady', function () {
 $.fn.datepicker.language['en'] = {
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    today: 'Today',
    clear: 'Clear',
    dateFormat: 'dd/mm/yyyy'

 // Change the "#InsertRecordDate_f" value according to the ID of your input
 var input = document.querySelector("#InsertRecordDate_f");
 input.setAttribute("data-language", "en");
 input.setAttribute("data-timepicker", "true");


Link to comment
Share on other sites

  • 2 years later...
On 8/22/2019 at 10:23 PM, Hastur said:

Insert the code into the Header of the Datapage.
Do not forget to disable the HTML editor.


Please also find the exported application with this customization implemented.


Tried this solution. The part where I invoke my function of the datepicker within the datapage but what happens is that now there are 2 datepickers that pops-up (Default and custom datepicker).

Link to comment
Share on other sites

  • 8 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...