Bootstrap Validator and Datetime Picker Conflict

Question

I have a bootstrap form with a Date field which is required. The form is validated by Bootstrap Validator. Selecting the date field from the picker is not recognized by the validator and the field stays red - indicating a date is not yet selected. I have a fiddle here including my code. But it doesn't seem to work either. Any help is highly appreciated.

HTML

    <form id="frm_add_examination" method="post">
      <label>Program</label>
      <select name="exam[program_id]" id="program_id" class="form-control border-input exam">
     <option value="1">BB1</option>
     <option value="2">BB2</option>
     </select>
      <label>Level</label>
      <select name="exam[level_id]" id="level_id" class="form-control border-input exam">
      <option value="">Select</option>
      <option value="1">Level 1</option>
      <option value="2">Level 2</option>
     </select>
      <label>Semester</label>
      <select name="exam[semester_id]" id="semester_id" class="form-control border-input exam">
      <option value="">Select</option>
      <option value="1">Semester 1</option>
     <option value="2">Semester 2</option>
  </select>
    <label>Start Date</label>
      <input name="exam[examination_start_date]" id="examination_start_date" placeholder="" class="form-control border-input exam" type="text" value="">
      <button type="submit" class="btn btn-danger btn-fill btn-wd" id="submit-examiantion"><i class="ti-save"></i>Save</button>
    </form>

JS

$(document).ready(function() {


  $('#examination_start_date').datetimepicker({
    format: 'DD-MM-YYYY',
    useCurrent: false
  });


  $('#frm_add_examination').bootstrapValidator({
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      'exam[examination_start_date]': {
        validators: {
          stringLength: {
            min: 2,
          },
          notEmpty: {
            message: 'Please enter examination start date'
          }
        }
      }


    }
  });

});

Answer 1

Hope this can help you.

 $(document).ready(function() { $(".date-picker").datepicker(); $('#contactForm').bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { PayDate: { validators: { notEmpty: { message: 'The Date is required and cannot be empty' }, date: { format: 'MM/DD/YYYY', message: 'The format is MM/DD/YYYY' } } } } }); $('.date-picker').on('changeDate show', function(e) { $('#contactForm').bootstrapValidator('revalidateField', 'PayDate'); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" /> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script> <form id="contactForm" runat="server" method="post" class="form-horizontal"> <div class="date-form"> <label class="col-md-3 control-label">Date Validation</label> <div class="col-md-6 bs-example"> <div class="input-group"> <label for="PayDate" class="input-group-addon btn"> <span class="glyphicon glyphicon-calendar"></span></label> <input type="text" id="PayDate" name="PayDate" class="form-control date-picker" /> </div> </div> </div> <br /> <br /> <div class="form-group"> <div class="col-md-9 col-md-offset-3"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form>