当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > angular项目中bootstrap-datetimepicker时间插件的使用示例

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

2018年04月01日  | 移动技术网IT编程  | 我要评论

胜利,郑州长途汽车时刻表,319枪声

一、需求：

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

二、最后效果

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

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

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

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

四、代码部分

a、 to date

（html代码）

<!--选择时间 datetimepicker 选择到天-->
<div>
 <label class="date-label-width">时间（to date）:</label>
 <div class="input-group date form_datetime date-div-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-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
 </div>

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

js代码

//初始化日期插件 -- 选择到天
$('#starttime').datetimepicker({
 format: 'yyyy-mm-dd',//显示格式
 todayhighlight: 1,//今天高亮
 minview: "month",//设置只显示到月份
 startview:2,
 forceparse: 0,
 showmeridian: 1,
 autoclose: true,//选择后自动关闭
 language: 'zh-cn',
 weekstart: 1,
 // todaybtn: 1,
 // autoclose: 1,
 // todayhighlight: 1,
 // startview: 2,
 // minview: 2,
 // forceparse: 0,
 // pickerposition:'bottom-right'//日期插件弹出的位置
}).on("changedate", function () {
 $('#endtime').datetimepicker('setstartdate', $("#starttime").val());
 console.log( $("#starttime").val());
 $("#endtime").focus()
});

$('#endtime').datetimepicker({
 format: 'yyyy-mm-dd',//显示格式
 todayhighlight: 1,//今天高亮
 minview: "month",//设置只显示到月份
 startview:2,
 forceparse: 0,
 showmeridian: 1,
 autoclose: true,//选择后自动关闭
 language: 'zh-cn',
 weekstart: 1,
 // todaybtn: 1,
 // autoclose: 1,
 // todayhighlight: 1,
 // startview: 2,
 // minview: 2,
 // forceparse: 0,
 // pickerposition:'bottom-right'//日期插件弹出的位置
}).on("changedate", function () {
 $('#starttime').datetimepicker('setenddate', $("#endtime").val());
 console.log( $("#endtime").val());
});

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

b、to minute

(html代码)

<!--选择时间 datetimepicker 选择到分钟-->
<div>
 <label for="dtp_input1" class="date-label-width">时间（to minute）：</label>
 <div class="input-group date form_datetime date-div-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-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
  <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
 </div>
 <input type="hidden" id="dtp_input1" value="" />

 <label for="dtp_input2">-</label>
 <div class="input-group date form_datetime date-div-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-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
  <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
 </div>
 <input type="hidden" id="dtp_input2" value="" />
</div>

(js 代码)

// //初始化日期插件 -- 选择到分钟
$('#starttimeminute').datetimepicker({
 //language: 'fr',
 format: 'yyyy-mm-dd hh:ii',//显示格式
 weekstart: 1,
 todaybtn: 1,
 autoclose: 1,
 todayhighlight: 1,
 startview: 2,
 forceparse: 0,
 showmeridian: 1
}).on("changedate", function () {
 $('#endtimeminute').datetimepicker('setstartdate', $("#starttimeminute").val());
 console.log( $("#starttimeminute").val());
 $("#endtimeminute").focus()
});

$('#endtimeminute').datetimepicker({
 //language: 'fr',
 format: 'yyyy-mm-dd hh:ii',//显示格式
 weekstart: 1,
 todaybtn: 1,
 autoclose: 1,
 todayhighlight: 1,
 startview: 2,
 forceparse: 0,
 showmeridian: 1

}).on("changedate", function () {
 $('#starttimeminute').datetimepicker('setenddate', $("#endtimeminute").val());
 console.log( $("#endtimeminute").val());
});

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

至此，我已经如愿看到了理想的效果，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网