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

Posted 2023-05-08

【中文标题】引导验证器和日期时间选择器冲突

【英文标题】：Bootstrap Validator and Datetime Picker Conflict

【发布时间】：2019-11-06 22:56:38

【问题描述】：

我有一个带日期字段的引导表单，这是必需的。该表单由 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'
          
        
      


    
  );

);

【参考方案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>