Web Services Librarian

Customizing the date range in LibWizard Forms

The Information and Research Services department had a pretty big problem. Despite the clear preamble to our form which requests 14 days’ notice, several requests came in for workshops featuring tight turn-around times. In one case, a faculty member placed a request on a Friday afternoon for a Monday morning workshop. Our service ethic is averse to denying requests. Yet, we had no choice but to deny the instruction request.

 
So I got to thinking. Why can’t we set up the form to gray out the upcoming X number of days so instructions cannot request instruction? We should be able to do this! We have the technology!
 
I started in the LibWizard platform to investigate the date feature. There was no obvious switch or tick box that indicates how I could limit the date selection range. So I went to their FAQ’s for a clue–Nada. Their response to my support email was, “Subscribe to LibCal, then you can do that.”
 
I’m sure LibCal is a great product. I’ve played with it before. We might dive into it. But LibWizard is capable of limiting the input date. Here’s how!

Step 1 — Limit the Date

 $( function() {
 $( "#YOURID" ).datepicker({ minDate: +XX });
 } );

The LibWizard form uses the jQuery UI Datepicker. So all we have to do is add the minDate option to specify what date is the earliest someone can select. In the section of code labeled #YOURID, enter the ID of the date question in your form. For minDate: +X, enter the number of days you want to have grayed-out from the current date. A negative (-) number will deselect days in the past.

Unfortunately, the default settings are baked into the system. Instead of modifying the original date picker, this code adds a second one. Next, we need to remove the original date picker so your new one works. Here’s what we will do:

Step 2 — Hide the Original

$("div.field-input").mouseover(function(){
 $("div.pika-single.is-bound").addClass("hidden");
});

This script must run when the mouse goes into the field-input class. First, I tried onClick, but that ran too late in the process and did not hide the date selector. Hence, mouseover was the best option to initialize the function that adds to the original div. The div loads with the hidden class appended, eliminating the original date picker from view. Now the user interacts with the new date selector only.

Note: The "div.field-input" and the "div.pika-single.is-bound" is what I found worked on my form. While I suspect Springshare's forms are all the same, I suggest you inspect your own instance to make sure these classes are correct for your system.

Where does this go?

There is no obvious place to add jQuery to LibWizard. The customization options are limited to CSS. Date question fields do not provide HTML input.

What I did was enter a Text block field before the date question. I used the form features to make sure the question remained hidden. Then I switched from rich text editing to source editing. Now I can enter my complete code between script tags.


 $( function() {
 $( "#YOURID" ).datepicker({ minDate: +XX });
 } );



$("div.field-input").mouseover(function(){
 $("div.pika-single.is-bound").addClass("hidden");
});

That’s it! A simple fix for a simple problem using a little creative thinking. I’m sure there were several different ways to resolve this problem. What would you have done differently?

%d bloggers like this: