angular项目中bootstrap-datetimepicker时间插件的使用示例

一、需求：

后台系统中经常会使用到的功能，选择一个时间区间，根据这个时间区间去筛选一些信息，比如，某一时间段的注册用户。

二、最后效果

三、需要引入的文件（src/index.html）

注意：1、jQuery文件先引用，因为在初始化日期插件是，需要找到DOM中的对象，添加一些样式；

2、可以看到，我项目中并没有引用bootstrap.min.css这个文件，因为是在index.html全局引用的这个样式，对已经写好的样式有很大的影响，因此产生的影响就是样式是乱掉的，你看到的效果图（第一张图片）的样式就需要自己动手啦，写一个共用的样式，在每个组件中引用。

具体样式就不加了，相信如果你引用插件的这个坑淌过来了，这点儿小事儿，就想一颗奶油巧克力，带着成就感慢慢‘品尝'吧~

四、代码部分

A、 To Date

（html代码）

<!--选择时间 datetimepicker 选择到天-->
<p>
 <label class="date-label-width">时间（To Date）:</label>
 <p class="input-group date form_datetime date-p-inline">
  <input type="datetime" size="16" id="startTime" name="startTime" class="date-input-size date-minute-bgcolor" value="" readonly >
  <span class="input-group-addon date-p-inline"><span class="fa fa-calendar fa-lg"></span></span>
 </p>

 <label for="endTime" >-</label>
 <p class="input-group date form_datetime date-p-inline">
  <input type="datetime" id="endTime" name="endTime" class="date-input-size date-minute-bgcolor" value="" readonly>
  <span class="input-group-addon date-p-inline"><span class="fa fa-calendar fa-lg"></span></span>
 </p>
</p>

JS代码

format这个参数可以设置日期的格式，yyyy-mm-dd，yyyy/mm/dd

B、To Minute

(html代码)

<!--选择时间 datetimepicker 选择到分钟-->
<p>
 <label for="dtp_input1" class="date-label-width">时间（To Minute）：</label>
 <p class="input-group date form_datetime date-p-inline" data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
  <input class="date-input-size " id="startTimeMinute" size="16" type="text" value="" readonly>
  <span class="input-group-addon date-p-inline"><span class="fa fa-calendar fa-lg"></span></span>
  <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
 </p>
 <input type="hidden" id="dtp_input1" value="" />

 <label for="dtp_input2">-</label>
 <p class="input-group date form_datetime date-p-inline" data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
  <input class="date-input-size " id="endTimeMinute" size="16" type="text" value="" readonly>
  <span class="input-group-addon date-p-inline"><span class="fa fa-calendar fa-lg"></span></span>
  <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
 </p>
 <input type="hidden" id="dtp_input2" value="" />
</p>

(JS 代码)

注意：因为是一个时间区间，第一个input是开始时间，第二个是结束时间，开始时间必须在结束时间之前，因此，id必须加在input上，而不是p上。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

解决npm管理员身份install时出现权限的问题

JS匿名函数和匿名自执行函数概念与用法分析

p5.js入门教程之鼠标交互的示例

以上就是angular项目中bootstrap-datetimepicker时间插件的使用示例的详细内容，更多请关注Gxl网其它相关文章！