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