Adding a Custom Date Picker into a Caspio Form

[vincentamato]

Hi,

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?

Thanks,

Vincent

[Hastur]

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:

datepicker.min.css
datepicker.min.js
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.classList.add("datepicker-here");
 input.setAttribute("data-language", "en");
 input.setAttribute("data-timepicker", "true");
});
</script>

 

[Hastur]

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.

 

[Lepidoptera]

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).

[Kurumi]

Hi - Just to add, you may check this forum post for custom date picker: