引导验证器和日期时间选择器冲突

Question

我有一个带日期字段的引导表单，这是必需的。该表单由 Bootstrap Validator 进行验证。验证器无法识别从选择器中选择的日期字段，并且该字段保持红色 - 表示尚未选择日期。 我有一个小提琴here，包括我的代码。但它似乎也不起作用。非常感谢任何帮助。

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

希望对你有帮助。

$(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>