Validate bootstrap-datepicker field on change

Question

I'm trying to validate the order_datePicker input field when it is filled by bootstrap-datepicker. I've already found some answers on stackoverflow but somehow I cant get it to work myself. With the other input fields i'm using:

$('#order_emailadres').on('input', function() {

However this isnt working for a datepicker input field because the user is not using input.

So, as mentioned in the documentation and stackoverflow link i'm trying to catch the changeDate event so that the input can be validated by the following code:

HTML:

<div id=sandbox-container>
  <div id="datepicker"></div>
    <input type="text" id="order_datePicker" name=order_datePicker>
  </div>
</div>

JS:

$('#order_datePicker').on('changeDate', function () {
    var input=$(this);
    var re = /^[0-9]{2}-[0-9]{2}-[0-9]{4}$/;
    var is_valid=re.test(input.val());
    if(is_valid){input.removeClass("invalid").addClass("valid");}
    else{input.removeClass("valid").addClass("invalid");}
});

Sadly this is not working. What am I doing wrong?

Update:

Got it working with the code below but now the class is added to the div instead of the input field. However the original question is answered. Thanks

$('#datepicker').datepicker().on('changeDate',function(){
    $('#order_datePicker').val($('#datepicker').datepicker('getFormattedDate'));
    var input=$(this);
    var re = /^[0-9]{2}-[0-9]{2}-[0-9]{4}$/;
    var is_valid=re.test(input.val());
    if(is_valid){input.removeClass("invalid").addClass("valid");}
    else{input.removeClass("valid").addClass("invalid");}
});

Answer 1

 $('#order_datePicker').datepicker(); $('#order_datePicker').change(function() { alert("date change"); $('#order_datePicker').datepicker(); $('#order_datePicker').change(function() { $('#order_datePicker').val($('#datepicker').datepicker('getFormattedDate')); var input=$(this); var re = /^[0-9]{2}-[0-9]{2}-[0-9]{4}$/; var is_valid=re.test(input.val()); if(is_valid){input.removeClass("invalid").addClass("valid");} else{input.removeClass("valid").addClass("invalid");} }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/> <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> <div id=sandbox-container> <div id="datepicker"></div> <input type="text" id="order_datePicker" name=order_datePicker/> </div> </div> 

Try, UPDATED

  $("#StateDatePicker").on("dp.change", function(e) { alert(); });
or 
$("#StateDatePicker").change( function(e) { alert(); });

please refer https://eonasdan.github.io/bootstrap-datetimepicker/Events/ for events