这篇文章主要介绍了angular项目中bootstrap-datetimepicker时间插件的使用示例,现在分享给大家，也给大家做个参考。
一、需求：
后台系统中经常会使用到的功能，选择一个时间区间，根据这个时间区间去筛选一些信息，比如，某一时间段的注册用户。
二、最后效果
三、需要引入的文件（src/index.html）
注意：1、jQuery文件先引用，因为在初始化日期插件是，需要找到DOM中的对象，添加一些样式；
2、可以看到，我项目中并没有引用bootstrap.min.css这个文件，因为是在index.html全局引用的这个样式，对已经写好的样式有很大的影响，因此产生的影响就是样式是乱掉的，你看到的效果图（第一张图片）的样式就需要自己动手啦，写一个共用的样式，在每个组件中引用。
具体样式就不加了，相信如果你引用插件的这个坑淌过来了，这点儿小事儿，就想一颗奶油巧克力，带着成就感慢慢‘品尝’吧~
四、代码部分
A、 To Date
（html代码）
登录后复制
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代码)
<!---->
<!---->
登录后复制
(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上，而不是p上。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
解决npm管理员身份install时出现权限的问题
JS匿名函数和匿名自执行函数概念与用法分析
p5.js入门教程之鼠标交互的示例
以上就是angular项目中bootstrap-datetimepicker时间插件的使用示例的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2753935.html
