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控件
May 07 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 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实现对两个数组进行减法操作的方法
2015/04/17 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
php格式文件打开的四种方法
2018/02/24 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
jQuery实现跨域
2015/02/03 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
vue this.reload 方法 配置
2018/09/12 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
客户接待方案
2014/02/26 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
师德师风的心得体会
2014/09/02 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
感恩教育观后感
2015/06/17 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书