Add a Date Picker to Self Registration Page


The story starts from a migration. The library I am working at is in the progress of migrating from Encore over to BiblioCommons. What fun it is! Some of you who have experience with library website/catalog migration might say.

BiblioCommons uses your library's ILS APIs to recreate a more visually attractive catalog. One of the BiblioCommons features is that they embrace the Child Online Protection Act (COPA) in the system. Hence, a system generated username will get assigned to anyone who has not reached the age of 13, or who fails to provide the birthday information when creating a BiblioCommons account.

We of course would like to avoid the latter type of "child" accounts. Unfortunately, our self registration form does not ask for birthday information. BTW, BiblioCommons does not provide the self registration mechanism. In our case, we still rely on the form from Sierra classic webpac. 

So I received a request to insert a birthday field in selfreg.html.(I was actually hacking into many webpac pages years ago when I worked at III) With Bootstrap and JQuery, this is just a piece of cake. Anyone can handle such a request in no time.

Here is the date picker I created with a couple lines of html code:

You can customize the style by adding your own CSS code or file. It is also necessary to customize the javascript part to change some important parameters, such as the range of years (yearRange, currently set to be 100 years prior to the current year ) and the default date (defaultDate, currently set to 20 years ago today). For more information about the JQuery date picker, please refer to the documentation

Of course, in order for the form to work properly, you will need to customize the submission method to submit the newly added birthday data. It is fairly easy to do that in the Innovative Interface's selfreg.html file. Feel free to download the complete file in GitHub.

Currently unrated