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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
实例分析js事件循环机制
Dec 13 Javascript
js保留两位小数方法总结
Jan 31 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 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
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
javascript event 事件解析
2011/01/31 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python数据分析:关键字提取方式
2020/02/24 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
JSF的标签库有哪些
2012/04/27 面试题
工程地质勘察专业大学生求职信
2013/10/13 职场文书
学校安全工作制度
2014/01/19 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
保护野生动物倡议书
2014/05/16 职场文书
员工试用期自我评价
2014/09/18 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android