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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
VSCode搭建React Native环境
May 07 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
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
PHP中文乱码解决方案
2015/03/05 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
写js时遇到的一些小问题
2010/12/06 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
PyMongo安装使用笔记
2015/04/27 Python
详解python中的文件与目录操作
2017/07/11 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
numpy中矩阵合并的实例
2018/06/15 Python
Numpy之文件存取的示例代码
2018/08/03 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
解决python 找不到module的问题
2020/02/12 Python
Python作用域与名字空间原理详解
2020/03/21 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
英国航空官网:British Airways
2016/09/11 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
零件设计自荐信范文
2013/11/27 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
python入门之算法学习
2021/04/22 Python
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL