html5双日期时间选择控件,bootstrap daterangepicker双日历时间段选择控件详解
双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间,时间段的最大跨度可以在程序里设定。我们项目里用到的Bootstrap版本是2.3.1,所以我把daterangepicker与Bootstrap-2.3.1进行了整合。
一、需要引入的css与js
二、html部分代码
日期:
三、使用js调用daterangepicker
$(document).ready(function (){
//时间插件
$('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));
$('#reportrange').daterangepicker(
{
// startDate: moment().startOf('day'),
//endDate: moment(),
//minDate: '01/01/2012', //最小时间
maxDate : moment(), //最大时间
dateLimit : {
days : 30
}, //起止时间的最大间隔
showDropdowns : true,
showWeekNumbers : false, //是否显示第几周
timePicker : true, //是否显示小时和分钟
timePickerIncrement : 60, //时间的增量,单位为分钟
timePicker12Hour : false, //是否使用12小时制来显示时间
ranges : {
//'最近1小时': [moment().subtract('hours',1), moment()],
'今日': [moment().startOf('day'), moment()],
'昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
'最近7日': [moment().subtract('days', 6), moment()],
'最近30日': [moment().subtract('days', 29), moment()]
},
opens : 'right', //日期选择框的弹出位置
buttonClasses : [ 'btn btn-default' ],
applyClass : 'btn-small btn-primary blue',
cancelClass : 'btn-small',
format : 'YYYY-MM-DD HH:mm:ss', //控件中from和to 显示的日期格式
separator : ' to ',
locale : {
applyLabel : '确定',
cancelLabel : '取消',
fromLabel : '起始时间',
toLabel : '结束时间',
customRangeLabel : '自定义',
daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月' ],
firstDay : 1
}
}, function(start, end, label) {//格式化日期显示框
$('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
});
//设置日期菜单被选项 --开始--
/*
var dateOption ;
if("${riqi}"=='day') {
dateOption = "今日";
}else if("${riqi}"=='yday') {
dateOption = "昨日";
}else if("${riqi}"=='week'){
dateOption ="最近7日";
}else if("${riqi}"=='month'){
dateOption ="最近30日";
}else if("${riqi}"=='year'){
dateOption ="最近一年";
}else{
dateOption = "自定义";
}
$(".daterangepicker").find("li").each(function (){
if($(this).hasClass("active")){
$(this).removeClass("active");
}
if(dateOption==$(this).html()){
$(this).addClass("active");
}
});*/
//设置日期菜单被选项 --结束--
})
四、效果图
五、实例下载地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html5双日期时间选择控件,bootstrap daterangepicker双日历时间段选择控件详解相关推荐
- bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 - daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...
- 基于Bootstrap的时分秒选择控件timepicker
基于Bootstrap的时分秒选择控件timepicker 最近项目中要用到时间选择控件,然而研究了半天并没有发现 bootstrap-datetimepicker 控件只选择时分秒的配置方法.自己动 ...
- altas(ajax)控件(二十三):等级选择控件Rating
一. 简介 等级选择控件Rating提供了一种全新的方式来进行等级选择,在以往的web上我们只能通过使用特殊字符"☆"来表达等级,有了等级选择控件Rating我 ...
- html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能(图文详解上篇)...
这篇文章主要为大家详细介绍了HTML5 Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 因为最近一段时间,一直在弄微信项目,其中涉及到 ...
- html5中的empty是啥,什么是empty选择器?empty选择器详解
本篇文章给大家带来的内容是关于什么是empty选择器?empty选择器详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在CSS3中,:empty选择器用于选择一个不包含任何子元素 ...
- 基于qt中QCalendarWidget的双日历时间范围选择控件(自定义)
控件预览: 控件基于QT设计,单击日历设置时间范围起点,再次单击日历设置时间范围终点: 当起止时间为同一天时,所选日期右上角显示"单"字样: 控件设计说明: 控件基于QT中QDia ...
- 双11直播技术强力后盾——阿里云导播服务功能详解与场景应用
最早的双11购物节是从2009年淘宝开始,历经8年的洗礼,现在双11已经演变成全球范围内所有线上线下商家和消费者的购物狂欢节,今年的天猫双11以1682亿元的交易额圆满收官,再次打破去年的记录. 直播 ...
- 【2023年第十一届泰迪杯数据挖掘挑战赛】A题:新冠疫情防控数据的分析 建模方案及python代码详解
更新时间:2023-3-30 1 题目 一.背景 自2019年底至今,全国各地陆续出现不同程度的新冠病毒感染疫情,如何控制疫情蔓 延.维持社会生活及经济秩序的正常运行是疫情防控的重要课题.大数据分析为 ...
- 【日期、时区、时间】本地时间转UTC时间详解
UTC时间,指的是把源日期转化为0时区的时间. 1.如果结果是Date类型,则需要在Calendar对象 内计算时间偏移 /*** 把时间转化为utc时间格式* * @param localTime ...
- html5+vue无法拖拽,Vue拖拽排序插件Vuedraggable使用方法详解_心善_前端开发者
大家好,最近做的项目要用到拖拽排序,我现在的项目是 首先在 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import ...
最新文章
- enter对应的keycode_键盘对应数字-keycode值大全
- Python将PDF文件转换成PNG的方案
- Matlab各种最值问题
- 防御sql和xss的php代码,PHP防XSS 防SQL注入的代码
- __RESTRICT修改为__RRSTRICT,程序闪退。
- python redis模块常用_Python基础-redis模块使用
- 分解模式 - 按业务领域分解模式划分微服务
- JAVA CLASS混淆工具:RetroGuard(已无法下载)
- c语言开发视频监控系统,基于Crotex_A8平台的本地视频监控系统.doc
- JAVA实现杨辉三角的三种方式
- 文件分割方式 模仿hadoop手写一个工作原理 模仿hadoop filesplit任意切片
- 计算bed区间gc含量,碱基深度等
- als算法参数_ALS算法
- html+dwcs6代码,Dreamweaver cs6如何快速整理代码?
- Sql Sever删除数据库时提示数据库正在被使用,无法删除解决办法
- TIA protal与SCL从入门到精通(4)——软件单元使用
- 微型计算机中的数据总线用来进行什么的传输,汽检2011级汽车车载网络复习题答案...
- Linux 6.2:华为代码加速核心功能 715 倍!
- 机房服务器维保 招标文件,机房维护服务项目招标文件.docx
- 反脆弱 做一个内心强大的人_需要强大的软件? 使它脆弱
热门文章
- Intel Visual Fortan与gfortran使用rename函数的区别
- 消息通知调度服务器,mPaaS 服务端核心组件:消息推送 MPS 架构及流程设计
- 凸包算法(Convex Hull Algorithm)
- c语言手机表白代码大全,C语言表白代码
- 爬取斗鱼所有房间及直播源
- Linux服务器的软件安装步骤
- 数据库课程设计(学校运动会管理系统)2021-9-21
- VScode插件C/C++ Project Generator产生的Makefile模板
- 由《炮灰模型——女生选择追求者模型》到“微软钻石题”
- 测试经典用例练习之水杯测试用例