【前端碎片记录】datetimepicker和bootstrapValidator组合实现日期选择与验证问题

最新推荐文章于 2023-01-05 15:18:09 发布

柠檬裙子

最新推荐文章于 2023-01-05 15:18:09 发布

阅读量850

点赞数 1

分类专栏：前端 JavaScript bootstrapValidator datetimepicker

本文链接：https://blog.csdn.net/Pinecone_/article/details/87008329

版权

前端同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

bootstrapValidator

1 篇文章 0 订阅

订阅专栏

最近在尝试一个小项目的时候，表单提交用到了日期选择和验证插件，但是UI显式如图，位置一直不对，原代码如下：

<div class="form-group">
	<label for="dtp_input2" class="col-sm-2 control-label">出团日期<p style="color: #C7254E; display: inline-block;">*</p></label>
	<div class="input-group date form_date col-sm-6" style="padding-left: 15px;" data-date="" data-date-format="yyyy-MM-dd" data-link-field="dtp_inpu2" data-link-format="yyyy-mm-dd">		                        	
	 <input type="text" class="form-control" name="outTime" id="edit_outTime"/>
	 <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
	 <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
	 <input type="hidden" class="col-sm-2" id="dtp_input2" value="" />
  </div>
</div>

改了很多次都不对，后来在input中触发datetimepicker插件：

<div class="form-group">
	<label for="dtp_input2" class="col-sm-2 control-label">出团日期<p style="color: #C7254E; display: inline-block;">*</p></label>
    <div class="col-sm-6" >		                        	
		 <input type="text" class="input-group date form_date form-control" name="outTime" id="edit_outTime" data-date-format="yyyy-MM-dd" data-link-field="dtp_inpu2" data-link-format="yyyy-mm-dd"/>
	</div>
</div>

验证后的√标志显式正确：