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

发布时间：2020-12-18 00:32:54 所属栏目：安全来源：网络整理

导读：一、需求：后台系统中经常会使用到的功能，选择一个时间区间，根据这个时间区间去筛选一些信息，比如，某一时间段的注册用户。二、最后效果三、需要引入的文件（src/index.html）注意：1、jQuery文件先引用，因为在初始化日期插件是，需要找到DOM中的对

一、需求：

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

二、最后效果

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

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

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

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

四、代码部分

A、 To Date

（html代码）

JS代码

$('#endTime').datetimepicker({
format: 'yyyy-mm-dd',function () {
$('#startTime').datetimepicker('setEndDate',$("#endTime").val());
console.log( $("#endTime").val());
});

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

B、To Minute

(html代码)

(JS 代码)

$('#endTimeMinute').datetimepicker({
//language: 'fr',showMeridian: 1

}).on("changeDate",function () {
$('#startTimeMinute').datetimepicker('setEndDate',$("#endTimeMinute").val());
console.log( $("#endTimeMinute").val());
});

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!