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 相关文章推荐
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
详解Vuex中mapState的具体用法
Sep 28 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
php去除字符串换行符示例分享
2014/02/13 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
javascript 数组排序函数
2009/08/20 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
简单实现jQuery手风琴效果
2017/08/18 jQuery
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
python 域名分析工具实现代码
2009/07/15 Python
python 快速排序代码
2009/11/23 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
如何利用Python写个坦克大战
2020/11/18 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
保险专业自荐信范文
2014/02/20 职场文书
企业员工培训感言
2014/02/26 职场文书
小区文明倡议书
2014/05/16 职场文书
会计系毕业生求职信
2014/05/28 职场文书
分公司负责人任命书
2014/06/04 职场文书
大专生找工作自荐书
2014/06/10 职场文书
入党现实表现材料
2014/12/23 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL