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


Posted in Javascript onMarch 15, 2018

一、需求:

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

二、最后效果

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

三、需要引入的文件(src/index.html)

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

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

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

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

四、代码部分

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上。

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

Javascript 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
vue之浏览器存储方法封装实例
Mar 15 #Javascript
vue实现提示保存后退出的方法
Mar 15 #Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 #Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 #Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 #Javascript
iview中Select 选择器多选校验方法
Mar 15 #Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 #Javascript
You might like
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
理解Python中的类与实例
2015/04/27 Python
python字典快速保存于读取的方法
2018/03/23 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
python实现键盘输入的实操方法
2019/07/16 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
全民健身日活动方案
2014/01/29 职场文书
刑事和解协议书范本
2014/11/19 职场文书
营销计划书范文
2015/01/17 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
Python anaconda安装库命令详解
2021/10/16 Python