Bootstrap-datetimepicker with jsf change events

Standard

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.