Integrating with Bootstrap Datepicker

The following example illustrates an usage of FormValidation with the Bootstrap Datepicker plugin.


You should look at the basic principle when integrating FormValidation with 3rd party libraries

Basic example

We need to revalidate the date field after picking a date from the date picker:

Embedding a date picker

It's possible for Bootstrap Datepicker to embed a picker right on the page without attaching it to particular input field.

In order to validate the selected date, firstly we need create a hidden input to keep the selected date:

We then add validator rules for the selectedDate field:

Finally, after choosing a date, you need to set the selected date to the hidden field, and revalidate it:

You can try it with the following live form:

Setting date in a range

Since Bootstrap Datepicker provides startDate and endDate options, and the date validator supports min and max options, we can set a date range easily.

The following example asks to enter a date between 01/01/2010 and 12/30/2020.

Closing the date picker automatically

If you want to close the date picker immediately right after choosing a date, you need to set the autoclose option to true:

More examples

Related validators

The following validators might be useful to you.