The following presentation was given at kcdc.info on June 25, 2015
Topic: Building a more responsive design with JSF + Bootstrap 3
I would like to thank all the people that attended my presentation. It was a great opportunity to be around so many other excellent developers.
Presentation slides can be found online here (KCDC Presentation).
A datepicker is a great way to avoid having to require multiple inputs on a web application. This example shows you how to use the bootstrap-datepicker and tie it together with JSF.
We begin by creating our inputText field
Now to explain some of the attributes:
The p:data-date-format and p:placeholder are both pass through attributes that become html5 tags. I do this by defining my xmlns at the top of the page like so:
To get our date picker to work we must include the libraries. I choose to use a CDN for my libraries to reduce the configuration on my end. Initialize the datetimepicker to the startDate ID referenced from above. Then create an on change event for the datepicker. This is because the bootstrap-datepicker sits on top of the inputText field and when its value is changed, JSF does not get alerted of this. So inside the change event retrieve the document element of the inputText field then send a onchange event to all other scripts listening to that field. This will trigger the JSF on change event bound by the f:ajax.