bootstrap datarangepicker如何使用
本文为博主原创,未经允许不得转载:
下载资源文件:
地址:Github:https://github.com/dangrossman/bootstrap-daterangepicker/
1.页面引用静态文件:
<link href="assets/plugins/bootstrap-daterangepicker/css/daterangepicker.css" type="text/css" rel="stylesheet"/>
<script  src="assets/plugins/bootstrap-daterangepicker/js/moment.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-daterangepicker/js/daterangepicker.js" type="text/javascript"></script>
2.绑定元素:
<div style="padding-top: 15px;" id = 'demo'>
<input id="datePickerSelect" readonly="" value="" placeholder="自定义" class="form-control ant-calendar-picker-input ant-input" />
<span class="ant-calendar-picker-icon" style="margin-top: 0;"></span>
</div>
3.引用插件方法:
$(document).ready(function() {
               updateConfig();
               function updateConfig() {
                   //按日范围进行查询
               $('#datePickerSelect').daterangepicker({
                   "startDate": "12/01/2017",
                   "endDate": "12/07/2018",
                    format: 'YYYY-MM-DD'
               }, function(start, end, label) {
                   console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
                   var customDayCondition= start.format('YYYY-MM-DD')+"+"+ end.format('YYYY-MM-DD');
                   //此处可定义回调方法
               });
4.参数设置:
`startDate`: (Date object, moment object or string) 起始时间 `endDate`: (Date object, moment object or string) 结束时间 `minDate`: (Date object, moment object or string) 可选最早时间 `maxDate`: (Date object, moment object or string) 可选最迟时间 `timePicker`: (boolean) 是否显示time选择 `timePickerIncrement`: (number) time选择递增数 `timePicker12Hour`: (boolean) 是否12小时制 `opens`: (string: 'left'/'right') 显示在元素左边还是右边 `buttonClasses`: (array) 按钮样式 `applyClass`: (string) 应用按钮样式 `cancelClass`: (string) 取消按钮样式 `format`: (string) date/time格式 `separator`: (string) 分隔符 `locale`: (object) 本地设置
此处需要注意的是,该时间格式的属性,只能格式到年月日时分秒和年月日两种。
5.效果图:

bootstrap datarangepicker如何使用的更多相关文章
- 旺财速啃H5框架之Bootstrap(五)
		
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
 - 旺财速啃H5框架之Bootstrap(四)
		
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
 - bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
		
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
 - 参考bootstrap中的popover.js的css画消息弹框
		
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
 - Bootstrap 模态框(Modal)插件
		
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
 - 利用bootstrap的carousel.js实现轮播图动画
		
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
 - 旺财速啃H5框架之Bootstrap(三)
		
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
 - 旺财速啃H5框架之Bootstrap(二)
		
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...
 - 旺财速啃H5框架之Bootstrap(一)
		
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
 
随机推荐
- sql server字符串中怎么添加换行?
			
换行/回车,可以使用CHAR函数处理,比如: 1 insert into tbtest (text) values ('abc' + char(13)+char(10) + 'def') 主要还是要看 ...
 - Innodb引擎状态查看
			
我们的MySQL数据库内的表一般都是Innodb表类型的. mysql>show engine innodb status; (低版本用: show innodb status;) === ...
 - __import__ 与动态加载 python module
			
原文出处: koala bear Direct use of __import__() is rare, except in cases where you want to import a m ...
 - 最小生成树(kruskal模版 Prim模板)
			
http://acm.sdut.edu.cn/sdutoj/showproblem.php?pid=2144&cid=1186 最小生成树,最重要的是了解思想 稠密图用Prim,稀疏图用Kru ...
 - ubuntu开发环境下eclipse的alt+/自动补全功能不能用
			
解决方法:windows ---preferences---General---keys ,把在搜索框中搜Word Completion,把该快捷键unbind,然后给content assist 绑 ...
 - Object之wait
			
一.源码. 1.公共本地,且可继承但不可重写. 2.公共,且可继承但不可重写. 3.公共,且可继承但不可重写. 二.解释. 1.因为这些方法是Object类中的非静态的public方法,而任何其他类都 ...
 - linux下安装vsftp(二)
			
安装vsftpd 1.以管理员(root)身份执行以下命令 yum install vsftpd 2.设置开机启动vsftpd ftp服务 chkconfig vsftpd on 3.启动vsftpd ...
 - linux常用命令:rcp 命令
			
rcp代表"remote file copy"(远程文件拷贝). 1.命令格式: rcp [参数] [源文件] [目标文件] 2.命令功能: 功能: rcp命令用于在计算机之间拷 ...
 - java,swift,oc互相转换,html5 web开发跨平台
			
java,swift,oc互相转换,html5 web开发跨平台 写一个java->swift的程序,这个程序是做跨平台系统的核心部分swift和oc到java也在考虑之列Swift->J ...
 - centos上安装python3.6
			
安装python3.6可能使用的依赖 # yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sql ...