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:
< div id = "embeddingDatePicker" ></ div >
< input type = "hidden" id = "selectedDate" name = "selectedDate" />
We then add validator rules for the selectedDate
field, don't forget to set excluded: false to the field (because it's hidden so it will be ignored by default):
$ ( '#eventForm' ). formValidation ({
framework : 'bootstrap' ,
icon : {
...
},
fields : {
selectedDate : {
// The hidden input will not be ignored
excluded : false ,
validators : {
notEmpty : {
message : 'The date is required'
},
date : {
format : 'MM/DD/YYYY' ,
message : 'The date is not a valid'
}
}
}
}
});
Finally, after choosing a date, you need to set the selected date to the hidden field, and revalidate it:
$ ( '#embeddingDatePicker' )
. datepicker ({
format : 'mm/dd/yyyy'
})
. on ( 'changeDate' , function ( e ) {
// Set the value for the date input
$ ( "#selectedDate" ). val ( $ ( "#embeddingDatePicker" ). datepicker ( 'getFormattedDate' ));
// Revalidate it
$ ( '#eventForm' ). formValidation ( 'revalidateField' , 'selectedDate' );
});
You can try it with the following live form:
<!-- Include Bootstrap Datepicker -->
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
< script src = "//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js" ></ script >
< style type = "text/css" >
/**
* Override feedback icon position
* See http://formvalidation.io/examples/adjusting-feedback-icon-position/
*/
# eventForm . form-control-feedback {
top : 0 ;
right : -15 px ;
}
</ style >
< form id = "eventForm" method = "post" class = "form-horizontal" >
< div class = "form-group" >
< label class = "col-xs-3 control-label" > Event</ label >
< div class = "col-xs-5" >
< input type = "text" class = "form-control" name = "name" />
</ div >
</ div >
< div class = "form-group" >
< label class = "col-xs-3 control-label" > Date</ label >
< div class = "col-xs-5 date" >
< div id = "embeddingDatePicker" ></ div >
< input type = "hidden" id = "selectedDate" name = "selectedDate" />
</ div >
</ div >
< div class = "form-group" >
< div class = "col-xs-5 col-xs-offset-3" >
< button type = "submit" class = "btn btn-default" > Validate</ button >
</ div >
</ div >
</ form >
< script >
$ ( document ). ready ( function () {
$ ( '#embeddingDatePicker' )
. datepicker ({
format : 'mm/dd/yyyy'
})
. on ( 'changeDate' , function ( e ) {
// Set the value for the date input
$ ( "#selectedDate" ). val ( $ ( "#embeddingDatePicker" ). datepicker ( 'getFormattedDate' ));
// Revalidate it
$ ( '#eventForm' ). formValidation ( 'revalidateField' , 'selectedDate' );
});
$ ( '#eventForm' ). formValidation ({
framework : 'bootstrap' ,
icon : {
valid : 'glyphicon glyphicon-ok' ,
invalid : 'glyphicon glyphicon-remove' ,
validating : 'glyphicon glyphicon-refresh'
},
fields : {
name : {
validators : {
notEmpty : {
message : 'The name is required'
}
}
},
selectedDate : {
// The hidden input will not be ignored
excluded : false ,
validators : {
notEmpty : {
message : 'The date is required'
},
date : {
format : 'MM/DD/YYYY' ,
message : 'The date is not a valid'
}
}
}
}
});
});
</ script >