angular项目中bootstrap-datetimepicker时间插件的使用示例
时间:2019-04-13
本文章向大家介绍angular项目中bootstrap-datetimepicker时间插件的使用示例,主要包括angular项目中bootstrap-datetimepicker时间插件的使用示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、需求:
后台系统中经常会使用到的功能,选择一个时间区间,根据这个时间区间去筛选一些信息,比如,某一时间段的注册用户。
二、最后效果
三、需要引入的文件(src/index.html)
注意: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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- pandas、numpy功能整理,包括机器学习的部分库
- 全能型终端神器!好用、免费!
- 初试geopandas
- 要实现60FPS动画, 你需要了解这些
- 数论-素数
- 自动补全、回滚!介绍一款可视化 sql 诊断利器
- 深度学习-IMBD二分类问题
- 开源、强大的Linux服务器集群管理工具,比宝塔好用!
- 组合数学-抽屉原理
- 利用 Harbor 搭建企业级私有镜像仓库
- Redis-Java项目应用(Jedis、SpringBoot整合、工具类模板)
- 微软被指剽窃他人开源作品!作者被迫终止该项目
- 秋招系列 | 推荐岗史上最强面经来袭(上)
- 一个Tomcat 如何部署多个项目?附多种解决方案及详细步骤!
- 初识SpringCloud